在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             var idp=data[i];
            $("input:checkbox[value="+idp+"][name='selsRight']").attr('checked','true');
           }
        }
    });

}

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

在JS中使用layui复选框根据个人判断所拥有的权限_第1张图片

html中代码:















序号角色名备注更新时间










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();
});
}
});
}
})

你可能感兴趣的:(前端框架,权限,layui)