Bootstrap table 跨页全选
此代码是针对于bootstrap table中分页的跨页全选。
以下是整个bootstrap的定义
<script type="text/javascript" src="http://cdn.jsdelivr.net/lodash/3.8.0/lodash.min.js"></script>//一定要引用这个js不然文档加载函数中的的_[func]不会生效
$table.bootstrapTable({
method: 'get',
url: queryUrl,
toolbar: '#toolbaruser', //工具按钮用哪个容器
height: $(window).height() - ,
striped: false, //是否显示行间隔色
pagination: true,
singleSelect: false, //是否多选
pageSize: ,
pageNumber: ,
showRefresh: true,
pageList: [],
search: false, //不显示 搜索框
// showColumns: true, //不显示下拉框(选择显示的列)
sidePagination: "server", //服务端请求
queryParams: queryParams,
showToggle: true,
clickToSelect: true,
responseHandler: responseHandler, //这里是引用的下面的responseHandler方法
// showExport: true, // exportDataType: "basic", minimunCountColumns: , columns: [{ field: 'state', checkbox: true }, { //field: 'Number',//可不加 title: '序号', //标题 可不加 formatter: function (value, row, index) { return index + ; } } , { title: '流水号', field: 'Id', sortable: true }, { field: 'UserName', title: '用户名', sortable: true }, { field: 'Number', title: '工号/学号', sortable: true }, { field: 'CreateName', title: '创建人', sortable: true }, { field: 'CreateTime', title: '创建时间', sortable: true }, { field: 'State', title: '状态', sortable: true, formatter: function (value, row) { return stateFormatter(value, row); } } ], onLoadSuccess: function () { }, onLoadError: function () { mif.showErrorMessageBox("数据加载失败!"); } });
在文档就绪函数中添加如下代码:
$(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) {
debugger
return row.Id; //注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 studentId等
});
debugger
func = $.inArray(e.type, ['check', 'check-all']) > - ? 'union' : 'difference';
selectionIds = _[func](selectionIds, ids); });
});
添加responseHandler方法
此方法在bootstrap table中有定义,一定要加上
function responseHandler(res) {
debugger
$.each(res.rows, function (i, row) { //注意这里的row.id 中的id指的是列表的主键,替换成你使用的就行了比如 studentId等
row.state = $.inArray(row.Id, selectionIds) !== -;
});
return res;
}
下面是全选按钮以及取消全选的click事件:
click事件的目的是获取bootstrap table中的所有数据的id
function checkall() {
$.ajax({
//async: false,
type: "POST",
data: {
State: $("#organization").val(),
OrgCode: $("#userrole").val(),
RoleCode: $("#name").val(),
UserName: $("#number").val()
},
url: 'GetAll',
dataType: 'text',
success: function (data) { console.log(data)
selectionIds.splice(, selectionIds.length); //清空selectionIds数组
var arr = data.split(',');
console.log(arr);
for (var i = ; i < arr.length; i++) {
selectionIds.push(parseInt(arr[i]));
}
console.log(selectionIds)
query(); //query方法的目的主要是刷新表格
}
});
}
function cancel() {
selectionIds.splice(0, selectionIds.length); //
console.log(selectionIds)
query();
}
function query() {
$table.bootstrapTable('refresh');
}
以上就是bootstraptable的跨页全选,代码没贴完,但是认真读了,是没有问题的。
eg:此博客是本人原创,转载请注明出处。
Bootstrap table 跨页全选的更多相关文章
- layui table 跨页记忆选择
layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...
- vue2.0实现在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- vue2.0在table中实现全选和反选
其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的, ...
- A在SP.NET跨页多选
在ASP.NET跨页多选 本文介绍怎样在ASP.NET中实现多页面选择的问题.其详细思路非常easy:用隐藏的INPUT记住每次选择的项目,在进行数据绑定时.检查保存的值,再在DataGrid中进行选 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- bootstrap 中的 iCheck 全选反选功能的实现
喜欢bootstrap 风格的同学应该知道,iCheck的样式还是很好看的. 官网: http://www.bootcss.com/p/icheck/ 进入正题,iCheck提供了一些方法,可以进行全 ...
- web跨页弹窗选值
最近在项目中看到这样一种效果——点击当前网页文本框,然后弹出一个缩小的网页,并在网页里选择或填写数据,然后又返回当前网页,小网页关闭.感觉非常不错,其实在以前网上也看见过,只是当时没有留心.今天抽时间 ...
- element ui表格常用功能如:导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求
<template> <div class="table-cooperte"> <el-table :data="tableData&quo ...
- vue+el-table在ajax分页时支持全选单页和全选所有
需求:el-table中,ajax分页的情况下,要支持全选单页和全选所有页中的记录,效果如下图所示: 界面代码: <el-table :data="tableDat ...
随机推荐
- Python3------装饰器详解
装饰器 定义:本质是函数.(装饰其他函数)就是为其他函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 理解装饰器前提条件: 1.函数即"变量&qu ...
- Angular6 学习笔记——内容投影, ViewChild和ContentChild
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- ES6躬行记(22)——Promise
在JavaScript中,回调函数是处理异步编程的常用解决方案,但层层嵌套的回调金字塔(如下代码所示)一直受人诟病,因为不仅在视觉上更加混乱,而且在管理上也更为复杂. setTimeout(() =& ...
- socket agent统一模板
# -*- coding: utf- -*- # data:-- : # user:DIY # file:agent_eay.py import socket def work(i): sock = ...
- elk部署心得
一.ElasticSearch 部署 1.配置文件里node.name 要不一致. vim /etc/elasticsearch cluster.name: aubin-cluster # 集群名称 ...
- BZOJ4825: [Hnoi2017]单旋(Splay)
题面 传送门 题解 调了好几个小时--指针太难写了-- 因为只单旋最值,我们以单旋\(\min\)为例,那么\(\min\)是没有左子树的,而它旋到根之后,它的深度变为\(1\),它的右子树里所有节点 ...
- 2018 Multi-University Training Contest 4
累惹. B. Harvest of Apples 题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6333 题意:求∑(i=0,m) C(n,m). 分 ...
- SSH免密码远程登录Linux
1. 有A,B两台机(Linux/unix), 要想从A用ssh远程登录到B上(假设各自的IP,A:192.168.100:B:192.168.1.104). 2. 在A机上,用“ssh-keygen ...
- LoadLinked/StoreConditional (LL/SC)
MIPS中LL/SC指令介绍 MIPS32中的LL.SC指令说明 理解MIPS指令集中的ll (load linked) 和 sc 你用ll指令读取一个内存中的数据并存到一个寄存器,然后在寄存器修改( ...
- String 在内存中如何存储的
基本数据类型由于长度固定,且需要空间比较少,所以直接存储在栈中:而对象比较大,所以栈中只存储一个4btye的引用地址(逻辑地址). java中对String对象特殊对待,所以在heap区域分成了两块: ...