项目中遇到给用户在所有产品中匹配一部分产品。用layui 第一页选好之后到第二页再选,等回到第一页时之前选择的都没了,解决这个问题的办法如下:

//勾选的产品id集合
var chooseAdids = new Array();
//表格数据缓存
var table_data = new Array();
var adid = "";
layui.use('table', function () {
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(user)', function (obj) {
if (obj.checked == true) {
//选中
if(obj.type == 'one') { //当选中一个时 obj.type默认是'one',否则默认是'all'
//去重复
if(chooseAdids.indexOf(obj.data.id,)==-)
{
chooseAdids.push(obj.data.id); } } else {
//全选
for (var i = ; i < table_data.length; i++) {
if(chooseAdids.indexOf(obj.data.id,)==-)
{ chooseAdids.push(table_data[i].id);
} }
}
}
else {
//取消选中
if(obj.type == 'one') {
for (var i = ; i < chooseAdids.length; i++) {
if (chooseAdids[i] == obj.data.id) {
//从下标 i 开始删除一个元素
chooseAdids.splice(i, );
}
}
}
else {
for (var i = ; i < chooseAdids.length; i++) {
for (var j = ; j < table_data.length; j++) {
if (chooseAdids[i] == table_data[j].id) {
//从下标 i 开始删除一个元素
chooseAdids.splice(i,);
}
}
}
}
}
}); var aid = parent.document.getElementById("txtmarry").value; //当编辑时从父页面拿到产品id存在chooseAdids里面供默认选中
if(aid!="")
{
var arr = aid.split(',');
for (var i = ; i < arr.length; i++) {
chooseAdids.push(arr[i]);
}
}
var width = calColumWidth(, , );
// 浏览器宽度发生改变
window.onresize = function () {
width = calColumWidth(, , );
tb.reload();
}
InitAllAdType();
//方法级渲染
var tb = table.render({
elem: '#LAY_table_user'
, url: '@Url.Action("AdidList", "Web_WebUsers")'
, cols: [[
{ checkbox: true, field: 'ck', LAY_CHECKED: false, width: width },
{ field: 'id', title: '产品ID', width: width },
{ field: 'title', title: '产品名称', width: width },
{ field: 'aduserid', title: '产品商ID', width: width },
{ field: 'price_descript', title: '价格描述', width: width },
{ field: 'price_adv', title: '产品商单价/元', width: width },
{ field: 'data_return', title: '返回期限', width: width, templet: '#data_returnTpl' },
{ field: 'data_Confirmation', title: '确认时间', width: width, templet: '#data_ConfirmationTpl' }
]]
, id: 'testReload'
, page: true
, limit:
, limits: []
, height: 'auto'
, width: '80%'
, done: function (res, curr, count) {
// $("[data-field='id']").css('display', 'none');
// 设置换页勾选之前的
table_data = res.data;
//循环所有数据,找出对应关系,设置checkbox选中状态
for (var i = ; i < res.data.length; i++) {
for (var j = ; j < chooseAdids.length; j++) {
if (res.data[i].id == chooseAdids[j]) {
//这里才是真正的有效勾选
res.data[i]["LAY_CHECKED"] = 'true';
//找到对应数据改变勾选样式,呈现出选中效果
var index = res.data[i]['LAY_TABLE_INDEX'];
$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
}
}
}
},
skin: 'row',
even: true
}); var $ = layui.$, active = {
reload: function () {
var txtguz = $('#txtguz');
var txtadtype = $('#txtadtype');
//执行重载
table.reload('testReload', {
page: {
curr: //重新从第 1 页开始
}
, where: {
txtguz: txtguz.val(),
txtadtype: txtadtype.val()
}
});
}
,
getCheckLength: function () { //一键申请
var uIDs = "";
if (chooseAdids.length <= ) {
layer.msg('请先选择要匹配的产品')
return;
}
else {
layer.confirm('确定匹配这些产品吗?', function (index) {
for (var i = ; i < chooseAdids.length; i++) {
uIDs += chooseAdids[i] + ",";
}
doOk(uIDs.substring(, uIDs.length - )); //将选中的产品id传到父页面显示出来
});
}
} }; $('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
}); function doOk(ids) {
parent.ChooseAdidValues(ids); //将选中的产品id传给父页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index); //关闭当前子页面
}

