Layui自定义列表多选

需求:已回访不需要分配,未回访的可多选分配

效果图:

实现方式

1,自定义复选

2,已回访的框去掉

3,自己写全选方法

注意:要想进方法一定要写lay-filter,才能触发方法!

代码如下:

javascript 复制代码
{templet: "#checked_input", title: "<input type='checkbox' name='checkAll' title='' lay-skin='primary' lay-filter='checkAll'> ", width: 50},

<script type="text/html" id="checked_input">
    {{#  if (d.status != '1'){ }}
        <input type="checkbox" name="checkOne" lay-skin="primary" lay-filter="checkOne" data-id = "{{ d.id }}">
    {{#  } }}
</script>

// 全选/全不选
form.on("checkbox(checkAll)", function (data) {
    let elem = data.elem;
    $("input[name='checkOne']").prop("checked", elem.checked);
    form.render();
    getCheckedId();
});

// 取消一条数据则全选去掉
form.on('checkbox(checkOne)', function(data){
    if ($("input[name='checkOne']").not('input:checked').length) {
        $('[name="checkAll"]').prop("checked", false);
    } else {
        $('[name="checkAll"]').prop("checked", true);
    }
    form.render();
    getCheckedId();
});

// 获取选中的数据
function getCheckedId(){
    let checkedId = [];
    $("input[name='checkOne']").each(function(k, v){
        if ($(v).is(':checked')) {
            checkedId.push($(v).attr('data-id'));
        }
    })
    return checkedId;
}
相关推荐
鹿心肺语9 分钟前
前端HTML转PDF的两种主流方案深度解析
前端·javascript
海石28 分钟前
去到比北方更北的地方—2025年终总结
前端·ai编程·年终总结
一个懒人懒人35 分钟前
Promise async/await与fetch的概念
前端·javascript·html
Mintopia41 分钟前
Web 安全与反编译源码下的权限设计:构筑前后端一致的防护体系
前端·安全
输出输入43 分钟前
前端核心技术
开发语言·前端
Mintopia1 小时前
Web 安全与反编译源码下的权限设计:构建前后端一体的信任防线
前端·安全·编译原理
林深现海1 小时前
Jetson Orin nano/nx刷机后无法打开chrome/firefox浏览器
前端·chrome·firefox
黄诂多1 小时前
APP原生与H5互调Bridge技术原理及基础使用
前端
前端市界1 小时前
用 React 手搓一个 3D 翻页书籍组件,呼吸海浪式翻页,交互体验带感!
前端·架构·github
文艺理科生1 小时前
Nginx 路径映射深度解析:从本地开发到生产交付的底层哲学
前端·后端·架构