解决layui动态加载复选框无法选中

最新推荐文章于 2023-04-29 10:53:09 发布

原创最新推荐文章于 2023-04-29 10:53:09 发布 · 2.6w 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#layui #checkbox

前端专栏收录该内容

29 篇文章

订阅专栏

在使用layui构建后台界面时，遇到动态加载的checkbox选中问题，特别是涉及ajax数据、分页和页面加载速度时。通过layui的更新渲染方法和其他网络解决方案虽有改善，但在暴力测试下仍有偶尔无法选中的情况。为解决此问题，选择自定义复选框组件，该组件支持Vue绑定事件，能实现单选、全选、取消选中，并能获取选中项的id用于后续操作。

问题描述

1.最近用layui做后台界面，遇到layui跟ajax数据动态加载的checkbox，偶尔不能正常勾选，取消

2.有分页时，最后一页数据过少会导致其他页下方数据无法选中

3.页面没加载完或暴力测试时也会不能选中

利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况，但是暴力测试时偶尔还会出现，实在不知道什么原因，所以就用了一个折中的方法——自己写一个复选框

<!--原有layui复选框-->
<td>
    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
</td>
<!--替换为自己写的-->
<td>
    <div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)">
        <div></div>
    </div>
</td>

自己写的同样支持vue绑定事件，并且支持单个选中、取消，全选和取消

//单个的选中取消

checkBox:function(n){
    var checkbox = $('tbody tr').eq(n).find('.checkBox');
    if (checkbox.attr("a") == "off") {
        checkbox.children("div").css({
            "display" : "block"
        });
        checkbox.attr("a","on");
    }else {
        checkbox.children("div").css({
            "display" : "none"
        });
        checkbox.attr("a","off");
    }
}

//全选取消

checkBoxAll:function(){
    var obj = $('thead').find('.checkBox');
    if ($(obj).attr("a") == "off") {
        $('.checkBox div').css({"display" : "block"});
        $('.checkBox').attr("a","on");
    }else {
        $('.checkBox div').css({"display" : "none"});
        $('.checkBox').attr("a","off");
    }
}

全选或者选中其中几个，获取对应id，删除或进行其他操作

function getId() {
    var obj = $("tbody .checkBox");
    var arr='';
    obj.each(function(index, el) {
        if(obj.eq(index).attr("a") == "on"){
            arr += obj.eq(index).attr('data-id')+ ','
        }
    });
    return arr;
}