bootstrap-table使用总结

1. 初始化bootstrap-table

e.g. 以我在项目中应用到的实例来讲解

在HTML中引入以下代码即可：

<div id="adminTable"></div>

在js中初始化代码如下：

 $("#adminTable").bootstrapTable({
        method : 'get', // 服务器数据的请求方式 get or post
        url : prefix+"?op=LISTUSERS&regionid="+regionId+"&groupid="+groupId+"&usertype=false",
        iconSize : 'outline',
        toolbar : '#adminToolbar',
        striped : false, // 设置为true会有隔行变色效果
        dataType : "json", // 服务器返回的数据类型
        pagination : true, // 设置为true会在底部显示分页条
        queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数
        singleSelect : false, // 设置为true将禁止多选
        paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
        paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
        search : false, // 是否显示搜索框
        showColumns : false, // 是否显示内容下拉框（选择显示的列）
        sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者"server"
        ajaxOptions:{ //自定义请求头信息
            headers: {
                key1 : value1,
                key2 : value2,
                ......
            }
        },
        responseHandler: function (result) {//在ajax请求成功后，对返回数据进行预处理
        	return getTableData(result);
        },
        columns : [
            {
                checkbox : true
            },
            {
                field : 'nodeId', // 列字段名
                title : '序号' // 列标题
            },
            {
                field : 'userName',
                title : '用户名'
            },
            {
                field : "userInfo",
                visible : false
            },
            {
                title : '操作',
                field : 'id',
                align : 'center',
                formatter : function(value, row, index) {
                    var e = '<a  class="btn btn-primary btn-sm " href="#" mce_href="#" title="编辑" onclick="editAdmin(\''
                        + row.nodeId+":"+row.userName+":"+false
                        + '\')"><i class="fa fa-edit "></i></a> ';
                    var d = '<a class="btn btn-warning btn-sm " href="#" title="删除"  mce_href="#" onclick="remove(\''
                        + row.nodeId+":"+row.userName+":"+false
                        + '\')"><i class="fa fa-remove"></i></a> ';
                    var f = '<a class="btn btn-success btn-sm " href="#" title="重置密码"  mce_href="#" onclick="resetPwd(\''
                        + row.nodeId+":"+row.userName+":"+false
                        + '\')"><i class="fa fa-key"></i></a> ';
                    return e + d + f;
                }
            }],
        onDblClickRow: function (row) {//双击表格行监听方法
            
        },
        onLoadSuccess: function(){  //加载成功时执行
        	
        },
	    onLoadError: function(result){  //加载失败时执行
	    	layer.msg("adminTable load esrror:"+result.message);
	    }
    });

如以上所示，初始化bootstrap-table实例时，需要指定多个参数。

总结以上参数说明，其中主要的几个参数如下：

• http请求参数

method：请求类型
url：资源路径
ajaxOptions：自定义请求参数

• http请求预处理

responseHandler: function (result){ return result.data}

• 分页设置

分页可选择在服务端分页、客户端分页

服务端分页:http请求中会自动添加limit、pageNum参数来请求分页数据；

客户端分页：向服务端请求所有数据，由网页将所有数据处理分页，呈现在页面中的是数据的分页显示状态。

• 定义列columns

columns 是一个json数组，数组的长度对应列数，每个json元素对应列内容，包括：field–列属性、title–列名，columns 的定义决定了其加载数据的标准格式

• 添加监听函数

可根据需要添加多个监听函数，如以上示例代码，使用了3个监听函数

2. bootstrap-table要求数据格式

以上实例代码中可以看出，bootstrap-table可直接发送http请求数据，是将数据直接渲染到页面中的。

因此，返回的数据格式有一定的要求：

{total : rowNum,//rowNum为rows的数组长度
 rows  : [//rows为json对象数组
        {//键值对根据表格初始化中的columns结构而定
            fieldName1 : fieldValue1 ,
            fieldName2 : fieldValue2 ,
            fieldName3 : fieldValue3 ,
            ......}，
        {
            fieldName1 : fieldValue1 ,
            fieldName2 : fieldValue2 ,
            fieldName3 : fieldValue3 ,
            ......}，
        ......
        ]
}

注意：如果使用了预处理函数，获得的数据格式与内容都是正确，但无法在页面中渲染出来，请尝试在预处理函数中只返回rows（json对象数组）。

3.重载表格

使用新的表格参数及url重新加载表格数据：重新执行表格初始化方法

4.刷新表格

当前的表格所有参数不变，执行以下方法刷新表格

$(“#adminTable”).bootstrapTable('refresh');

5. 完整删除表格

$(“#adminTable”).bootstrapTable('destroy');

6. 添加行

var row = {
	nodeId : result.nodeId,
	userName : result.userName,
	userInfo : result.nodeId+":"+result.userName+":"+result.user
};
$("#adminTable").bootstrapTable('prepend',row);

参数名	意义
prepend (append)	插入位置
row	插入行数据

7. 删除行

$("#adminTable").bootstrapTable('remove', {
 	field : "nodeId",
 	values : [parseInt(userInfo[0])]
 });

参数名	意义
remove	操作类型
field	指定列属性名
values	删除行对应field列值 注意此为数组，并且数据类型须与初始化赋值时相同

8. 修改行

$("#adminTable").bootstrapTable('updateRow', {
 	index : 1,
 	row : rowInfo
 });

参数名	意义
updateRow	操作类型
index	指定行序号
row	根据column定义的行内容：json格式

以下为学习过程中对我帮助比较大的文章，若如上解释未解决您的问题，可参考如下链接：

前端表格插件 BootstrapTable 入门教程
bootsrap官方文档
使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
bootstrap填坑之旅
bootsrap使用小结