在JS中使用layui复选框根据个人判断所拥有的权限

只要数据库中有个人所持有的权限关系，则根据个人id和权限的id关系，可以控制复选框的选中。以下为权限关系是表格形式的：

注意：在js写完代码，执行事件的时候，有时候会出现页面加载完后，第一次点击事件会生效，第二次以后点击事件就不生效的情况，这时候要把.attr("check",true)换成.prop("check",true)就可以了。

layui.use(['form'], function() {

var form = layui.form;
form.on('checkbox(selsLeft)', function(data) {
    if(data.elem.checked) {
    $(':checkbox[name="selsLeft"]').attr("checked", false);
    $(this).attr("checked", true);
    //清除第一次选择后的复选框选中状态
    $("input:checkbox[name='selsRight']").attr("checked", false);
    var id = $(this).val();
    showPosition(id);
    }else{
        $("input:checkbox[name='selsRight']").attr("checked", false);
    }
    layui.use(['form'], function() {
        var form = layui.form;
        form.render(); // 更新全部
    });
   });
});

function showPosition(idu){
    $.ajax({
        type:"post",
        url:basePath + '/aaa/bbb',
        async:false,
        data:{
            "id":idu,
        },
    success:function(data){
        var data = eval("(" + data + ")");
        for(var i=0;i<data.length;i++){
            var idp=data[i];
            $("input:checkbox[value="+idp+"][name='selsRight']").attr('checked','true');
           }
        }
    });

}

以下权限关系为树状形式的：

html中代码：

<div id="main" class="layui-form">
<div class="mainDivLeft layui-form" style="width: 39.9%;">
<table class="layui-table padings" lay-even="">
<thead>
<tr>
<th><input type="checkbox" id="selTot" lay-filter="sel" lay-skin="primary" /></th>
<th>序号</th>
<th>角色名</th>
<th>备注</th>
<th>更新时间</th>
</tr>
</thead>
<tbody id="view">
</tbody>
</table>
<table class="layui-table" id="pagesplit">
</table>
</div>
<div class="mainDivRight " style="width: 60%;">
<div class="layui-form">
<table id="treeMenu" class="layui-table">
</table>
</div>
</div>

js中代码如下；

$(function() {
layui.use(['form'], function() {
var form = layui.form;
form.on('checkbox(selsLeft)', function(data) {
if(data.elem.checked == true) {
//选择系统管理员的时候为单选
$(':checkbox[name="selLeft"]').attr("checked", false);
$(':checkbox[name="selLeft"]').removeClass("layui-form-checked");
$(this).prop("checked", true);
form.render();//渲染刷新
var id = $(this).val();
showPosition(id);
} else {
$("input:checkbox[name='box']").attr("checked", false);
form.render();
}
layui.use(['form', 'element'], function() {
var form = layui.form;
form.render();
});
});
});
function showPosition(idu) {
$.ajax({
type: "post",
url: basePath + '/aa/bb',     //在关系表中，根据个人id获得对应权限
async: false,
data: {
"id": idu,
"token": token
},
success: function(data) {
var data = eval("(" + data + ")");
console.log(data);//data为关于id的数组
//使用两个for循环，即循环DOM，又循环权限的数据
$("#treeMenu").find("tr").each(function(){
var a = $(this).closest("tr").attr("data-tt-id");
for(var i = 0; i < data.length; i++) {
var idp = data[i];

if(idp == a) {

$(this).find("input:checkbox[name='box']").attr('checked', 'true');
}
}
})
layui.use(['form', 'element'], function() {
var form = layui.form;
form.render();
});
}
});
}
})