<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <!--必须的css引用--> <link href="https://www.jb51.net/Content/bootstrap/css/bootstrap.min.css" /> <link href="https://www.jb51.net/Content/bootstrap-table/bootstrap-table.min.css" /> <link href="https://www.jb51.net/Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.css" /> </head> <body> <div> <!--<div> <div>查询条件</div> <div> <form> <div> <label for="name">员工姓名</label> <div> <input type="text"> </div> <label for="address">家庭住址</label> <div> <input type="text"> </div> <div> <button type="button">查询</button> </div> </div> </form> </div> </div>--> <div> <button type="button"> <span aria-hidden="true"></span>新增 </button> </div> <table></table> </div> <!--新增或者编辑的弹出框--> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>操作</h4> </div> <div> <div> <label>姓名</label> <div> <input type="text" placeholder="姓名"> </div> </div> <div> <label>年龄</label> <div> <input type="text" placeholder="年龄"> </div> </div> <div> <label>学校</label> <div> <input type="text" placeholder="学校"> </div> </div> <div> <label>家庭住址</label> <div> <input type="text" placeholder="学校"> </div> </div> <div> <label>备注</label> <div> <textarea placeholder="备注"></textarea> </div> </div> </div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true"></span>关闭</button> <button type="submit"><span aria-hidden="true"></span>保存</button> </div> </div> </div> </div> <!--必须的js文件--> <script src="https://www.jb51.net/Content/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/Content/bootstrap/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/Content/bootstrap-table/bootstrap-table.min.js"></script> <script src="https://www.jb51.net/Content/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script src="https://www.jb51.net/Content/bootstrap-table/extensions/fixed-column/bootstrap-table-fixed-columns.js"></script> <script type="text/javascript"> //页面加载完成之后 var data = [ { Id: 1, Name: 'Jim', Age: 30, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 2, Name: 'Kate', Age: 30, School: '光明小学', Address: '深圳市', Remark: 'My Name is Jim Green' }, { Id: 3, Name: 'Lucy', Age: 30, School: '光明小学', Address: '广州天河机场', Remark: 'My Name is Jim Green' }, { Id: 4, Name: 'Lilei', Age: 30, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 5, Name: 'Lintao', Age: 30, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 6, Name: 'Lily', Age: 30, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 7, Name: 'Hanmeimei', Age: 30, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 8, Name: '张三', Age: 46, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 9, Name: '李四', Age: 23, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 10, Name: '王五', Age: 33, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 11, Name: '赵六', Age: 22, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 12, Name: 'Polly', Age: 300, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, { Id: 13, Name: 'Uncle', Age: 50, School: '光明小学', Address: '北京市光明小学旁', Remark: 'My Name is Jim Green' }, ]; var childData = [ { SourceField: 'A', BackField: 'BB' }, { SourceField: 'CC', BackField: 'UU' }, { SourceField: 'DD', BackField: 'J' }, ]; $(function () { //表格的初始化 $('#tb_user').bootstrapTable({ data: data, //直接从本地数据初始化表格 method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: function (params) { return params; }, //传递参数（*） sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 5, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 height:400, selectItemName: 'parentItem', fixedColumns: true, fixedNumber: 6, //注册加载子表的事件。注意下这里的三个参数！ onExpandRow: function (index, row, $detail) { InitSubTable(index, row, $detail); }, columns: [{ checkbox: true }, { field: 'Name', title: '姓名', width:200 }, { field: 'Age', title: '年龄', width:200 }, { field: 'School', title: '毕业院校', width:200 }, { field: 'Address', title: '家庭住址', width:100 }, { field: 'Remark', title: '备注', width:100 }, { field: 'Remark', title: '备注', width:100 }, { field: 'Remark', title: '备注', width:100 }, { field: 'Remark', title: '备注', width:100 }, { field: 'Remark', title: '备注', width:100 }, { field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ field: 'Remark', title: '备注', width:100 },{ title: '操作', width:200, formatter: function (value, row, index) {//这里的三个参数：value表示当前行当前列的值；row表示当前行的数据；index表示当前行的索引（从0开始）。 var html = '<button type="button"><span aria- hidden="true" ></span >编辑</button > ' + '<button type="button"><span aria- hidden="true" ></span >删除</button >'; return html; } }], onEditableSave: function (field, row, oldValue, $el) { alert("更新保存事件，原始值为" + oldValue); //$.ajax({ // type: "post", // url: "/Editable/Edit", // data: row, // dataType: 'JSON', // success: function (data, status) { // if (status == "success") { // alert('提交数据成功'); // } // }, // error: function () { // alert('编辑失败'); // }, // complete: function () { // } //}); } }); //新增事件 $("#btn_add").on('click', function () { $('#tb_user').bootstrapTable("resetView"); //弹出模态框 $("#myModal").modal(); //给弹出框里面的各个文本框赋值 $("#myModal input").val(""); $("#myModal textarea").val(""); }); }); //加载子表 var InitSubTable = function (index, row, $detail) { var parentid = row.MENU_ID; var cur_table = $detail.html('<table></table>').find('table'); //子表的初始化和父表完全相同 $(cur_table).bootstrapTable({ //url: '/api/MenuApi/GetChildrenMenu', data: childData, method: 'get', queryParams: { strParentID: parentid }, ajaxOptions: { strParentID: parentid }, clickToSelect: true, uniqueId: "MENU_ID", pageSize: 10, pageList: [10, 25], selectItemName: 'childItem'+index, checkboxHeader:false, columns: [{ checkbox: true }, { field: 'SourceField', title: '源端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }, { field: 'BackField', title: '备端字段' }], //无线循环取子表，直到子表里面没有记录 onExpandRow: function (index, row, $Subdetail) { //oInit.InitSubTable(index, row, $Subdetail); } }); }; //编辑事件 var editModel = function (id) { //根据当前行的id获取当前的行数据 var row = $("#tb_user").bootstrapTable('getRowByUniqueId', id); //弹出模态框 $("#myModal").modal(); //给弹出框里面的各个文本框赋值 $("#myModal input[name='Name']").val(row.Name); $("#myModal input[name='Age']").val(row.Age); $("#myModal input[name='School']").val(row.School); $("#myModal input[name='Address']").val(row.Address); $("#myModal textarea[name='Remark']").val(row.Remark); } //删除事件 var deleteModel = function (id) { alert("删除id为" + id + "的用户"); } </script> </body> </html> bootstrapTableFixColumns.html
代码释疑：
1、源码各个方法解释
BootstrapTable.prototype.initFixedColumns ：当初始化的时候配置了fixedColumns: true时需要执行的冻结列的方法。
BootstrapTable.prototype.initHeader：重写组件的的初始化表头的方法，加入冻结的表头。
BootstrapTable.prototype.initBody：重写组件的初始化表内容的方法，加入冻结的表内容。
BootstrapTable.prototype.resetView：重写“父类”的resetView方法，通过setTimeout去设置冻结的表头和表体的宽度和高度。
BootstrapTable.prototype.fitHeaderColumns：设置冻结列的表头的宽高。
BootstrapTable.prototype.fitBodyColumns ：设置冻结列的表体的宽高，以及滚动条和主体表格的滚动条同步。
2、对于上述抛出的ie和谷歌的兼容性问题的解析
查看BootstrapTable.prototype.initBody方法，你会发现里面写有部分注释。