253 lines
12 KiB
HTML
253 lines
12 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
|
|
<head>
|
||
|
|
<base th:href="${#request.getContextPath() + '/'} ">
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/css/minimal.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/css/system.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/css/menu.css"/>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="content" class="edit-content full-height">
|
||
|
|
<div class="tile color window-tree full-height">
|
||
|
|
<form id="form" class="form-horizontal full-height" role="form" parsley-validate>
|
||
|
|
<div id="selectNodes" class="tree-nodes-wrap"></div>
|
||
|
|
<div class="tree-wrap">
|
||
|
|
<ul id="ztree" class="ztree"></ul>
|
||
|
|
</div>
|
||
|
|
<div class="form-group form-footer edit-button-footer">
|
||
|
|
<div class="col-sm-offset-4 col-sm-8 text-center">
|
||
|
|
<button type="button" class="btn btn-primary" onclick="submitForm()">确定</button>
|
||
|
|
<button type="button" class="btn btn-default" onclick="closeBox()">关闭</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
||
|
|
<script type="text/javascript" src="assets/js/vendor/bootstrap/js/bootstrap.min.js"></script>
|
||
|
|
<script type="text/javascript" src="assets/js/vendor/zTree3/js/jquery.ztree.all.js"></script>
|
||
|
|
<script type="text/javascript" src="assets/js/common.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var selectTree = top.DialogBox.dialogTreeData;
|
||
|
|
var zTree;
|
||
|
|
var defaultNodes = selectTree.selectedNodes;
|
||
|
|
var selectedNodes = [];
|
||
|
|
function initNodes() {
|
||
|
|
for(var i = 0; i < defaultNodes.length; i++) {
|
||
|
|
var item = defaultNodes[i];
|
||
|
|
if(typeof(item[selectTree.primaryKey]) != 'undefined' && item[selectTree.primaryKey] != null && item[selectTree.primaryKey] != '') {
|
||
|
|
selectedNodes.push(item);
|
||
|
|
} else {
|
||
|
|
defaultNodes.splice(i, 1);
|
||
|
|
i--;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
initNodes();
|
||
|
|
function closeBox() {
|
||
|
|
top.DialogBox.closeBox();
|
||
|
|
}
|
||
|
|
function submitForm() {
|
||
|
|
top.DialogBox.dialogTreeData.selectedNodes = selectedNodes;
|
||
|
|
closeBox();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// 删除选中的节点
|
||
|
|
function removeSelectNodes(nodeId) {
|
||
|
|
for(var i = 0; i < selectedNodes.length; i++) {
|
||
|
|
var item = selectedNodes[i];
|
||
|
|
if(nodeId == item[selectTree.primaryKey]) {
|
||
|
|
$('#selectNode_'+ nodeId).remove();
|
||
|
|
selectedNodes.splice(i, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 清空树选中状态
|
||
|
|
if(selectTree.check.enable) {
|
||
|
|
var nodes = zTree.getCheckedNodes(true);
|
||
|
|
for(var i = 0, item = nodes[i]; item = nodes[i++];) {
|
||
|
|
if(nodeId == item[selectTree.primaryKey]) {
|
||
|
|
zTree.checkNode(item, false, true);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 初始化选中的节点
|
||
|
|
function showSelectNodes() {
|
||
|
|
$('#selectNodes').empty();
|
||
|
|
for(var i = 0; i < selectedNodes.length; i++) {
|
||
|
|
var item = selectedNodes[i];
|
||
|
|
if(typeof(item[selectTree.primaryKey]) == 'undefined' || item[selectTree.primaryKey] == null || item[selectTree.primaryKey] == '') {
|
||
|
|
selectedNodes.splice(i, 1);
|
||
|
|
i--;
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
$('#selectNodes').append('<span id="selectNode_'+ item[selectTree.primaryKey] +'" class="btn btn-success btn-xs selected-node">'+ item.name +' <i class="fa fa-close" onclick="removeSelectNodes(\''+ item[selectTree.primaryKey] +'\')"></i></span>')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 初始化节点
|
||
|
|
function initSelectNodes() {
|
||
|
|
showSelectNodes();
|
||
|
|
var nodes = zTree.getNodes();
|
||
|
|
for(var i = 0, item = nodes[i]; item = nodes[i++];) {
|
||
|
|
for(var j = 0, node = selectedNodes[j]; node = selectedNodes[j++];) {
|
||
|
|
if(item[selectTree.primaryKey] == node[selectTree.primaryKey]) {
|
||
|
|
zTree.checkNode(item, true, true);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 节点是否已经选择
|
||
|
|
function isNodeSelect(nodeId) {
|
||
|
|
for(var i = 0, item = selectedNodes[i]; item = selectedNodes[i++];) {
|
||
|
|
if(nodeId == item[selectTree.primaryKey]) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
$(function() {
|
||
|
|
var layerIndex;
|
||
|
|
var apiUri = selectTree.apiUri;
|
||
|
|
var isHttp = /^http:\/\/|^https:\/\/.*/i.test(apiUri);
|
||
|
|
var otherParams = selectTree.otherParams;
|
||
|
|
var requestUrl;
|
||
|
|
var requestMethod;
|
||
|
|
var autoLoad = false;
|
||
|
|
if(isHttp) {
|
||
|
|
requestMethod = 'post';
|
||
|
|
requestUrl = top.restAjax.path('api/tree/listtree/{resultType}', [selectTree.resultType]);
|
||
|
|
otherParams.apiUri = selectTree.apiUri;
|
||
|
|
otherParams.method = selectTree.method;
|
||
|
|
if(selectTree.defaultParams != null) {
|
||
|
|
for(var i in selectTree.defaultParams) {
|
||
|
|
otherParams['defaultKeyAndValue_'+ i] = selectTree.defaultParams[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
requestUrl = apiUri;
|
||
|
|
requestMethod = selectTree.method;
|
||
|
|
if(selectTree.defaultParams != null) {
|
||
|
|
for (var i in selectTree.defaultParams) {
|
||
|
|
otherParams[i] = selectTree.defaultParams[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 根节点不存在自动加载
|
||
|
|
if(typeof(selectTree.rootNode) == 'undefined' || selectTree.rootNode == null) {
|
||
|
|
autoLoad = true;
|
||
|
|
}
|
||
|
|
var setting = {
|
||
|
|
async: {
|
||
|
|
autoLoad: autoLoad,
|
||
|
|
url: requestUrl,
|
||
|
|
autoParam: selectTree.autoParams,
|
||
|
|
enable: true,
|
||
|
|
type: requestMethod,
|
||
|
|
otherParam: otherParams,
|
||
|
|
dataFilter: selectTree.dataFilter
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
key: {
|
||
|
|
checked: selectTree.data.checked,
|
||
|
|
children: selectTree.data.children,
|
||
|
|
isParent: selectTree.data.isParent,
|
||
|
|
name: selectTree.data.name,
|
||
|
|
title: selectTree.data.title
|
||
|
|
},
|
||
|
|
},
|
||
|
|
check: selectTree.check,
|
||
|
|
callback: {
|
||
|
|
onClick: function(event, treeId, treeNode) {
|
||
|
|
if(!selectTree.check.enable) {
|
||
|
|
if(treeNode[selectTree.primaryKey] == '0') {
|
||
|
|
selectedNodes.splice(0, 1);
|
||
|
|
} else {
|
||
|
|
if(selectedNodes.length == 0) {
|
||
|
|
selectedNodes.push(treeNode);
|
||
|
|
} else {
|
||
|
|
selectedNodes.splice(0, 1, treeNode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
showSelectNodes();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onCheck: function(event, treeId, treeNode) {
|
||
|
|
if(!isNodeSelect(treeNode[selectTree.primaryKey])) {
|
||
|
|
if(treeNode[selectTree.primaryKey] == '0') {
|
||
|
|
zTree.checkNode(treeNode, false, true);
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
selectedNodes.push(treeNode);
|
||
|
|
}
|
||
|
|
showSelectNodes();
|
||
|
|
} else {
|
||
|
|
removeSelectNodes(treeNode[selectTree.primaryKey]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onAsyncSuccess: function(event, treeId, treeNode, msg) {
|
||
|
|
var nodes = zTree.getNodes();
|
||
|
|
if(nodes.length == 0) {
|
||
|
|
top.DialogBox.msg('暂无数据');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// 自动打钩
|
||
|
|
if(selectTree.check.enable) {
|
||
|
|
if(typeof(treeNode) != 'undefined') {
|
||
|
|
var childNodes = treeNode[selectTree.data.children];
|
||
|
|
if(typeof(childNodes) != 'undefined' && childNodes != null && childNodes.length > 0) {
|
||
|
|
for(var i = 0, item = childNodes[i]; item = childNodes[i++];) {
|
||
|
|
for(var j = 0, selectedNode = selectedNodes[j]; selectedNode = selectedNodes[j++];) {
|
||
|
|
if(item[selectTree.primaryKey] == selectedNode[selectTree.primaryKey]) {
|
||
|
|
zTree.checkNode(item, true, true);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
var rootNodes = zTree.getNodesByFilter(function (node) { return node.level == 0 });
|
||
|
|
for(var i = 0, item = rootNodes[i]; item = rootNodes[i++];) {
|
||
|
|
for(var j = 0, selectedNode = selectedNodes[j]; selectedNode = selectedNodes[j++];) {
|
||
|
|
if(item[selectTree.primaryKey] == selectedNode[selectTree.primaryKey]) {
|
||
|
|
zTree.checkNode(item, true, true);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
zTree = $.fn.zTree.init($("#ztree"), setting);
|
||
|
|
if(typeof(selectTree.rootNode) != 'undefined' && selectTree.rootNode != null) {
|
||
|
|
if(typeof(selectTree.rootNode[selectTree.primaryKey]) != 'undefined' && selectTree.rootNode[selectTree.primaryKey] != null && selectTree.rootNode[selectTree.primaryKey] != '') {
|
||
|
|
zTree.addNodes(null, selectTree.rootNode);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if(!autoLoad) {
|
||
|
|
var rootNode = {pId: '-1', name: '根节点', url: 'javascript:;', isParent: 'true'};
|
||
|
|
rootNode[selectTree.primaryKey] = '0';
|
||
|
|
zTree.addNodes(null, rootNode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
refreshTree('ztree');
|
||
|
|
initSelectNodes();
|
||
|
|
}, function(code, data) {
|
||
|
|
top.DialogBox.msg(data.msg);
|
||
|
|
}, function() {
|
||
|
|
layerIndex = top.DialogBox.msg(TextMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
|
|
}, function() {
|
||
|
|
top.DialogBox.close(layerIndex);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|