You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
5.6 KiB
153 lines
5.6 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>layui</title>
|
||
|
|
<meta name="renderer" content="webkit">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
|
||
|
|
<link rel="stylesheet" href="/static/css/public.css" media="all">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="test2" class="demo-tree"></div>
|
||
|
|
<input id="mname" name="mname" th:value="${mname}" style="display: none">
|
||
|
|
<input id="type" name="type" th:value="${type}" style="display: none">
|
||
|
|
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
|
|
<script>
|
||
|
|
layui.use(['form', 'layer', 'dropdown', 'tree'], function () {
|
||
|
|
var $ = layui.jquery,
|
||
|
|
tree = layui.tree;
|
||
|
|
var mname = $("#mname").val();
|
||
|
|
let type = $("#type").val();
|
||
|
|
// 用于暂存当前查询结果
|
||
|
|
var tempData = [];
|
||
|
|
var req = {};
|
||
|
|
req.mname = mname;
|
||
|
|
req.type = type;
|
||
|
|
var test = tree.render({
|
||
|
|
elem: '#test2'
|
||
|
|
, data: []
|
||
|
|
, click: function (obj) {
|
||
|
|
if (obj.data.children !== undefined) {
|
||
|
|
if (mname === "") {
|
||
|
|
var state = obj.state;
|
||
|
|
var param = {};
|
||
|
|
let id = obj.data.id;
|
||
|
|
param.mtId = id;
|
||
|
|
if ("open" === state) {
|
||
|
|
param.mname = mname;
|
||
|
|
param.type = type;
|
||
|
|
addTreeChildren(param);
|
||
|
|
} else {
|
||
|
|
param.mtId = id;
|
||
|
|
closeTreeChildren(param);
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let midItem = $("#mid", window.parent.document)[0];
|
||
|
|
let mnameItem = $("#mname",window.parent.document)[0];
|
||
|
|
midItem.value = obj.data.id;
|
||
|
|
mnameItem.value = obj.data.title;
|
||
|
|
var index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: "/material/treeMenus",
|
||
|
|
data: JSON.stringify(req),
|
||
|
|
type: 'post',
|
||
|
|
dataType: 'json',
|
||
|
|
contentType: "application/json;charset=utf-8",
|
||
|
|
beforeSend: function () {
|
||
|
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
|
||
|
|
},
|
||
|
|
success: function (d) {
|
||
|
|
layer.close(this.layerIndex);
|
||
|
|
var data2 = d.data;
|
||
|
|
tempData = data2;
|
||
|
|
test.reload({
|
||
|
|
data: tempData
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$("#test2").on("click", ".layui-tree-entry", function (event) {
|
||
|
|
|
||
|
|
var target = $(event.target);
|
||
|
|
var id = this.parentNode.getAttribute("data-id");
|
||
|
|
var context = target.context.className;
|
||
|
|
if (mname === "") {
|
||
|
|
if (context.includes("layui-tree-main")) {
|
||
|
|
var childrenName = this.childNodes[0].childNodes[0].childNodes[0].className;
|
||
|
|
if (childrenName.includes("layui-icon-addition")) {
|
||
|
|
// console.log("隐藏")
|
||
|
|
var param = {};
|
||
|
|
param.mtId = id;
|
||
|
|
closeTreeChildren(param);
|
||
|
|
} else if (childrenName.includes("layui-icon-subtraction")) {
|
||
|
|
var param = {};
|
||
|
|
param.mtId = id;
|
||
|
|
param.mname = mname;
|
||
|
|
param.type = type;
|
||
|
|
addTreeChildren(param);
|
||
|
|
|
||
|
|
}
|
||
|
|
} else if (context.includes("layui-icon")) {
|
||
|
|
if (context.includes("layui-icon-addition")) {
|
||
|
|
var param = {};
|
||
|
|
param.mtId = id;
|
||
|
|
closeTreeChildren(param);
|
||
|
|
// console.log("隐藏")
|
||
|
|
} else if (context.includes("layui-icon-subtraction")) {
|
||
|
|
var param = {};
|
||
|
|
param.mtId = id;
|
||
|
|
param.mname = mname;
|
||
|
|
param.type = type;
|
||
|
|
addTreeChildren(param);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// 用于添加分支
|
||
|
|
addTreeChildren = function (param) {
|
||
|
|
$.ajax({
|
||
|
|
url: "/material/getNewTreeForMtId",
|
||
|
|
data: JSON.stringify(param),
|
||
|
|
type: 'post',
|
||
|
|
dataType: 'json',
|
||
|
|
contentType: "application/json;charset=utf-8",
|
||
|
|
beforeSend: function () {
|
||
|
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
|
||
|
|
},
|
||
|
|
success: function (d) {
|
||
|
|
layer.close(this.layerIndex);
|
||
|
|
tempData = d.data;
|
||
|
|
test.reload({
|
||
|
|
data: tempData
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
closeTreeChildren = function (param) {
|
||
|
|
$.ajax({
|
||
|
|
url: "/material/closeTreeChildren",
|
||
|
|
data: JSON.stringify(param),
|
||
|
|
type: 'post',
|
||
|
|
dataType: 'json',
|
||
|
|
contentType: "application/json;charset=utf-8"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|