layui实现树菜单
页面HTML
<div class="layui-fluid">
<div class="layui-card">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置角色菜单按钮</legend>
</fieldset>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">设置权限</button>
<button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">重置</button>
<button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">清空勾选</button>
</div>
<div id="test12" class="demo-tree-more"></div>
</div>
</div>
js
var treeData = new Array(); //树数据
var dataIntArr = [];//保存转换后的整型字符串
$.ajax({
type: "post",
url: "/",
datatype: "json",
data: {
id: id
}
, success: function (succ) {
if (succ.code == "1") {
//把所有菜单的数据设置给treeData
treeData = succ.data.treeData;
//拿到用户拥有的菜单
var checkStr = succ.data.checkData;
if (checkStr == "" || checkStr == undefined || checkStr == null ||
(checkStr.length > 0 && checkStr.trim().length == 0)) {
} else {
var dataStrArr = checkStr.split(","); //分割成字符串数组
dataIntArr = dataStrArr.map(function (i) {
return Number(i)
});
}
//渲染页面dom
tree.render({
elem: '#test12'
, data: treeData //整个菜单树数据
, showCheckbox: true //是否显示复选框
, id: 'demoId1' //设置id
, isJump: false //是否允许点击节点时弹出新窗口跳转
});
//设置用户有的菜单选项
tree.setChecked('demoId1', dataIntArr);
} else if (succ.code == "0") {
layer.msg(succ.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg('服务器响应超时,请刷新后重试...');
layer.close(index);
}
});
// 页面按钮事件
util.event('lay-demo', {
//设置权限
getChecked: function (othis) {
var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
$.ajax({
type: "post",
url: "/",
data: {
json: JSON.stringify(checkedData),
id: id
},
dataType: 'json',
success: function (succ) {
if (succ.code == "1") {
layer.msg(succ.msg);
} else if (succ.code == "0") {
layer.msg(succ.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg('服务器响应超时,请刷新后重试...');
layer.close(index);
}
});
}
//重置
, setChecked: function () {
console.log(dataIntArr);
tree.setChecked('demoId1', dataIntArr); //勾选指定节点
}
//清空勾选
, reload: function () {
//重载实例
tree.reload('demoId1', {});
}
});