在一个table里动态显示多个复选框
数据:
{
“count”: 1000,
“code”: 0,
“msg”: “”,
“data”: [
{
“menuCode”: “customer”,
“menuName”: “客户列表”,
“permissions”: [
{
“permissionId”: “1”,
“permissionName”: “客户查询”
},
{
“permissionId”: “2”,
“permissionName”: “查看客户详情”
},
{
“permissionId”: “3”,
“permissionName”: “客户锁定”
}
]
},
{
“menuCode”: “production”,
“menuName”: “生产列表”,
“permissions”: [
{
“permissionId”: “4”,
“permissionName”: “生产锁定”
},
{
“permissionId”: “5”,
“permissionName”: “生产读写”
}
]
}
]
}
效果:
代码:
// 弹窗
<form class="layui-form" id="permission" style="display:none">
<table class="layui-hide" id="permissionTable" lay-filter="layTable"></table>
</form>
// js
table.on('tool(layTable)', function(obj){
if (layEvent === 'update'){
table.render({
elem:'#permissionTable',
url:"http://localhost:8080/permission",
height:600,
width:1000,
title:'权限表',
totalRow:true,
page:false,
parseData:function (res) {
if(res.data == "[]"){
//显示无数据提示内容
return {
"code": 201, //解析接口状态
"msg": '无数据' //解析提示文本
};
}
return{
"code":0,
"msg":"",
"count":res.data.total,
"data":res.data
}
},
cols: [[
{field:'menuName',title:'权限名',width:100},
{field:'permissions',title:'权限',templet:function (d) {
var data="";
for (var i=0;i<d.permissions.length;i++){
console.log(d.permissions[i])
data=data+'<input type="checkbox" name="permission" value="'+d.permissions[i].permissionId+'" title="'+d.permissions[i].permissionName+'">';
}
return data;
}}
]]
})
layer.open({
type:1,
area:['900px','600px'],
title: '权限'
,content: $("#permission"),
shade: 0,
btn: ['提交', '重置'],
cancel: function(layero,index){
layer.closeAll();
}
});
}
}
版权声明:本文为yvonne__my原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。