bootstrap table插件使用说明demo

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(2421)   2024-03-05 14:05:42

该插件是基于bootstrap框架开发的一个table插件,功能强大实用性强
展示结果截图:
bootstrap table插件使用效果图
1.下载bootstrap table插件,下载
2.导入插件相关的css和js文件,当然bootstrap框架的基本组件必须导入

<link rel="stylesheet" href="bootstrap3/plugins/bootstrap-table/dist/bootstrap-table.min.css">
<script src="bootstrap3/plugins/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="bootstrap3/plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

3.body中添加一个table,给一个id,添加一个搜索的工具栏

<div class="search_bar form-inline" id="search_bar">
			<span>著作:</span>
			<select class="form-control" id="search_copyright">
			  <option value="">全部</option>
			  <option value="Original">原创</option>
			  <option value="Reproduced">转载</option>
			  <option value="Translation">翻译</option>
			</select>
			<span>状态:</span>
			<select class="form-control" id="search_status">
			  <option value="">全部</option>
			  <option value="Normal">已发布</option>
			  <option value="UnAudit">待审核</option>
			</select>
			<span>排序:</span>
			<select class="form-control" id="search_order">
			  <option value="createTime"  title="创建时间排序">创时</option>
			  <option value="updateTime" title="更新时间排序" selected="selected">更时</option>
			</select>
			<span>标题:</span>
			<input type="text" class="form-control" placeholder="输入博客标题" id="serach_title">&nbsp;<button class="btn btn-default" id="search_btn">查询</button>&nbsp;
			</div>
<table id="table"></table>

4.写js

$(function(){
    $('#table').bootstrapTable({
        url:'manager/blog/list.json',
        method:'get',
        contentType:'application/json',
        showColumns: true, //显示隐藏列  
        showRefresh: true,  //显示刷新按钮
        toolbar:'#search_bar',
        queryParams:queryPrams,
         pagination: true, 
         pageSize: 10,
         pageList:[10],
         sidePagination: "server",
        columns: [{
            field: 'title',
            title: '博客标题'
        },{
            field: 'authorName',
            title: '作者'
        },{
            field:'copyright',
            title:'版权',
            formatter:function(value,row,index){
                var cp=value;
                if(value=='Reproduced'){
                    cp='转载';
                }else if(value=='Translation'){
                    cp='翻译';
                }else if(value=='Original'){
                    cp='原创';
                }
                return cp;
            },
             width:50
        },{
            field: 'autoAuditDate',
            title: '自动审核日期'
        },{
            field: 'status',
            title: '状态',
            formatter:function(value,row,index){
                var status=value;
                if(value=='Normal'){
                    status='正常';
                }else if(value=='UnAudit'){
                    status='待审核';
                }else if(value=='Refuse'){
                    status='驳回';
                }else if(value=='AutoAudit'){
                    status='自审核';
                }
                return status;
            },
            width:60
        },{
            field: 'updateTime',
            title: '更新时间',
            formatter:function(value,row,index){
                return $.timestamp2string(value,'yyyy-MM-dd hh:mm:ss');
            },
            width:170
        },{
            field: 'id', 
            title:'操作',
            formatter:function(value,row,index){
                var p='<a class="btn btn-xs btn-default" title="预览博客" href="manager/blog/view/'+value+'.html" target="_blank">预</a>&nbsp;';
                var a='<button class="btn btn-xs btn-success" title="通过审核" onclick="audit('+value+')">审</button>&nbsp;';
                var auto='<button class="btn btn-xs btn-success" title="定时自动审核" onclick="auditAuto('+value+')">定</button>&nbsp;';
                var r='<button class="btn btn-xs btn-default" title="拒绝审核" onclick="auditCanncel('+value+')">驳</button>&nbsp;';
                return p+a+auto+r;
            },
            width:130
        }]
    })
//查询事件绑定
    $('#search_btn').click(function(){
        $("#table").bootstrapTable('refresh');
    });
    $('#search_status').change(function(){
        $("#table").bootstrapTable('refresh');
    });
    $('#search_copyright').change(function(){
        $("#table").bootstrapTable('refresh');
    });
    $('#search_order').change(function(){
        $("#table").bootstrapTable('refresh');
    });

 


 

 

地址:https://www.leftso.com/article/57.html

相关阅读

bootstrap table插件使用说明demo
bootstrap-table pageNumber无法获取值解决
bootstrap table跨域问题完美解决
已封装成为插件欢迎使用及反馈插件下载:(访问密码9987)bootstrap-viewer.zipbootstrap image viewer 图片放大查看实现效果:小图  大图  &lt;!D...
idea Mybatis generator插件的配置和使用,在eclipse中,我们可以在eclipse的插件市场安装一个Mybatis generator的插件。然后对Mybatis gen...
Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用,jquery,验证码获取
jQuery之MD5加密插件使用及下载,网络中md5进行简单加密的地方越来越多。这里讲解一个jQuery的md5插件
[JAVA]_图文详解CKeditor4.4.X版本添加程序代码高亮插件codesnippet,ckeditor
Vert.x 入门教程通过maven shade plugin插件打包发布项目,上一篇文章,我们主要初步的了解了下eclipse vert.x是什么有什么用。当然一个程序编写完成后最终还是需要打...