<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<title>Demo</title>
|
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
|
<link href="//unpkg.com/layui@2.8.8/dist/css/layui.css" rel="stylesheet">
|
</head>
|
<body>
|
<div class="layui-btn-container">
|
<button type="button" class="layui-btn layui-btn-sm" lay-on="save">保存</button>
|
</div>
|
|
<div id="ID-tree-demo"></div>
|
|
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
|
<script src="//unpkg.com/layui@2.8.8/dist/layui.js"></script>
|
<script src="../../../layuiadmin/Scripts//jquery-1.4.1.js"></script>
|
<script src="../../../layuiadmin/Scripts/webConfig.js"></script>
|
<script src="../../../layuiadmin/PubCustom.js"></script>
|
<script>
|
layui.use(function () {
|
var tree = layui.tree;
|
var layer = layui.layer;
|
var util = layui.util;
|
var $ = layui.$;
|
|
//#region 全局变量
|
var option = {}; //树组件的渲染参数，保存树组件渲染的信息
|
var saveData = []; //存储用户设置的自定义数据，传递给后端进行保存
|
var menuDefineData = []; //以父子级结构存放树组件的自定义数据，用来赋给option
|
//登录平台(PC端、手机端)
|
var HType = "PC";
|
//#endregion
|
|
//#region 初始化页面
|
set_ClearBill(); //调用初始化界面方法，完成界面的初始化
|
//#endregion
|
|
//#region 监听方法
|
// 按钮事件
|
util.event('lay-on', {
|
save: function () { //保存
|
saveMenuDefineData();
|
}
|
});
|
|
//#endregion
|
|
//#region 其它方法
|
|
//#region 界面初始化方法
|
//初始化界面方法
|
function set_ClearBill() {
|
if (!judgeMorPC()) {
|
HType = "mobile";
|
}
|
set_InitGrid();
|
get_Display();
|
}
|
//#endregion
|
|
|
//#region 树组件渲染参数的初始化
|
//对树组件的渲染参数进行初始化，设置除data以外的其它属性
|
function set_InitGrid() {
|
option = {
|
elem: '#ID-tree-demo',
|
showCheckbox: true, // 是否显示复选框
|
id: 'demo-id-1',
|
isJump: false, // 是否允许点击节点时弹出新窗口跳转
|
click: function (obj) {
|
//var data = obj.data; //获取当前点击的节点数据
|
//layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
|
}
|
}
|
}
|
//#endregion
|
|
//#region 保存
|
//保存自定义数据：获取树组件中选中的节点信息
|
function saveMenuDefineData() {
|
var checkedData = tree.getChecked('demo-id-1'); // 获取选中节点的数据
|
saveData = []; //清空保存自定义数据的列表的数据
|
getSelectedData(checkedData); //将选中的节点的信息以列表的形式保存在saveData中
|
|
var sMainSub = JSON.stringify(saveData) + ";" + sessionStorage["HUserName"] + ";" + HType;
|
var index = layer.load();
|
$.ajax({
|
url: GetWEBURL() + "/Web/SaveMenuDefineSet",
|
type: "POST",
|
data: { "sMainSub": sMainSub }, //将当前用户和其自定义数据传递给后端，保存到数据库
|
success: function (data) {
|
if (data.count == 1) {
|
layer.close(index);
|
layer.msg("提交成功");
|
}
|
else {
|
layer.close(index);
|
layer.msg(data.Message, { icon: 5, btn: ['确认'], time: 100000, offset: 't', skin: 'layui-layer-lan', title: "温馨提示" });
|
}
|
},
|
error: function (err) {
|
layer.close(index);
|
layer.msg("错误:" + err, { icon: 5, btn: ['确认'], time: 100000, offset: 't', skin: 'layui-layer-lan', title: "温馨提示" });
|
layer.alert(JSON.stringify(err), { shade: 0 });
|
}
|
});
|
}
|
|
|
//将树组件被选中的数据，从父子级结构列表以数组列表形式存放
|
function getSelectedData(checkedData) {
|
for (var i = 0; i < checkedData.length; i++) {
|
saveData.push({ "HItemID": checkedData[i].id, "HName": checkedData[i].title });
|
getSelectedData(checkedData[i].children);
|
}
|
}
|
|
//#endregion
|
|
//#region 显示目录的树组件
|
//优化自定义菜单显示的实验
|
function get_Display() {
|
$.ajax({
|
url: GetWEBURL() + "/Web/MenuDefineSet",
|
type: "GET",
|
async: false,
|
data: { "HMakeName": sessionStorage["HUserName"], "HType": HType },
|
success: function (res) {
|
var dt = res.data.dt; //菜单清单的全部信息与被选中情况
|
var trees = res.data.tree; //树组件的根节点
|
menuDefineData = trees; //获取树组件的根节点，并通过方法getDefineData()递归添加dt中其它的子节点，并设置各节点的选中情况
|
getDefineData(dt, menuDefineData); //为根节点添加其它子节点的数据
|
option.data = menuDefineData; //为树组件的渲染参数添加节点数据
|
tree.render(option); //渲染树组件
|
},
|
error: function (err) {
|
|
}
|
});
|
}
|
//根据后端传递的菜单清单列表和根目录列表，递归
|
function getDefineData(dt, tree) {
|
|
for (var i = 0; i < tree.length; i++) { //遍历节点列表，为列表中的各节点添加子节点
|
var children = []; //根节点的子节点属性children由后端传递，为null，所以此处为节点的children赋值为[]
|
for (var j = 0; j < dt.length; j++) { //遍历菜单清单列表，寻找当前节点的子节点
|
if (tree[i].id == dt[j].HPartentID && dt[j].HitemID != dt[j].HPartentID) { //判断dt中当下数据是否为当前节点的子节点的数据
|
var item = { "id": dt[j].HitemID, "field": dt[j].HitemID, "title": dt[j].HName, "spread": false };
|
if (dt[j].HSelected == true) {
|
item.checked = true;
|
}
|
children.push(item); //收集当前节点的子节点
|
}
|
}
|
tree[i].children = children; //将收集的子节点列表赋给当前节点的children，即添加当前节点的子节点列表
|
if (tree[i].children.length > 0) {
|
tree[i].checked = false;
|
}
|
for (var j = 0; j < tree[i].children.length; j++) {
|
getDefineData(dt, tree[i].children);
|
}
|
}
|
}
|
//#endregion
|
|
|
//#endregion
|
|
});
|
</script>
|
</body>
|
</html>
|
