layui监听复选框checkbox选中以及分页选中处理方式

 更新时间:2025年04月01日 15:42:51   作者:hexu_blog  
这篇文章主要介绍了layui监听复选框checkbox选中以及分页选中处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

layui监听复选框checkbox选中及分页选中处理

具体实现代码如下:

需要关注三个位置

  • done表格加载完毕方法
  • cols中复选框栏定义
  • table.on中对复选框选中或取消的状态定义

这三个地方的代码直接复制去用就行了

最终选中的数据id为:ids

<script>
 
    layui.use(['table', 'form', 'upload','laydate'], function () {
 
        // 设置全局变量以保存选中行信息(仅需要id的话在你的业务位置调用ids即可,数据格式是int数组)
        let ids = new Array();
 
        // 存储所有选中的数据(需要行内全量数据在你的业务位置调用lists即可,数据格式是对象集合)
        var lists = new Array();
 
        // 保存当前页全部数据id,点击全选时使用
        let tableIds = new Array();
 
        //第一个实例
        table.render({
            elem: '#currentTableId'
            , method: "post"
            , dataType: "Json"
            , id: 'layuiReload'
            , url: '/page/severalquality/getshipPlan' //数据接口
            , toolbar: '#toolbarTem'
            , page: true //开启分页
            , done: function (res, curr, count) {
 
                // 设置当前页全部数据id到全局变量
                tableIds = res.data.map(function (value) {
                    return value.id;
                });
                // 设置当前页选中项
                $.each(res.data, function (idx, val) {
                    if (ids.indexOf(val.id) > -1) {
                        val["LAY_CHECKED"] = 'true';
                        //找到对应数据改变勾选样式,呈现出选中效果
                        let index = val['LAY_TABLE_INDEX'];
                        $('tr[data-index=' + index + '] input[type="checkbox"]').click();
                        form.render('checkbox'); //刷新checkbox选择框渲染
                    }
                });
                // 获取表格勾选状态,全选中时设置全选框选中
                let checkStatus = table.checkStatus('test');
                if (checkStatus.isAll) {
                    $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                    form.render('checkbox'); //刷新checkbox选择框渲染
                }
 
            }
            , cols: [[ //表头
                { field: 'id', title: '数据编号', sort: true, hide: true }
                , { field: 'id', sort: true, type: 'checkbox' }//在此声明表格复选框
                , { field: 'DataNumber', align: 'center', title: '序号', width: 60, type: 'numbers' }
                , { field: 'shiptitle', align: 'center', title: '船名' }
                , { field: 'carrierstitle', align: 'center', title: '承运商' }
                , { field: 'startPortName', align: 'center', title: '始发港' }
                , { field: 'destPortName', align: 'center', title: '到港' }
                , { field: 'arrivalTime', align: 'center', title: '运达时间' }
                , { field: 'shipmentTon', align: 'center', title: '装油量' }
                , { field: 'realTon', align: 'center', title: '卸油量' }
                , {
                    field: 'superConsumption', align: 'center', title: '是否超耗索赔', hide: true, templet: function (res) {
                        if (res.superConsumption == true) {
                            return "是";
                        } else {
                            return "否";
                        }
                    }
                }
                , { field: 'claimSum', align: 'center', title: '索赔量' }
                , { field: 'practicalprice', align: 'center', title: '实际索赔金额' }
                , { field: 'claimcompensationInfostateName', align: 'center', title: '索赔状态' }
                , { field: 'auditremark', align: 'center', title: '审核备注', hide: true }
            ]]
        });
 
 
        //使用on监听checkbox选中状态并进行处理(tableFilter为table的lay-filter值)
        table.on('checkbox(tableFilter)', function (obj) {
 
            if (obj.checked == true) {
                if (obj.type == 'one') {
                    ids.push(obj.data.id);
                    lists.push(obj.data);
 
                } else {
                    for (let i = 0; i < tableIds.length; i++) {
                        //当全选之前选中了部分行进行判断,避免重复
                        if (ids.indexOf(tableIds[i]) == -1) {
                            ids.push(tableIds[i]);
                            var checkStatus = table.checkStatus('layuiReload'); //layuiReload 为table声明的id
                            lists.push(checkStatus.data[i]);
                        }
                    }
                }
            } else {
                if (obj.type == 'one') {
                    let i = ids.length;
                    while (i--) {
                        if (ids[i] == obj.data.id) {
                            ids.splice(i, 1);
                            lists.splice(i, 1);
                        }
                    }
                } else {
                    let i = ids.length;
                    while (i--) {
                        if (tableIds.indexOf(ids[i]) != -1) {
                            ids.splice(i, 1);
                            lists.splice(i, 1);
                        }
                    }
                }
            }
        });
 
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用plupload自定义参数实现多文件上传

    使用plupload自定义参数实现多文件上传

    这篇文章主要介绍了使用plupload自定义参数实现多文件上传的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JS中实现隐藏部分姓名或者电话号码的代码

    JS中实现隐藏部分姓名或者电话号码的代码

    最近做了小项目,项目需要只显示用户的姓名和手机号开头跟结尾,其他部分用*号代替,下面小编给大家分享一段简单的代码,需要的朋友跟随脚本之家小编一起看看吧
    2018-07-07
  • open 动态修改img的onclick事件示例代码

    open 动态修改img的onclick事件示例代码

    动态修改img的onclick事件,使用open也可轻松做到,下面有个不错的示例,需要的朋友可以参考下
    2013-11-11
  • 关于js陀螺仪的理解分析

    关于js陀螺仪的理解分析

    这篇文章主要给大家介绍了关于js陀螺仪的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • iframe父页面获取子页面参数的方法

    iframe父页面获取子页面参数的方法

    这篇文章主要介绍了iframe父页面获取子页面参数的方法,需要的朋友可以参考下
    2014-02-02
  • 由浅到深了解JavaScript类

    由浅到深了解JavaScript类

    由浅到深了解JavaScript类...
    2007-01-01
  • 一起来写段JS drag拖动代码

    一起来写段JS drag拖动代码

    记得几年前刚接触前端的时候,觉得能在网页上拖移元素是一件很爽的事,能写一段这样的代码是件很了不起的事情,于是乎google,baidu蛮多代码来学习,大致明白了思路,总结如下
    2010-12-12
  • JavaScript操作localStorage实现保存本地json文件

    JavaScript操作localStorage实现保存本地json文件

    这篇文章主要为大家详细介绍了JavaScript如何操作localStorage实现保存本地json文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 惰性函数定义模式 使用方法

    惰性函数定义模式 使用方法

    惰性函数定义模式 使用方法...
    2007-09-09
  • 使用jscript实现二进制读写脚本代码

    使用jscript实现二进制读写脚本代码

    Reading And Writing Binary Files Using JScript正如我刚才推什么我能做的JScript中,我想出了对问题的二进制文件。以下级的解决,这为小到中等大小的文件。我的部分包括这个职位在这里,因为我即将付诸表决,在一个职位约发送带有附件的电邮通过JScript和它会使用这个二进制文件码来读取,在二进制附件档案。
    2008-06-06

最新评论