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 ...
随机推荐
- 如何使用T-SQL备份还原数据库及c#如何调用执行?
准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup database 数据库名 to disk='保存路径 ...
- SHT20 IIC 寄存器概述
** 注:部分内容来自SHT20芯片手册翻译 ** 1.寄存器列表 名称 指令(bin) 寄存器内容(hex) 主机模式(Trigger T measurement hold master) 1110 ...
- C# DataTable导出EXCEL后身份证、银行卡号等长数字信息显示乱码解决
在DataTable导出EXCEL后发现有些格式显示有问题,比如身份证.银行卡号等大于11位的数字显示为科学计数法.13681-1等 带中划线的两段数字显示为日期格式等. 处理方法如下: public ...
- Disruptor使用简介
disruptor是lmax公司开发的一款java高性能并发框架,其本质是一种类似队列的实现“生产者—消费者 ”模式的组件. 下面是其示例代码: public class DisruptorServe ...
- win10 下Oracle安装
在win10 64bit下安装oracle 11的时候,有些问题不注意,安装的时候才遇到就gg了.下面将介绍win10下安装oracle 11的步骤以及安装过程中遇到的一些问题及解决方案. 安装过程中 ...
- js string 和 json 互转
var o = JSON.parse('{"a": 8}'); JSON. stringify(o);
- Android 打开系统设置界面及相应的系统界面
方法 1 :startActivity(new Intent(Settings.ACTION_WIFI_SETTINGS)); 方法 2:Intent intent = new Intent(&quo ...
- Adapter as a WCF Binding - In Depth
WCF LOB Adapter SDK surfaces an adapter as a custom WCF Binding. A WCF Bindingcorresponds to the “H ...
- OO第一单元作业
第一次作业 类图: 复杂度: 圈复杂度的问题一直困扰着这三次作业,主要体现在求导方法中先判断符号导致出现过多判断语句,应该将整理符号放在一个新的类中处理. 第一次作业由于对面向对象的思维有些不理解 ...
- C++ STL 初探
学过C++的人肯定会很熟悉STL标准模板库,STL其实就是封装了一系列的接口,供我们调用.很多函数或者算法的实现不需要我们从头开始写,大大提高我们的编程效率.这篇博客在简单介绍STL的情况下,会详细的 ...