1、引入Layui相关资料(参照官方文档，非常简单，这里就不重复讲了)
2、定义LayuiDatagrid相关信息
<script type="text/javascript">
var table = "";
var roleId = '${roleId}';//获取选中角色的角色编码
//定义一个数组记录选中的数据:做缓存使用,作为参数传递给后台
var ids2 = [];
layui.use ([
'form', 'layedit', 'laydate', 'table'
], function ()
{
table = layui.table;
var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
layer.config (
{
skin : 'layer-modal-class'
});
table.render (
{
even : true,
elem : '#dataGrid',
toolbar : '#toolbarDemo',
url : "${contextPath}/perm/findTPermissionsDataGridByRoleId", //请求后台的URL（*）
id : 'dataGrid',
where :
{
sort : 'czrq',
order : 'desc',
roleId : roleId
}, //设定异步数据接口的额外参数
cols : [
[
{
type : 'checkbox',
fixed : 'left'
},
{
field : 'name',
title : '权限名称',
width : 200,
fixed : 'left'
},
{
field : 'url',
title : '权限地址',
width : 250,
nowrap : false
},
{
field : 'permissionsTypeName',
title : '权限类型',
width : 100
},
{
field : 'jlztDis',
title : '权限状态',
width : 100
}
]
],
page : false,
height : '400',
done : function (res, curr, count)
{
if (count > 0)
{
$.each (res.data, function (index, item)
{
if (item.checked == 1)
{
ids2.push (item.id);//将选中的数据保存到数组中
var index = item['LAY_TABLE_INDEX'];
$ ('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop ('checked', true);
$ ('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next ().addClass ('layui-form-checked');
}
});
console.log (ids2);
}
}
});
//复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
table.on ('checkbox(dataGrid)', function (obj)
{
if (obj.checked == 1)
{
ids2.push (obj.data.id);
}
else
{
var index = ids2.indexOf (obj.data.id);
if (index > -1)
{
ids2.splice (index, 1);
}
}
});
table.on ('sort(dataGrid)', function (obj)
{ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
table.reload ('dataGrid',
{
initSort : obj,
where :
{
sort : obj.field,
order : obj.type
}
});
});
});
//保存授权信息
function saveFun ()
{
$.ajax (
{
url : "${pageContext.request.contextPath}/perm/grantPermissionToRole",
type : "post",
dataType : "json",
data :
{
'roleId' : roleId,
'permissionIds' : ids2.join (',')
},
success : function (result)
{
if (result.success == true)
{
closeThisFrame ("授权成功", parent.layer.getFrameIndex (window.name))
}
else
{
swal (result.err, "", "error");
}
},
error : function (XMLHttpRequest, textStatus, errorThrown)
{
swal ("授权失败", "", "error");
}
});
}
</script>
<!--表格工具栏-->>
<script type="text/html" id="toolbarDemo">
<shiro:hasPermission name="perm:grantPermission">
<button class="layui-btn layui-btn-normal layui-btn-sm" οnclick="saveFun()">保存授权信息</button>
</shiro:hasPermission>
</script>
3、编写HTML
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
style="margin: 0px; padding: 0px">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins" style="margin-top: 0px">
<div class="ibox-content table-content">
<div class="row table-row">
<table id="dataGrid" class="layui-table" lay-filter="dataGrid"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
3857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
