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;
}
相关推荐
用户550849290256几秒前
前端本地存储怎么选:Cookie、localStorage、sessionStorage、IndexedDB 的取舍
前端
用户550849290256几秒前
Git 日常命令与分支协作流程:从提交到合并的实战梳理
前端
修炼的dance1 分钟前
同一段视频没降画质为什么就快了
前端
asong24 分钟前
从写代码到部署上线,Cloudflare 给 AI 配了一把新钥匙
前端·javascript·后端
用户53723128824637 分钟前
你的 WGSL 从未被执行过——一个 secure context 静默陷阱的排查实录
前端
Daniel_1231 小时前
轻量级站点监控面板 LightPing 开源啦
前端·后端·github
想风1 小时前
A/B 测试怎么做?独立站转化率优化的完整实操步骤
前端·后端·github
lerhxx1 小时前
从 Markdown 到生成式 UI:AI 应用中的流式渲染实践
前端·javascript
迅猛龙办公室1 小时前
python实现简单进度条
java·前端·python
Rosanci1 小时前
Codex 下载与本地部署实战:从安装到运行全流程指南
开发语言·前端·算法·chatgpt·codex