Bootstrap-table中跨页记住checbox,返回时保留勾选状态
2017-09-12 14:46
549 查看
Bootstrap-table中跨页记住checbox,返回时保留勾选状态
<body> <div class="container"> <h1>Maintain selected on server side.(<a href="https://github.com/wenzhixin/bootstrap-table/issues/917" target="_blank">#917</a>).</h1> <table id="table" data-toggle="table" data-pagination="true" data-side-pagination="server" data-url="/examples/bootstrap_table/data" data-response-handler="responseHandler"> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> </div> <script> var $table = $('#table'), selections = []; $(function () { $table.on('check.bs.table check-all.bs.table ' + 'uncheck.bs.table uncheck-all.bs.table', function (e, rows) { var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) { return row.id;//注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 studentId等 }), func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'; selections = _[func](selections, ids); }); }); function responseHandler(res) { $.each(res.rows, function (i, row) { //注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 studentId等 row.state = $.inArray(row.id, selections) !== -1; }); return res; } </script> </body>
勾选的结果保留在selections数组中
使用时在jquery.min.js、bootstrap.min.js、bootstrap-table.js之后引入
lodash.min.js
lodash.min.js下载地址
http://download.csdn.net/download/capmiachael/9974980
参考
http://issues.wenzhixin.net.cn/bootstrap-table/#issues/917.html
相关文章推荐
- bootstrap table 多选框分页保留示例代码
- bootstrap-table复选框默认选中。(从数据库获取到对应的状态进行判断是否为选中状态)
- 设置tableview返回时取消选中状态
- jquery循环table中tbody的tr中input:text,将值进行拼接传入控制器并返回状态和描述
- Ace_Admin_Bootstrap 模板跳转后记住侧边栏状态
- 使用sessionstorage解决微信网页返回保留原状态的问题
- HDU 1258Sum It Up(暴力dfs,记住相同的状态只保留一个)
- bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
- bootstrap BeyondAdmin 左侧菜单记住点击状态
- Layui之table中的radio在切换分页时无法记住选中状态
- bootstrap-table当查询后再去点击分页时,后台返回的数据是正确的,前台也显示正确了,但是当我点击分页时,列表会刷新为最初的数据,而不再是本次查询得到的数据
- PHP 使用cookie实现记住登录状态
- http状态返回代码
- nginx如何实现404状态返回 200隐藏URL
- Bootstrap Table使用整理(二)
- 基于bootstrap table分页数据及行内编辑和导出数据(二)导出数据
- BootStrap-table-contextmenu使用过程的一些总结
- BootStrap table 数据填充与分页应用总结
- 【SMS】移动短信网关返回信息状态代码说明【China Mobile】
- jquery ajax方法重写,利用statusCode对象根据服务器返回的不同状态进行处理