父页面:

解决layui选中项下一页清空问题的更多相关文章

  1. 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。

    getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...

  2. select2 清除选中项解决办法

    在项目中使用select2:选中项 设置可清除. 代码中加上了allowClear : true $.get("/Work/Ajax/Select.ashx", function ...

  3. 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js

    <script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...

  4. Session变量不能传送到下一页.解决: session.use_trans_sid = 1

    转自:http://blog.csdn.net/drylandfish/article/details/244085 附:文摘===================================== ...

  5. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  6. 解决layui下拉选择框只能选择不能手动输入文字

    审查元素可以看到,layui的select下拉框是用input和div模拟出来的,所以,如下例子,我的解决方法是:$('.mySelect').find('input').removeAttr(&qu ...

  7. ASP.NET MVC中使用MvcPager异步分页+在分页中复选框下一页上一页也保持选中

    ASP.NET MVC 分页使用的是作者杨涛的MvcPager分页控件  地址:http://www.webdiyer.com/mvcpager/demos/ajaxpaging/ 这个分页控件在里面 ...

  8. jquery 如何获取select 选中项的下一个选项的值

    <select> <option value="1" selected="selected">a</option> < ...

  9. jsp页面关建字查询出记录后,点下一页关键字会清空,怎么保持关键字不变而进行下一页操作?

    解决方案一: 1 把关键字带回后台,从后台再次传入! 2 把关键字传入cookie,从cookie获取 3 把表格一栏放在iframe中,搜索时,刷新iframe即可 解决方案二: 用2个div分开就 ...

随机推荐

  1. python代码块和小数据池

    id和is 在介绍代码块之前,先介绍两个方法:id和is,来看一段代码 # name = "Rose" # name1 = "Rose" # print(id( ...

  2. java操作数据库:增删改查

    不多bb了直接上. 工具:myeclipse 2016,mysql 5.7 目的:java操作数据库增删改查商品信息 test数据库的goods表 gid主键,自增 1.实体类Goods:封装数据库数 ...

  3. 如何使用Cygwin在Windows上运行OpenSSH SSHD服务器

    记录几款非常有趣, 但不怎么耳熟的软件: Cygwin 是可以安装 OpenSSH server 和 client 的, Mosh 也可以, 这对于 Linux 用户而言就非常方便了. 如何使用Cyg ...

  4. aspx页面控件id上自动加前缀

    公司的一个.net项目,使用的传统aspx页面开发,每个控件上自动加了前缀,最初以为是extjs.net自带的功能,后来研究发现,主要是因为内部使用了母版页.<asp:Content ID=&q ...

  5. String类中的常用方法

    String类 一.转换成String方法 1.public String(); 空参构造 初始化一个新创建的 String 对象,使其表示一个空字符序列 2.public String(byte[] ...

  6. docker 容器内启动 sshd 启动报错

    创建容器设置密码 安装 openssh-server 启动出错 在容器内 使用 /usr/sbin/sshd -d 启动报错? [root@9d41c7f36c5e tmp]# /usr/sbin/s ...

  7. pyqt5-控件是否可用

    setEnabled(bool)      设置控件是否可用 True  可用 isEnabled()      获取控件是否可用 s=button.isEnabled()

  8. Ubuntu安装MongoDB

    一.下载安装 首先,更新软件包列表以获取最新版本的存储库列表: sudo apt update 2.接着安装MongoDB包本身: sudo apt install -y mongodb ×加-y是为 ...

  9. 在Github和oschina上搭建自己的博客网站

    在Github上搭建 - 参考链接 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 GitHub + Jekyll 搭建并美化个人网站 用Jekyll搭建的Git ...

  10. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...