专栏首页Java研发军团【学习笔记】解决layui的table分页没有checkbox记忆功能!!!

【学习笔记】解决layui的table分页没有checkbox记忆功能!!!

引言

layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,非常适合界面的快速开发。

官网地址:https://www.layui.com/doc/,使用方法可以直接参照即可。

今天小编也使用了下,并且遇到了一些问题,最为恼火的就是选中记忆功能,这框架既然没有,但是也不是不能解决,今天就来聊聊这个table分页checkbox没有记忆功能解决办法。

html代码

其实只需要一个2个标签即可,看代码

<form class="layui-fluid layui-form">
  <table id="sale-data" lay-filter="sale-data"></table>
</form>

js代码

由于我还是用到了vue框架,为了更好的使用layui我还创建了一个layui-config.js文件

var element,$,layer,laydate,laypage,table,form;
layui.use(['element','jquery','layer','laydate','laypage','table'], function () {
        element = layui.element;
        $ = layui.$;
        layer = layui.layer;
        laydate = layui.laydate;
        laypage = layui.laypage;
        table = layui.table;
        form = layui.form;

        //阻止from表单默认行为
        form.on('submit(*)', function (data) {
            return false;
        });

        //初始化动态元素,一些动态生成的元素如果不设置初始化,将不会有默认的动态效果
        element.init();
    });

另外创建了一个业务处理的js文件,handle.js文件,以下主要贴上table处理的代码

//记录当前页数据的临时变量
var cookiePageArray = [];

var saleInfoCols = [[ //表头
    {
        type: 'checkbox', fixed: 'left',LAY_CHECKED : false, filter : 'checkboxid'
    },
    {
        field: 'realName',
        title: '病人姓名',
        sort: true
    },
    {
        field: 'combinationItemName',
        title: '项目名称',
    },
    {
        field: 'noteTime',
        title: '实际录入时间',
    },
    {
        field: 'price',
        title: '项目价格',
    },
    {
        field: 'discount',
        title: '折扣',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    },
    {
        field: 'reportTime',
        title: '出报告时间',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    },
    {
        field: 'invoiceTime',
        title: '开票日期',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    },
    {
        field: 'realPrice',
        title: '实收金额',
        sort: true//允许排序
        ,edit: 'text'//允许编辑
    }
    ,{fixed: 'right', title:'操作', toolbar: '#sale-data-bar', width:80}
]];

//存储已选择数据集,用普通变量存储也行,就是一个缓存变量
layui.data('checked', null);
//第一个实例
var mytbl = table.render({
    elem: '#sale-data',
    id : 'jzbbxh',//checkbox取值使用的
    title : "列表",
    skin: 'row', //行边框风格
    method : 'get',
    even: true, //开启隔行背景
    height: 'full-185',//满屏
    url: '/lis/searchSaleinfoData', //数据接口 controller
    page: true, //开启分页
    limit : 13,//每页多少行
    limits : [13,30,90],//分页条目
    loading : true,//显示加载条
    where : {},//这里是传参,我这里没有参数
    text: {
        none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
    },
    cols: saleInfoCols,//绑定的列表头部
    done:function(res,curr,count){
        //.假设你的表格指定的 id="sale-data",找到框架渲染的表格
        var tbl = $('#sale-data').next('.layui-table-view');
        //记下当前页数据,Ajax 请求的数据集,对应你后端返回的数据字段
        cookiePageArray = res.data;
        //记录当前也选中的chechbox个数(判断全选使用的)
        var len = 0;
        //遍历当前页数据,对比已选中项中的 id
        for (var index = 0; index < cookiePageArray.length; index++) {
            if (layui.data('checked', cookiePageArray[index]['jzbbxh'])) {
                //逐个判断是否选中,如果已经选中就改变选中模式
                var i = cookiePageArray[index]['LAY_TABLE_INDEX'];
                var checkbox = $('.layui-table tr[data-index=' + i + '] input[type="checkbox"]');
                checkbox.prop('checked', true);
                checkbox.next().addClass('layui-form-checked');
                //为了设置全选的
                len++;
            }
        }

        console.log(this.limit+"====="+len)
        //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
        if(len === this.limit){
            var checkboxAll = $('.layui-table-header th[data-field=0] input[type="checkbox"]');
            checkboxAll.prop('checked', true);
            checkboxAll.next().addClass('layui-form-checked');
        }

        //暂时只能这样渲染表单
        form.render('checkbox');
    }
});
/**
 * 复选框的点击事件
 * 主要操作为:
 * 将所有的勾选成功的id储存传入后台拉取数据存到本地销售数据库
 */
table.on('checkbox(sale-data)', function(obj){
   //console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
    //全选或单选数据集不一样
    var data = 'one' === obj.type  ? [obj.data] : cookiePageArray;
    //遍历数据
    $.each(data, function(index, item) {
        //假设你数据中 id 是唯一关键字
        if (obj.checked) {
            //.增加已选中项
            layui.data('checked', {
                key: item.jzbbxh, value: item
            });
        } else {
            //.删除
            layui.data('checked', {
                key: item.jzbbxh, remove: true
            });
        }
    });
    console.log(layui.data('checked'));
});

