bootstrap-table使用教程

作者:zarte    发布时间: 2018-03-06

bootstrapjs

相关文档及下载地址

Bootstrap中文网:www.bootcss.com
Bootstrap Table源码:github.com/wenzhixin/bootstrap-table

Bootstrap Table及相关文件的引入

bootstrap-table是依赖于bootstarp的,所以应先引入bootstarp相关文件

<!-- 引入 Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在前置js文件引入后再引入bootstrap-table.js。
github上的文件解压后会得到多个文件夹及文件,将dist文件夹重命名为bootstrap-table,里面的所有文件及文件夹保留原样,确保bootstrap-table文件夹里有bootstrap-table.js、bootstrap-table.css及locale文件夹。

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

html表单

<div>
    <!--工具栏-->
    <div id="toolbar"></div>
    <!--表格-->
    <table id="tabledemo">
    </table>
</div>

外部的table父级的div和

<div id="toolbar"></div>

非必需。

最主要的js初始化部分

<script>
    //初始化对象定义
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tabledemo').bootstrapTable({
                url: './test.php',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
              //  cache: false,                       //是否使用缓存,默认为true,
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
              //  queryParams: oTableInit.queryParams,//传递参数
                queryParamsType: '',              //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
             //   pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                pageList:[],
                search: true,                       //是否显示表格搜索,此搜索是客户端搜索.
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 700,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "no",                     //每一行的唯一标识,一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    {
                        field: 'id',
                        title: 'ID'
                    }, {
                        field: 'name',
                        title: '名字'
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        //自定义方法,添加操作按钮
                        formatter:function(value, row, index) {//赋予的参数
                                return [
                                    '<a class="btn active edit" href="#">编辑</a>',
                                    '<a class="btn active del" href="#">删除</a>',
                                ].join('');
                            }

                    },

                ],
                //行样式设置可省略按默认.
                rowStyle: function (row, index) {
                    var classesArr = ['success', 'info'];
                    var strclass = "";
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[0];
                    } else {//奇数行
                        strclass = classesArr[1];
                    }
                    return { classes: strclass };
                },
                responseHandler:function (res) {
                    //console.log(res);
                    /***服务端分页**/
                    return {
                        total : res.count, //总页数,前面的key必须为"total"
                        rows : res.list //行数据,前面的key要与之前设置的dataField的值一致.
                    };
                    /***客户端分页
                     return {
                        data : res.list, //全部信息
                    };
                     */
                }
            });
        };
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            console.log(params);
            var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的  
           //或者直接修改params['xx']="xx";然后return params即可
                limit: params.limit,   //页面大小
                offset:params.offset,
                search:''
            };
            return temp;
        };
        return oTableInit;
    };
    //定义一个对象
    var tableobj = TableInit();
    //初始化,这里才开始渲染
    tableobj.Init();
</script>

服务端代码

示例代码为php

echo json_encode(array(
    'count'=>20,
    'list'=>array(
        array('id'=>1,'name'=>'tt'),
        array('id'=>2,'name'=>'bb'),
        array('id'=>3,'name'=>'cc'),
    )
));

关于客户端分页和服务端分页的不同设置

客户端分页

js初始化参数设置为

sidePagination: "client",  

对服务端返回的信息进行格式化.服务端需返回全部信息,由前端页面负责控制分页显示。若服务端返回的json对象里已经包含data则无需设置responseHandler此项。

 responseHandler:function (res) {
      return {
         data : res.list, //全部信息
        };
 }

服务端分页

js初始化参数设置为

sidePagination: "server",  

对服务端返回的信息进行格式化。若服务端返回的json对象里已经包含total、rows则无需设置responseHandler此项,total为全部的数目不是当前返回结果的条数。

 responseHandler:function (res) {
       return {
           total : res.count, //结果总个数,前面的key必须为"total"
           rows : res.list //行数据,前面的key要与之前设置的dataField的值一致.
        };
 }

当点击页码的时候默认将在url中带offset和limit参数(所带参数可按照上面代码设置函数进行修改),后端更具这两个参数进行分页查询。注意是从0开始算的,例如每页5条记录,第一页offset:0 limit:5,第二页offset:5,limit:5

刷新表单数据

$("#tabledemo").bootstrapTable('refresh', {silent: true});
//或者
$("#tabledemo").bootstrapTable('refresh', {url : path});
//或者,refreshOptions:更新bootstrapTable options,并从server端获取数据。与refresh的区别在于,refreshOptions设置的option,会被作为下次请求server数据的默认option使用。
$("#tabledemo").bootstrapTable('refreshOptions',{pageNumber : 1});

工具栏

toolbar: '#toolbar',                //工具按钮用哪个容器

设置次参数,初始化后会将#toolbar整合到表格区块中。
表格及工具栏的按钮事件可以用jq进行事件绑定实现所需要的功能。

上一篇:  关于博客

下一篇:  Centos安装L2TP/IPSec

加载更多