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;
}
相关推荐
克里斯蒂亚诺更新1 分钟前
ruoyi切换新版本初始化需要修改的地方
前端·javascript·vue.js
可视之道2 分钟前
基于Meta2d.js的电力系统组态平台实战开发
前端
小村儿23 分钟前
(译文)重温:Karpathy 的 4 条 CLAUDE.md 规则将 Claude 错误率从 41% 降至 11%——历经 30 个代码库后,我又加了 8 条
前端·后端·ai编程
前端那点事25 分钟前
Vite+Vue3环境判断终极解法!区分开发/生产环境,告别环境报错
前端·vue.js
源码集结号27 分钟前
基于 Spring Boot + JPA + MySQL的上门家政系统代码示例
java·前端·后端
爱喝铁观音的谷力景辉30 分钟前
web端实现音频波形分析以及音频截取
前端
前端那点事35 分钟前
别再乱用Vue3路由!useRoute/useRouter传参、跳转、避坑最全实战指南
前端
zithern_juejin42 分钟前
JS的防抖与节流
javascript
candyTong1 小时前
如何写一个可以进化的前端系统验收 SKILL
javascript
LIO1 小时前
深度解析 localStorage 与 sessionStorage:用法、区别与最佳实践
前端