问题

由于layui没有自己的记忆功能,所以需要自己来实现,我们先来看看layui给我们checkbox生成的代码吧

未勾选生成的代码:

<div class="layui-table-cell laytable-cell-2-0-0 laytable-cell-checkbox">
  <input type="checkbox" name="layTableCheckbox" lay-skin="primary">
  <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
    <i class="layui-icon layui-icon-ok"></i>
  </div>
</div>

已勾选生成的代码:

<div class="layui-table-cell laytable-cell-2-0-0 laytable-cell-checkbox">
  <input type="checkbox" name="layTableCheckbox" lay-skin="primary">
  <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
    <i class="layui-icon layui-icon-ok"></i>
  </div>
</div>

以上2段代码大家可以看出来问题了。大家不要认为将div的class上添加一个layui-form-checked就可以了,这样是不行的。

我们来看看如何解决checkbox选中记忆的。需要将input的类型为checkbox的checkbox.prop('checked', true);并且还需要将下一个兄弟节点的div添加一个类名为:layui-form-checked的,这样才能选中。那么说道这里问题就解决了,其实并不是。

由于我的limit是每页显示13行,也就是说按道理每页不算上全选按钮应该只有13个checkbox,后来我使用以下代码打印出来是26个checkbox。

var checkboxs = $('.layui-table-view tbody input[type="checkbox"]');
 checkboxs .each(function(index, item){
       console.log(item);
});

那么这个时候问题就出来了,每个checkbox都是一对一对的一模一样的,最主要行的索引data-index是一样的,只是在不同table中,这个时候我们只需要根据临时勾选的数据保存到缓存中。

然后翻页的时候再根据循环缓存数据与当前页的数据一个个匹配,匹配成功之后,将将当前的页的索引拿到,然后拼接成$('.layui-table tr[data-index=' + i + '] input[type="checkbox"]');

这样就可以找到成对的checkbox了,然后改变值,最后再将它的兄弟节点的div增加一个layui-form-checked,这样就可以成对的改变值了。这样就有了记忆功能了,不过还是有一点点小麻烦。

总结

layui这个前端框架,对于前端不太熟悉的开发人员使用起来还是比较方便快速的。它的主要好处就是可以快速的搭建一个后台系统出来,不过不好的就是,很多模板要花钱,在一个就是他的一些插件并不是完美,需要自己动手再次封装。不过开放出来的免费的东西就这样了,将就使用还是不错的。

本文分享自微信公众号 - Java研发军团(ityuancheng),作者:dcc939705214

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个高频面试题:怎么保证缓存与数据库的双写一致性?

    来源:https://blog.csdn.net/chang384915878/article/details/86756463

    用户5224393
  • 最全Java成神学习路线总结!!!

    1)每本书每个人的思路不一样,哪怕有不好的地方,一定要坚持按照一种思路去学习,不要半路换,不然很容易失去乐趣或者放弃。

    用户5224393
  • sql语句总结,大家可以收藏了面试一定有用!!!

    原文:https://blog.csdn.net/u012562943/article/details/50432733

    用户5224393
  • DX-watermark插件无法预览及上传图片报imagesx()错误的解决办法

    本文重新更新编辑于:2014 年 6 月 8 日 0 时 40 分. 这篇文章还是在 2014 年 2 月 12 日发布的,旧标题为:《不明问题让我折腾了一天!...

    张戈
  • 使用预先训练好的单词向量识别影评的正负能量

    上一节我们讨论路单词向量化的算法原理。算法的实现需要有大量的数据,一般而言你要收集到单词量在四十亿左右的文本数据才能通过上一节的算法训练处精准的单词向量,问题在...

    望月从良
  • 队列的动态链式存储实现—C语言

    汐楓
  • C++多线程-预防死锁

    预防死锁的注意事项: (1)在编写多线程程序之前,首先编写正确的程序,然后再移植到多线程 (2)时刻检查自己写的程序有没有在跳出时忘记释放锁 (3)如果自...

    cwl_java
  • SouapUI接口测试之创建mock service服务模拟

    当我们的接口完成而服务端还没完成的时候,我们就可以用mock service来替代服务端进行接口测试,mock service就是服务模拟。

    用户6367961
  • 从根上理解为什么说索引的离散型越高越好?

    昨天的那篇文章中,我留了一个问题:“为什么说索引的离散型越高越好?”今天我们就一起从根上理解它!

    业余草
  • 它们的屠城史–木马技术发展趋势与回顾

    新的学期开始了,某大学网络管理专业三年级的同学们显得特别兴奋,这个学期的课程安排里终于出现了“网络安全”课程,一直对安全技术甚至黑客攻防手段感兴趣的同学更是对这...

    HACK学习

扫码关注云+社区

领取腾讯云代金券