2023年6月21日发(作者：)

Bootstrap-table使⽤总结Bootstrap-table 使⽤记录⼀下:Bootstrap-table是基于Boostrap开发的插件，因此使⽤的时候，需要引⼊Bootstrap的脚本和样式。如果我们项⽬中没有引⼊相关的⽂件，则需要引⼊这些样式和脚本⽂件，如下所⽰。然后是Bootstrap-table的依赖引⽤：CSS⽂件引⼊ 脚本⽂件引⼊<--汉化⽂件，放在 后⾯-->*bootstrap-table在页⾯中的使⽤，可以分为两种，⼀种是纯粹⽤HTML5的写法，通过data-的⽅式指定各种属性设置，⼀种是HTML+JS⽅式实现弹性设置。采⽤JS代码⽅式来初始化表格插件，那么只需要在HTML上声明⼀个表格对象即可，如下代码。

//定⼀个table标签

绑定idjs配置项var $table; //初始化bootstrap-table的内容 function InitMainTable () { //记录页⾯bootstrap-table全局变量$table，⽅便应⽤ var queryUrl = '/TestUser/FindWithPager?rnd=' + () $table = $('#table').bootstrapTable({ url: queryUrl, //请求后台的URL（*） method: 'GET', //请求⽅式（*） //toolbar: '#toolbar', //⼯具按钮⽤哪个容器 striped: true, //是否显⽰⾏间隔⾊ cache: false, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*） pagination: true, //是否显⽰分页（*） sortable: true, //是否启⽤排序 sortOrder: "asc", //排序⽅式 sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第⼀页，默认第⼀页,并记录 pageSize: rows, //每页的记录⾏数（*） pageList: [10, 25, 50, 100], //可供选择的每页的⾏数（*） search: false, //是否显⽰表格搜索 strictSearch: true, showColumns: true, //是否显⽰所有的列（选择显⽰的列） showRefresh: true, //是否显⽰刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启⽤点击选中⾏ //height: 500, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度 uniqueId: "ID", //每⼀⾏的唯⼀标识，⼀般为主键列 showToggle: true, //是否显⽰详细视图和列表视图的切换按钮 cardView: false, //是否显⽰详细视图 detailView: false, //是否显⽰⽗⼦表 //得到查询的参数 queryParams : function (params) { //这⾥的键的名字和控制器的变量名必须⼀致，这边改动，控制器也需要改成⼀样的 var temp = { rows: , //页⾯⼤⼩ page: ( / ) + 1, //页码 page: ( / ) + 1, //页码 sort: , //排序列名 sortOrder: //排位命令（desc，asc） }; return temp; }, columns: [{ checkbox: true, visible: true //是否显⽰复选框 }, { field: 'Name', title: '姓名', sortable: true }, { field: 'Mobile', title: '⼿机', sortable: true }, { field: 'Email', title: '邮箱', sortable: true, formatter: emailFormatter }, { field: 'Homepage', title: '主页', formatter: function (value, row, index) { /*

可以进⾏业务逻辑处理 value:

代表当前单元格中的值， row：代表当前⾏, index:

代表当前⾏的下标,

*/ return `${value}` } }, { field: 'Hobby', title: '兴趣爱好', width:300, //

超出30⽂字省略号隐藏 formatter: function(value, row, index) { return $.p(value,30); } }, { field: 'Gender', title: '性别', sortable: true }, { field: 'Age', title: '年龄' }, { field: 'BirthDate', title: '出⽣⽇期', formatter: dateFormatter }, { field: 'Height', title: '⾝⾼' }, { field: 'Note', title: '备注' }, { field:'ID', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter }, ], onLoadSuccess: function () { onLoadSuccess: function () { }, onLoadError: function () { showTips("数据加载失败！"); }, onDblClickRow: function (row, $element) { var id = ; EditViewById(id, 'view'); }, }); };可拿到当前勾选框的值$("#table").bootstrapTable('getSelections');

