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;
}
相关推荐
我爱学习_zwj32 分钟前
深入浅出Node.js-1(node.js入门)
前端·webpack·node.js
疯狂的沙粒1 小时前
前端开发 vue 中如何实现 u-form 多个form表单同时校验
javascript·vue.js·ecmascript
IT 前端 张1 小时前
2025 最新前端高频率面试题--Vue篇
前端·javascript·vue.js
喵喵酱仔__1 小时前
vue3探索——使用ref与$parent实现父子组件间通信
前端·javascript·vue.js
_NIXIAKF1 小时前
vue中 输入框输入回车后触发搜索(搜索按钮触发页面刷新问题)
前端·javascript·vue.js
InnovatorX1 小时前
Vue 3 详解
前端·javascript·vue.js
布兰妮甜1 小时前
html + css 顶部滚动通知栏示例
前端·css·html
种麦南山下1 小时前
vue el table 不出滚动条样式显示 is_scrolling-none,如何修改?
前端·javascript·vue.js
天弈初心1 小时前
Vue 组件开发:构建高效可复用的 UI 构建块
javascript·vue.js
杨荧2 小时前
【开源免费】基于Vue和SpringBoot的贸易行业crm系统(附论文)
前端·javascript·jvm·vue.js·spring boot·spring cloud·开源