bootstraptable 汇总_bootstrap table使用总结

使用bootstrap table可以很方便的开发后台表格，对数据进行异步更新，编辑。下面就来介绍一下bootstrap table的详细使用方法：

因为之前在官网也找了很久的教程，源码感觉隐藏的比较隐秘，其他扩展功能也很难找到，其实都在：http://issues.wenzhixin.net.cn/bootstrap-table/index.html这里面，点击上面的tab可以找到具体的功能实现(特别是extension和issues，之前以为issues不是教程，结果点进去才知道)：

最简单的异步表单

1.html中加入如下代码：

1

2.javascript

/*bootstrap table*/

$('#table').bootstrapTable({

url:"/wadmin/permission/doRuleList",//请求数据url

queryParams: function (params) {

return {

offset: params.offset, //页码

limit: params.limit, //页面大小

search : params.search, //搜索

order : params.order, //排序

ordername : params.sort, //排序

};

},

showHeader : true,

showColumns : true,

showRefresh : true,

pagination: true,//分页

sidePagination : 'server',//服务器端分页

pageNumber : 1,

pageList: [5, 10, 20, 50],//分页步进值

search: true,//显示搜索框

//表格的列

columns: [

{

field: 'id',//域值

title: '规则ID',//标题

visible: true,//false表示不显示

sortable: true,//启用排序

width : '5%',

},

{

field: 'name',//域值

title: '唯一英文标识',//标题

visible: true,//false表示不显示

sortable: true,//启用排序

width : '30%',

editable:true,

},

{

field: 'title',//域值

title: '中文描述',//内容

visible: true,//false表示不显示

sortable: true,//启用排序

width : '35%',

editable:true,

},

{

field: 'status',//域值

title: '状态',//内容

visible: true,//false表示不显示

sortable: true,//启用排序

width : '20%',

formatter : function (value, row, index) {

if (row['status'] === 1) {

return '正常';

}

if (row['status'] === 0) {

return '禁用';

}

return value;

}

}

]

});

上面代码中，除了url和下面的column需要动态变之外，其他的基本上都是固定的，可以复制粘贴到处使用。因为规则的固定，所以后台的规则也是比较固定的。

3.thinkPHP5.0实现后台(主要是返回total和rows)

controller

public function doRoleRuleList() {

$id = input("id");

if (!$id) return "";

$limit = input("limit");

$offset = input("offset");

$search = input("search");

$order = input("order", "desc");

$ordername = input("ordername");

if (!$ordername) {

$ordername = 'id';

$order = 'desc';

}

$perModel = new PermissionModel();

$rs = $perModel->doRoleRuleList($id, $offset, $limit, $search, $order, $ordername);

return json($rs);

}

model

public function doRoleRuleList($id, $offset, $limit, $search, $order, $ordername) {

$total = Db::connect("dbUser")->table("auth_rule")->where(['status'=>['<>', 0]])->count();

$auth_group = Db::connect("dbUser")->table("auth_group")->field("id,rules")->where("id", $id)->find();

$rules ="-1";

if ($auth_group && $auth_group['rules']) $rules = $auth_group['rules'];

$rows = Db::connect("dbUser")->table("auth_rule")

->field(['id','name','title',"if(id in ({$rules}), 1, 0)"=>'selected'])

->where([

'status'=>['<>', 0],

// 'name|title' => ['like', "%{$search}%"]

])

->order($ordername." ".$order)

->select();

return ['total'=>