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.
391 lines
21 KiB
391 lines
21 KiB
<!DOCTYPE html>
|
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|
<%@ include file="/common/ctx.jsp"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
<html>
|
|
<head>
|
|
<title>首页菜单配置列表</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
|
|
<meta name="author" content="Coderthemes">
|
|
|
|
<script type="text/javascript" src="${ctx}/hbcyjc/resourceNew/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/layer/layer.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="${ctx }/js/layui/css/layui.css">
|
|
|
|
<!-- 字体图标 -->
|
|
<link href="${ctx}/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
|
|
<link href="${ctx}/assets/ionicon/css/ionicons.min.css" rel="stylesheet"/>
|
|
<link href="${ctx}/css/material-design-iconic-font.min.css" rel="stylesheet">
|
|
|
|
<!-- select2 带搜索的下拉 -->
|
|
<link href="${ctx}/assets/select2/select2.css" rel="stylesheet" type="text/css"/>
|
|
<link href="${ctx}/assets/jquery-multi-select/multi-select.css" rel="stylesheet" type="text/css"/>
|
|
|
|
<!-- 自定义样式 -->
|
|
|
|
<%@ include file="/common/theme_css.jsp" %>
|
|
|
|
<link rel="stylesheet" href="${ctx }/css/style.css">
|
|
<link rel="stylesheet" href="${ctx}/js/JQuery zTree v3.4/css/zTreeStyle/zTreeStyle.css" type="text/css"/>
|
|
<!-- 用超过1.9版本的会ztree报错 -->
|
|
<script type="text/javascript" src="${ctx}/js/jquery-1.8.2.min.js"></script>
|
|
|
|
<script type="text/javascript" src="${ctx}/js/JQuery zTree v3.4/js/jquery.ztree.core-3.4.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/common/json_form.js"></script>
|
|
<script src="${ctx}/js/modernizr.min.js"></script>
|
|
<script src="${ctx }/js/layui/layui.all.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="${ctx}/js/JQuery zTree v3.4/js/jquery.ztree.excheck-3.4.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/JQuery zTree v3.4/js/jquery.ztree.exedit-3.4.js"></script>
|
|
|
|
<style type="text/css">
|
|
.mousefocus{
|
|
background-color: rgba(0,109,207,.20);
|
|
}
|
|
|
|
|
|
.ztree li span {
|
|
line-height: 16px;
|
|
margin-right: 2px;
|
|
color: #fdfdfd;
|
|
}
|
|
|
|
.layui-input{
|
|
/* background: none; */
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border:0.5px;solid #378888";
|
|
}
|
|
|
|
.layui-textarea{
|
|
/* background: none; */
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border:0.5px;solid #378888";
|
|
}
|
|
|
|
|
|
a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var setting = {
|
|
edit: {
|
|
drag: {
|
|
autoExpandTrigger: true, //拖拽时父节点自动展开是否触发onExpand 事件回调函数。
|
|
prev: dropPrev, //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。
|
|
inner: dropInner, //拖拽到目标节点时，设置是否允许成为目标节点的子节点。
|
|
next: dropNext //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。
|
|
},
|
|
enable: true,
|
|
showRemoveBtn: false,
|
|
showRenameBtn: false
|
|
},
|
|
data: {
|
|
simpleData: {
|
|
enable: true,
|
|
idKey: "dicid", // 节点数据中保存唯一标识的属性名称
|
|
pIdKey: "dicpid", // 节点数据中保存其父节点唯一标识的属性名称
|
|
rootPId: 1 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
|
|
},
|
|
key: {
|
|
name: "dicname" // zTree 节点数据保存节点名称的属性名称。
|
|
}
|
|
},
|
|
callback: {
|
|
beforeDrag: beforeDrag, //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
|
|
beforeDrop: beforeDrop, //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
|
|
beforeDragOpen: beforeDragOpen, //用于捕获拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作
|
|
onDrag: onDrag, //用于捕获节点被拖拽的事件回调函数
|
|
onDrop: onDrop, //用于捕获节点拖拽操作结束的事件回调函数
|
|
onExpand: onExpand //用于捕获节点被展开的事件回调函数
|
|
}
|
|
};
|
|
|
|
|
|
//父节点添加禁止子节点移走（childOuter:false），且不可拖动（drag:false）
|
|
//二级节点添加禁止子节点移走，但是可以拖动
|
|
var zNodes =[
|
|
|
|
{ id:1, pId:0, name:"拖拽测试", open:true, drag:false,childOuter:false},
|
|
|
|
{ id:3, pId:1, name:"禁止子节点移走1", open:true, childOuter:false},
|
|
{ id:31, pId:3, name:"我不想成为父节点 1-1", dropInner:false},
|
|
{ id:32, pId:3, name:"我不要成为根节点 1-2", dropRoot:false},
|
|
{ id:33, pId:3, name:"拖拽试试看 1-3"},
|
|
{ id:34, pId:3, name:"拖拽试试看 1-4" ,open:true},
|
|
{ id:35, pId:34, name:"test 1-1"},
|
|
{ id:36, pId:34, name:"test 1-2"},
|
|
{ id:37, pId:34, name:"test 1-3"},
|
|
|
|
{ id:2, pId:1, name:"禁止子节点移走2", open:true, childOuter:false},
|
|
{ id:21, pId:2, name:"我不想成为父节点 2-1", dropInner:false},
|
|
{ id:22, pId:2, name:"我不要成为根节点 2-2", dropRoot:false},
|
|
{ id:23, pId:2, name:"拖拽试试看 2-3"},
|
|
|
|
|
|
];
|
|
|
|
//拖拽到目标节点时，设置是否允许移动到目标节点前面的操作。
|
|
function dropPrev(treeId, nodes, targetNode) {
|
|
var pNode = targetNode.getParentNode();
|
|
if (pNode && pNode.dropInner === false) {
|
|
return false;
|
|
} else {
|
|
for (var i=0,l=curDragNodes.length; i<l; i++) {
|
|
var curPNode = curDragNodes[i].getParentNode();
|
|
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
//拖拽到目标节点时，设置是否允许成为目标节点的子节点。
|
|
function dropInner(treeId, nodes, targetNode) {
|
|
if (targetNode && targetNode.dropInner === false) {
|
|
return false;
|
|
} else {
|
|
for (var i=0,l=curDragNodes.length; i<l; i++) {
|
|
if (!targetNode && curDragNodes[i].dropRoot === false) {
|
|
return false;
|
|
} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
//拖拽到目标节点时，设置是否允许移动到目标节点后面的操作。
|
|
function dropNext(treeId, nodes, targetNode) {
|
|
var pNode = targetNode.getParentNode();
|
|
if (pNode && pNode.dropInner === false) {
|
|
return false;
|
|
} else {
|
|
for (var i=0,l=curDragNodes.length; i<l; i++) {
|
|
var curPNode = curDragNodes[i].getParentNode();
|
|
if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
var log, className = "dark", curDragNodes, autoExpandNode;
|
|
function beforeDrag(treeId, treeNodes) {
|
|
className = (className === "dark" ? "":"dark");
|
|
showLog("[ "+getTime()+" beforeDrag ] drag: " + treeNodes.length + " nodes." );
|
|
for (var i=0,l=treeNodes.length; i<l; i++) {
|
|
if (treeNodes[i].drag === false) {
|
|
curDragNodes = null;
|
|
return false;
|
|
} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
|
|
curDragNodes = null;
|
|
return false;
|
|
}
|
|
}
|
|
curDragNodes = treeNodes;
|
|
return true;
|
|
}
|
|
function beforeDragOpen(treeId, treeNode) {
|
|
autoExpandNode = treeNode;
|
|
return true;
|
|
}
|
|
function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
|
|
className = (className === "dark" ? "":"dark");
|
|
showLog("[ "+getTime()+" beforeDrop ] moveType:" + moveType);
|
|
showLog("target: " + (targetNode ? targetNode.name : "root") + " -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"));
|
|
return true;
|
|
}
|
|
function onDrag(event, treeId, treeNodes) {
|
|
className = (className === "dark" ? "":"dark");
|
|
showLog("[ "+getTime()+" onDrag ] drag: " + treeNodes.length + " nodes." );
|
|
}
|
|
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
|
|
className = (className === "dark" ? "":"dark");
|
|
showLog("[ "+getTime()+" onDrop ] moveType:" + moveType);
|
|
showLog("target: " + (targetNode ? targetNode.name : "root") + " -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"))
|
|
}
|
|
function onExpand(event, treeId, treeNode) {
|
|
if (treeNode === autoExpandNode) {
|
|
className = (className === "dark" ? "":"dark");
|
|
showLog("[ "+getTime()+" onExpand ] " + treeNode.name);
|
|
}
|
|
}
|
|
|
|
function showLog(str) {
|
|
if (!log) log = $("#log");
|
|
log.append("<li class='"+className+"'>"+str+"</li>");
|
|
if(log.children("li").length > 8) {
|
|
log.get(0).removeChild(log.children("li")[0]);
|
|
}
|
|
}
|
|
function getTime() {
|
|
var now= new Date(),
|
|
h=now.getHours(),
|
|
m=now.getMinutes(),
|
|
s=now.getSeconds(),
|
|
ms=now.getMilliseconds();
|
|
return (h+":"+m+":"+s+ " " +ms);
|
|
}
|
|
|
|
|
|
|
|
function setTrigger() {
|
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
|
zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
zNodes = ${diclist}; // 使用后台传送的值
|
|
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
|
|
$("#callbackTrigger").bind("change", {}, setTrigger);
|
|
|
|
|
|
});
|
|
|
|
function getallztreedata(){
|
|
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取到树
|
|
var nodesSys = treeObj.getNodes(); //可以获取所有的父节点
|
|
var nodesSysAll = treeObj.transformToArray(nodesSys); //获取树所有节点
|
|
console.log(nodesSysAll);
|
|
}
|
|
|
|
</SCRIPT>
|
|
|
|
</head>
|
|
<body class="fixed-left" style="width: 100%">
|
|
|
|
<div class="xingk_nr"></div>
|
|
<%@include file="/common/menu.jsp" %>
|
|
<div id="wrapper">
|
|
<div class="panel">
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="m-b-30">
|
|
<button type="button" id="testbuttom" class="layui-btn layui-btn-sm" data-action="expand-all" onclick="getallztreedata()">重新加载菜单数据</button>
|
|
<button type="button" id="charubtn" class="layui-btn layui-btn-sm" data-action="expand-all" onclick="insert()"><i class="fa fa-sign-in"></i>插入</button>
|
|
<button type="button" class="layui-btn layui-btn-sm" data-action="collapse-all" onclick="del()"><i class="fa fa-trash"></i>删除</button>
|
|
</div>
|
|
<div class="row">
|
|
<div class=" col-sm-12">
|
|
<table width="100%">
|
|
<tr>
|
|
<td width="210" valign="top" style="padding-top:10px; border-right:1px solid #2e3f6d; border-top:1px solid #2e3f6d; ">
|
|
<div style="min-height:480px;border: 0.5px solid #2e3f6d">
|
|
<ul id="treeDemo" class="ztree"></ul>
|
|
</div>
|
|
</td>
|
|
<td valign="top">
|
|
<div class=" form" style="margin-left:20px; width: 100%;">
|
|
<form class="layui-form" id="dicForm" name="dicForm" method="post" novalidate>
|
|
<div class="layui-form-item">
|
|
<input type="hidden" id="dicid" name="dicid" value=""/>
|
|
<input type="hidden" id="dicpid" name="dicpid" value=""/>
|
|
<label for="pname" class="layui-form-label">父节点:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" readonly id="pname" name="pname" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label for="dicpcode" class="layui-form-label">父编码:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" readonly id="dicpcode" name="dicpcode" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicname" class="layui-form-label">字典名称(标题):</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="dicname" name="dicname" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicname" class="layui-form-label">字典名称(父页面显示标题标题):</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="menutitlepz" name="menutitlepz" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicname" class="layui-form-label">跳转链接:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="menuurl" name="menuurl" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicname" class="layui-form-label">首页链接状态（1：新页面，2：新地址）:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="menustate" name="menustate" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicname" class="layui-form-label">产检首页菜单图标:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="menuicon" name="menuicon" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicname" class="layui-form-label">综合展示菜单图标:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="zhzsmenuicon" name="zhzsmenuicon" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicnum" class="layui-form-label">字典编码:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" readonly id="dicnum" name="dicnum" type="text">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label for="dicsn" class="layui-form-label">字典位置:</label>
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<input class="layui-input" id="dicsn" name="dicsn" type="text" onkeyup="value=value.replace(/[^\d]/g,'')">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item layui-form-text">
|
|
<label for="dicremark" class="layui-form-label">字典说明:</label>
|
|
<div class="layui-input-block" style="width: 50%">
|
|
<textarea class="layui-textarea" id="dicremark" name="dicremark" lay-verify="required"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item btn-pos">
|
|
<div class="layui-input-block" style="width: 30%">
|
|
<button class="layui-btn layui-btn-disabled layui-btn-sm" id="updateBu" name="updateBu" onclick="save('update'); return false;"><i class="fa fa-pencil"></i>修改</button>
|
|
<button class="layui-btn layui-btn-sm" id="saveBu" name="saveBu" onclick="save('add');return false;"><i class="fa fa-save"></i>保存</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|