bootstrap-table使用教程

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

bootstrapjs

## 相关文档及下载地址 Bootstrap中文网:[www.bootcss.com](http://www.bootcss.com/) Bootstrap Table源码:[github.com/wenzhixin/bootstrap-table](https://github.com/wenzhixin/bootstrap-table) ## Bootstrap Table及相关文件的引入 bootstrap-table是依赖于bootstarp的,所以应先引入bootstarp相关文件 ```html <!-- 引入 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文件夹。 ```html <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表单 ```html <div> <!--工具栏--> <div id="toolbar"></div> <!--表格--> <table id="tabledemo"> </table> </div> ``` 外部的table父级的div和 ```html <div id="toolbar"></div> ``` 非必需。 ## 最主要的js初始化部分 ```javascript <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 ```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此项。 ```javascript responseHandler:function (res) { return { data : res.list, //全部信息 }; } ``` ### 服务端分页 js初始化参数设置为 sidePagination: "server", 对服务端返回的信息进行格式化。若服务端返回的json对象里已经包含total、rows则无需设置responseHandler此项,total为全部的数目不是当前返回结果的条数。 ```javascript 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

加载更多