2023年6月21日发(作者：)

Bootstrap-table使⽤总结Bootstrap-table 使⽤记录⼀下:Bootstrap-table是基于Boostrap开发的插件，因此使⽤的时候，需要引⼊Bootstrap的脚本和样式。如果我们项⽬中没有引⼊相关的⽂件，则需要引⼊这些样式和脚本⽂件，如下所⽰。然后是Bootstrap-table的依赖引⽤：CSS⽂件引⼊ 脚本⽂件引⼊<--汉化⽂件，放在 后⾯-->*bootstrap-table在页⾯中的使⽤，可以分为两种，⼀种是纯粹⽤HTML5的写法，通过data-的⽅式指定各种属性设置，⼀种是HTML+JS⽅式实现弹性设置。采⽤JS代码⽅式来初始化表格插件，那么只需要在HTML上声明⼀个表格对象即可，如下代码。

//定⼀个table标签

绑定idjs配置项var $table; //初始化bootstrap-table的内容 function InitMainTable () { //记录页⾯bootstrap-table全局变量$table，⽅便应⽤ var queryUrl = '/TestUser/FindWithPager?rnd=' + () $table = $('#table').bootstrapTable({ url: queryUrl, //请求后台的URL（*） method: 'GET', //请求⽅式（*） //toolbar: '#toolbar', //⼯具按钮⽤哪个容器 striped: true, //是否显⽰⾏间隔⾊ cache: false, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*） pagination: true, //是否显⽰分页（*） sortable: true, //是否启⽤排序 sortOrder: "asc", //排序⽅式 sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第⼀页，默认第⼀页,并记录 pageSize: rows, //每页的记录⾏数（*） pageList: [10, 25, 50, 100], //可供选择的每页的⾏数（*） search: false, //是否显⽰表格搜索 strictSearch: true, showColumns: true, //是否显⽰所有的列（选择显⽰的列） showRefresh: true, //是否显⽰刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启⽤点击选中⾏ //height: 500, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度 uniqueId: "ID", //每⼀⾏的唯⼀标识，⼀般为主键列 showToggle: true, //是否显⽰详细视图和列表视图的切换按钮 cardView: false, //是否显⽰详细视图 detailView: false, //是否显⽰⽗⼦表 //得到查询的参数 queryParams : function (params) { //这⾥的键的名字和控制器的变量名必须⼀致，这边改动，控制器也需要改成⼀样的 var temp = { rows: , //页⾯⼤⼩ page: ( / ) + 1, //页码 page: ( / ) + 1, //页码 sort: , //排序列名 sortOrder: //排位命令（desc，asc） }; return temp; }, columns: [{ checkbox: true, visible: true //是否显⽰复选框 }, { field: 'Name', title: '姓名', sortable: true }, { field: 'Mobile', title: '⼿机', sortable: true }, { field: 'Email', title: '邮箱', sortable: true, formatter: emailFormatter }, { field: 'Homepage', title: '主页', formatter: function (value, row, index) { /*

可以进⾏业务逻辑处理 value:

代表当前单元格中的值， row：代表当前⾏, index:

代表当前⾏的下标,

*/ return `${value}` } }, { field: 'Hobby', title: '兴趣爱好', width:300, //

超出30⽂字省略号隐藏 formatter: function(value, row, index) { return $.p(value,30); } }, { field: 'Gender', title: '性别', sortable: true }, { field: 'Age', title: '年龄' }, { field: 'BirthDate', title: '出⽣⽇期', formatter: dateFormatter }, { field: 'Height', title: '⾝⾼' }, { field: 'Note', title: '备注' }, { field:'ID', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter }, ], onLoadSuccess: function () { onLoadSuccess: function () { }, onLoadError: function () { showTips("数据加载失败！"); }, onDblClickRow: function (row, $element) { var id = ; EditViewById(id, 'view'); }, }); };可拿到当前勾选框的值$("#table").bootstrapTable('getSelections');