引入相应的js、css
先引入jQuery,jQuery必须在前面!
1 |
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script> |
引入bootstrap的js和css
1 2 3 4 5 6 7 8 |
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> |
下载bootstrap-table的js和css并引用到项目中=>传送门
使用bootstrap-table
创建一个table标签,给这个标签取一个id(我取的id是exampleTableToolbar),然后开始写javascript代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<script> $(function () { $('#exampleTableToolbar').bootstrapTable({ url: "/WGR/AddDeleteUser", search: true, showRefresh: true, showToggle: true, showColumns: true, toolbar: '#exampleToolbar', iconSize: 'outline', icons: { refresh: 'glyphicon-repeat', toggle: 'glyphicon-list-alt', columns: 'glyphicon-list' }, pagination: true, showColumns: true, showColumns: true, showRefresh: true, pageSize: 5, pageList: [5, 10, 15, 20], columns: [ { checkbox: true }, { field: 'ID', title: 'ID' }, { field: 'RealName', title: '姓名' }, { field: 'title', title: '部门' }, { field: 'Email', title: 'Email' }, { field: 'Money', title: 'Money' }, { field: 'Address', title: '地址' }] }); </script> |
url是后台返回的json,columns是后台查询的字段,field必须与后台处理的字段一样,我后台如下
1 2 3 4 5 6 |
public ActionResult AddDeleteUser() { UsersBll user = new UsersBll(); ViewBag.user = user.GetList(u=>true).Select(u => new {u.Address,u.Email,u.Money,u.RealName,title=u.Dept.Title,u.ID }); return Json(ViewBag.user, JsonRequestBehavior.AllowGet); } |
单选或多选获取行id来删除数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$('#delete').click(function () { var data = $('#exampleTableToolbar').bootstrapTable("getSelections"); if (data.length > 0) { layer.confirm('你确定要删除选中的数据吗?', { btn: ['确定', '取消'] //按钮 }, function () { for (var i = 0; i < data.length; i++) { var userid = data[i].ID; $.post('/WGR/DeleteUser', {userid:userid}, function (msg) { if (msg == "no") { layer.msg('删除失败!', { icon: 2 }); } }); } layer.msg('删除成功!', { icon: 1,time:1000 }); window.location.reload(); }); } }); |
delete是我的删除按钮的id,通过getSelections方法获取选中行的数据(为数组),若是没有选中getSelections获取的数组长度为0
bootstrap-table常用的属性和方法
属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
url: '/Interface/GetData', //请求后台的URL(*) method: 'get', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) 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, //是否显示父子表 |
方法
定义方法响应的语法
$('#table').bootstrapTable('method', parameter);
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
getOptions | none | 返回各项的object | $table.bootstrapTable(‘getOptions’); - 请查看: getOptions |
getSelections | none | 返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行) | $table.bootstrapTable(‘getSelections’); - 请查看: getSelections |
getAllSelections | none | 返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组 | $table.bootstrapTable(‘getAllSelections’); - 请查看: getAllSelections |
showAllColumns | none | 显示所有的列 | $table.bootstrapTable(‘showAllColumns’); - 就是显示所有的列,并没什么可说的 |
hideAllColumns | none | 隐藏所有的列 | $table.bootstrapTable(‘hideAllColumns’); - 就是隐藏所有的列 |
getData | useCurrentPage | 获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据 | $table.bootstrapTable(‘getData’); - 请查看: getData |
getRowByUniqueId | id | 获取你想要的某行的数据(设置某行的id) | $table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID - 请查看: getRowByUniqueId |
load | data | 向表中加载数据,原来的数据将被移除 | $table.bootstrapTable(‘load’, data); - 请查看: load |
append | data | 将数据追加在最后一行后 | $table.bootstrapTable(‘append’, data);data可以是数组 - 请查看: append |
prepend | data | 也是追加,只是在第一行之前 | $table.bootstrapTable(‘prepend’, data);data可以是数组 - 请查看: prepend |
remove | params | 移除一行或多行你所选的数据 | $table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); - id:所需移除的那一行(rows,一或多行)的字段 - values:被移除的行的数组 - 请查看: remove |
removeAll | - | 移除表中所有的数据 | $table.bootstrapTable(‘removeAll’); - 请查看: removeAll |
removeByUniqueId | - | 移除某行数据(设置某行的id) | $table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID - 请查看: removeByUniqueId |
insertRow | params | 新增一行,所需的参数如下: - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁) - row:你想插入的数据 |
$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); - 请查看: insertRow |
updateRow | params | 更新行数据,所需的参数如下: - index:所要更新的行的索引(index) - row:你想换的新的数据 |
$table.bootstrapTable(‘updateRow’, {index: 1, row: row}); - 请查看: updateRow - 请查看: Bootstrap Table实现定时刷新数据 |
updateByUniqueId | params | 更新某行数据,所需的参数如下: - id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个) - row:你想换的新的数据 |
$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); - 请查看: updateByUniqueId |
showRow | params | 显示特定行,所需的参数至少包括下面所列的一个: - id:所要显示的行的索引(index) - uniqueId:那一行的id |
$table.bootstrapTable(‘showRow’, {index:1}); - 请查看: showRow/hideRow |
hideRow | params | 隐藏特定行,所需的参数至少包括下面所列的一个: - id:所要隐藏的行的索引(index) - uniqueId:那一行的id |
$table.bootstrapTable(‘hideRow’, {index:1}); - 请查看: showRow/hideRow |
getRowsHidden | boolean | 获取隐藏的行(官方原话很多,其实总结起来就前面那一句) | $table.bootstrapTable(‘getRowsHidden’); |
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
mergeCells | options | 融合~(把多格合并为一格),所需的参数如下: - index:所要合并的格所在行的索引(index) - field:所在列的字段名 - rowspan:合并的行总数目 - colspan:合并的列总数目 |
$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3}); - 请查看: mergeCells |
updateCell | params | 更新某格数据,所需的参数如下: - index:所要合并的格所在行的索引(index) - field:所在列的字段名 - value:要换的新的数据 你也可以设置{reinit:false}来禁用表格的再次初始化 |
$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value}); |
refresh | params | 刷新服务端的数据: - 可以设置{silent:true}来 - 设置{url:newUrl,pageNumber:pageNumber, pageSize:pageSize}改变请求的地址,页数,每页所显示的条数 - 可以设置{query:{foo:’bar’}}增加特定的参数 |
$table.bootstrapTable(‘refresh’); - 请查看: refresh |
refreshOptions | options | 看例子吧 | - 请查看: refreshOptions |
resetSearch | text | 重置搜索的文本(text) | - 请查看: resetSearch |
showLoading | none | 显示正在加载…… | - 请查看: showLoading/hideLoading |
hideLoading | none | 隐藏正在加载…… | - 请查看: showLoading/hideLoading |
checkAll | none | 选择当前页的所有行 | $table.bootstrapTable(‘checkAll’); - 请查看: checkAll/uncheckAll |
uncheckAll | none | 取消选择当前页的所有行 | $table.bootstrapTable(‘uncheckAll’); - 请查看: checkAll/uncheckAll |
checkInvert | none | 反向选择,不难理解吧 | $table.bootstrapTable(‘checkInvert’); |
check | index | 选择某一行,索引(index)从0开始 | $table.bootstrapTable(‘check’, 1); - 请查看: check/uncheck |
uncheck | index | 取消选择某一行,索引(index)从0开始 | $table.bootstrapTable(‘uncheck’, 1); - 请查看: check/uncheck |
checkBy | params | 通过数组选择某一行,所需的参数如下: - field:所要选的字段名 - values:所要选的那些值(数组) |
官方没,啊,有例纸: - $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 请查看: checkBy/uncheckBy |
uncheckBy | params | 通过数组选择某一行,所需的参数如下: - field:所要取消选择的字段名 - values:所要取消选择的那些值(数组) |
$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 请查看: checkBy/uncheckBy |
resetView | params | 改变表格的样式,例如改变表格的高度(height) | $table.bootstrapTable(‘resetView’); - 请查看: resetView |
resetWidth | none | 自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度 | $table.bootstrapTable(‘resetWidth’); |
destroy | none | 销毁表格 A!T!T!A!C!K! | $table.bootstrapTable(‘destroy’); - 请查看: destroy |
showColumn | field | 显示特定的列 | $table.bootstrapTable(‘showColumn’, ‘name’); - 请查看: showColumn/hideCoulumn |
hideColumn | field | 隐藏特定的列 | $table.bootstrapTable(‘hideColumn’, ‘name’); - 请查看: showColumn/hideCoulumn |
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
getHiddenColumns | - | 获取所有隐藏的列 | $table.bootstrapTable(‘getHiddenColumns’); |
getVisibleColumns | - | 获取所有显示的列 | $table.bootstrapTable(‘getVisibleColumns’); |
scrollTo | value | 滚……到哪个位置,单位是’px’,如果设为’bottom’,嗖,恭喜你已到表尾 | $table.bootstrapTable(‘scrollTo’, 0); - 请查看: scrollTo |
getScrollPosition | none | 获取当前所滚到的位置,单位你懂得,就是’px’ | $table.bootstrapTable(‘getScrollPosition’); |
filterBy | none | 只能在客户端(client-side,相对server-side)这边用,过滤表中的数据 例如: - 可以设置{age:10}来只显示age为10的数据 - 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: [“blue”, “red”, “green”]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据 |
$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] }); - 请查看: filterBy |
selectPage | page | 跳转到特定的页面 | $table.bootstrapTable(‘selectPage’, 1); - 请查看: selectPage/prevPage/nextPage |
prevPage | none | 跳转到上一页 | $table.bootstrapTable(‘prevPage’); - 请查看: selectPage/prevPage/nextPage |
nextPage | none | 跳转到下一页 | $table.bootstrapTable(‘nextPage’); - 请查看: selectPage/prevPage/nextPage |
togglePagination | none | 词穷,请看例纸 | $table.bootstrapTable(‘togglePagination’); - 请查看: togglePagination |
toggleView | none | 改变视图 | $table.bootstrapTable(‘toggleView’); - 请查看: toggleView |
expandRow | index | 可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用 - 通过参数index来展开此列的详细视图 |
- 请查看: expandRow-collapseRow |
collapseRow | index | 可使用条件:detail view设为了true - 通过参数index来关闭此列的详细视图 |
- 请查看: expandRow-collapseRow |
expandAllRow | is subtable | 可使用条件:detail view设为了true - 展开所有列的详细视图 |
$table.bootstrapTable(‘expandAllRow’); - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的 |
collapseAllRow | is subtable | 可使用条件:detail view设为了true - 关闭所有列的详细视图 |
$table.bootstrapTable(‘collapseAllRow’); - 参考上面 |
实例效果图


评论