Layui 动态在table里添加多个复选框

在一个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版权协议,转载请附上原文出处链接和本声明。