layui table 跨页记忆选择
layui 表格功能目前默认不支持跨页记忆选择
下面来实现layui table跨页记忆选择实现
基于layui版本 1.4.5
表格跨页通用方法
//表格分页复选框
layui.define(['jquery', 'table'], function (exports) {
var $ = layui.jquery
, table = layui.table;
//记录选中表格记录编号http://www.1994july.club/seo/?p=2797
var checkedList = {};
var tableCheckBoxUtil = {
/*初始化分页设置*/
init: function (settings) {
var param = {
//表格id
gridId: ''
//表格lay-filter值
, filterId: ''
//表格主键字段名
, fieldName: ''
};
$.extend(param, settings);
//设置当前保存数据参数http://www.1994july.club/seo/?p=2800
if (checkedList[param.gridId] == null) {
checkedList[param.gridId] = [];
}
//监听选中行
table.on('checkbox(' + param.filterId + ')', function (obj) {
var type = obj.type;
var checked = obj.checked;
console.log(table);
//当前页数据
var currentPageData = table.cache[param.gridId];
//当前选中数据
var checkRowData = [];
//当前取消选中的数据
var cacelCheckedRowData = [];
//debugger;
//选中
if (checked) {
checkRowData = table.checkStatus(param.gridId).data;
}
//取消选中
else {
if (type == 'all') {
cacelCheckedRowData = currentPageData;
}
else {
cacelCheckedRowData.push(obj.data);
}
//console.log(cacelCheckedRowData);
}
//debugger;
//清除数据
$.each(cacelCheckedRowData, function (index, item) {
var itemValue = item[param.fieldName];
checkedList[param.gridId] = checkedList[param.gridId].filter(function (fItem, fIndex) {
return fItem != itemValue;
})
});
//添加选中数据
$.each(checkRowData, function (index, item) {
var itemValue = item[param.fieldName];
if (checkedList[param.gridId].indexOf(itemValue) < 0) {
checkedList[param.gridId].push(itemValue);
}
});
console.log(checkedList);
});
}
//设置页面默认选中(在表格加载完成之后调用http://www.1994july.club/seo/?p=2803)
, checkedDefault: function (settings) {
var param = {
//表格id
gridId: ''
//表格主键字段名
, fieldName: ''
};
$.extend(param, settings);
//当前页数据
var currentPageData = table.cache[param.gridId];
if (checkedList[param.gridId] != null && checkedList[param.gridId].length > 0) {
$.each(currentPageData, function (index, item) {
var itemValue = item[param.fieldName];
if (checkedList[param.gridId].indexOf(itemValue) >= 0) {
//设置选中状态
item.LAY_CHECKED = true;
var rowIndex = item['LAY_TABLE_INDEX'];
updateRowCheckStatus(param.gridId, 'tr[data-index=' + rowIndex + '] input[type="checkbox"]');
}
});
}
//判断当前页是否全选
var currentPageCheckedAll = table.checkStatus(param.gridId).isAll;
if (currentPageCheckedAll) {
updateRowCheckStatus(param.gridId, 'thead tr input[type="checkbox"]');
}
//console.log(table.cache[param.gridId]);
}
//获取当前获取的所有集合值
, getValue: function (settings) {
var param = {
//表格id
gridId: ''
};
$.extend(param, settings);
return checkedList[param.gridId];
}
//设置选中的id(一般在编辑时候调用初始化选中值)
, setIds: function (settings) {
var param = {
gridId: ''
//数据集合
, ids: []
};
$.extend(param, settings);
checkedList[param.gridId] = [];
$.each(param.ids, function (index, item) {
checkedList[param.gridId].push(parseInt(item));
});
}
};
var updateRowCheckStatus = function (gridId, ele) {
var layTableView = $('.layui-table-view');
//一个页面多个表格,这里防止更新表格错误http://www.1994july.club/seo/?p=2805
$.each(layTableView, function (index, item) {
if ($(item).attr('lay-id') == gridId) {
$(item).find(ele).prop('checked', true);
$(item).find(ele).next().addClass('layui-form-checked');
}
});
}
//输出
exports('tableCheckBoxUtil', tableCheckBoxUtil);
});
Html
@{
ViewBag.Title = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MKAdmin.Web.App_Start
@section Styles {
@Styles.Render(PageCssFilesConfig.CheckBoxTableIndex)
}
<div class="page-content-wrap wx_p20">
<div class="zf-wx-index-main">
<form class="layui-form cc-padding-top pr" action="">
<div class="layui-input-block zf-margin-left">
<input type="text" name="title"
id="txt_BasicIndex_Name" placeholder="请输入姓名"
class="layui-input zf-fixed-length zf_h25 w_200">
<a class="layui-btn layui-btn-normal btn_color_confirm zf_h25"
id="btn_CheckBoxSearch" data-type="reload">搜索</a>
<a class="layui-btn layui-btn-normal btn_color_confirm zf_h25"
id="btn_CheckBoxTableGetValue" data-type="reload">获取选中编号</a>
</div>
</form>
</div>
<table id="grid_CheckBoxTable" lay-filter="ft_CheckBoxTable"></table>
</div>
@section Scripts {
@Scripts.Render(PageJsFilesConfig.CheckBoxTableIndex)
}
Js调用
//表格管理 - 基本表格http://www.1994july.club/seo/?p=2807
layui.use(['jquery', 'table', 'tableCheckBoxUtil'], function () {
var table = layui.table,
$ = layui.jquery,
tableCheckBoxUtil = layui.tableCheckBoxUtil;
//表格渲染
table.render({
id: 'cn_GridCheckBoxTable'
, elem: '#grid_CheckBoxTable'
, method: 'post'
, url: '/table/basictable/list'
//启动分页
, page: true
, height: 'full-100'
, where: {
name: ''
}
, cols: [[
{ checkbox: true }
, { field: 'EmployeeId', width: 80, title: '编号' }
, { field: 'EmployeeName', width: 150, title: '姓名' }
, { field: 'EmployeeAge', title: '年龄', width: 100 }
, { field: 'Education', width: 180, title: '学历' }
]]
, done: function (data) {
//2.初始化表格行选中状态
tableCheckBoxUtil.checkedDefault({
gridId: 'cn_GridCheckBoxTable'
, fieldName: 'EmployeeId'
});
}
});
//1.初始化分页设置
tableCheckBoxUtil.init({
gridId: 'cn_GridCheckBoxTable'
, filterId: 'ft_CheckBoxTable'
, fieldName: 'EmployeeId'
});
//3.获取选中编号
$("#btn_CheckBoxTableGetValue").on('click', function () {
var selectedData = tableCheckBoxUtil.getValue({
gridId: 'cn_GridCheckBoxTable'
});
alert(selectedData);
});
});
预览:
http://www.1994july.club/seo/?p=2812
layui table 跨页记忆选择的更多相关文章
- Bootstrap table 跨页全选
此代码是针对于bootstrap table中分页的跨页全选. 以下是整个bootstrap的定义 <script type="text/javascript" src=&q ...
- element ui中表格table翻页记忆勾选状态
<el-table ref="multipleTable" :data="datalist" style="width:100%" @ ...
- Layui Table 分页记忆选中
Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...
- 解决SMARTFORMS 中table 控件单行跨页的问题
在CX项目中,MM模块做了大量的的单据打印的工作,一个问题困扰了我好久,一直不能解决.当物料描述很长时,table控件在单元格中能自动换行,这样就有可能在换页处出现一行记录的一部分打在上一页,一部分记 ...
- IText 生成pdf,处理table cell列跨页缺失的问题
/** * 创建(table)PDF,处理cell 跨页处理 * @param savePath(需要保存的pdf路径) * @param pmbs (数据库查询的数据) ...
- layui table 表格模板按钮实例
这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8& ...
- 项目总结17-使用layui table分页表格
项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...
- LayUI table表格控件 如何显示 对象中的属性(针对Mybatis的级联查询--一对一情况)
1.entity如下: 2.Mybatis的Mapper.xml文件如下 <resultMap id="BaseResultMapPlus" type="dicIt ...
- layui table 表格查询无效问题
[热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...
随机推荐
- Python数据挖掘之随机森林
主要是使用随机森林将four列缺失的数据补齐. # fit到RandomForestRegressor之中,n_estimators代表随机森林中的决策树数量 #n_jobs这个参数告诉引擎有多少处理 ...
- [转帖]CentOS 7 x64 安装 Ceph
CentOS 7 x64 安装 Ceph https://www.cnblogs.com/jicki/p/5801712.html 改天尝试一下. k8s 可以使用ceph 作为 pv和pvc的后端存 ...
- [转帖]Hive 快速入门(全面)
Hive 快速入门(全面) 2018-07-30 16:11:56 琅琊山二当家 阅读数 4343更多 分类专栏: hadoop 大数据 转载: https://www.codercto.com/ ...
- [Oracle] - 关于星期(IW和WW)的算法
1. 查看数据库字符集(如果字符集不同,可能显示乱码) select DECODE(parameter, 'NLS_TERRITORY', 'TERRITORY', 'NLS_LANGUAGE', ' ...
- C++程序的多文件组成
C++程序的多文件组成 [例3.32] 一个源程序按照结构划分为3个文件 // 文件1 student.h (类的声明部分) #include<iostream.h> #include&l ...
- Linux基础-04-权限
1. 查看文件的权限 1) 使用ls –l命令查看文件上所设定的权限. -rw-r--r-- 1 root root 605 Mar 18 20:28 .jp1.tar.gz 权限信息 属主 属组 文 ...
- PAT(B) 1094 谷歌的招聘(Java)
题目链接:1094 谷歌的招聘 (20 point(s)) 题目描述 2004 年 7 月,谷歌在硅谷的 101 号公路边竖立了一块巨大的广告牌(如下图)用于招聘.内容超级简单,就是一个以 .com ...
- NOI2000 青蛙过河[递推]
也许更好的阅读体验 \(\mathcal{Description}\) 原题链接: Comet OJ 洛谷 大小各不相同的一队青蛙站在河左岸的石墩(记为A)上,要过到对岸的石墩(记为D)上去.河心有几 ...
- 【SoloPi】SoloPi使用1-初次使用,环境准备(Windows版)
下载配置Android SDK路径前往 https://developer.android.com/studio/releases/platform-tools#downloads 下载对应系统版本的 ...
- C#-System.Dynamic.ExpandoObject
dynamic dynamicObject = new System.Dynamic.ExpandoObject(); dynamicObject.Id = Guid.NewGuid(); (dyna ...