<!DOCTYPE html>
|
<HTML>
|
|
<HEAD>
|
<TITLE> ZTREE DEMO - select menu</TITLE>
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
<link rel="stylesheet" href="http://18.1.1.231/Ztree/css/demo.css" type="text/css">
|
<link rel="stylesheet" href="http://18.1.1.231/Ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
|
<script type="text/javascript" src="http://18.1.1.231/Ztree/js/jquery-1.4.4.min.js"></script>
|
<script type="text/javascript" src="http://18.1.1.231/Ztree/js/jquery.ztree.core.js"></script>
|
<script type="text/javascript" src="http://18.1.1.231/Ztree/js/jquery.ztree.excheck.js"></script>
|
<script type="text/javascript" src="http://18.1.1.231/Ztree/js/jquery.ztree.exedit.js"></script>
|
<SCRIPT type="text/javascript">
|
var metaQueryUrl = "http://71.3.21.70:8081/spcData/quertMetaData";
|
var treeDataUrl = "http://71.3.21.70:8081/spcData/queryMenuForP";
|
var setting = {
|
view: {
|
dblClickExpand: false
|
},
|
check: {
|
enable: true
|
},
|
callback: {
|
onRightClick: OnRightClick,
|
onClick: loadData,
|
beforeClick: function (treeId, treeNode) {
|
var zTree = $.fn.zTree.getZTreeObj("tree");
|
if (treeNode.isParent) {
|
zTree.expandNode(treeNode);
|
return false;
|
} else {
|
|
return true;
|
}
|
}
|
}
|
};
|
|
function loadData(event, treeId, treeNode) {
|
//查询元数据接口
|
ajax(metaQueryUrl, 'get', {}, function () {
|
// $('')
|
});
|
console.log(treeNode)
|
}
|
|
function ajax(url, type, data, callback) {
|
$.ajax({
|
url: url,
|
type: type,
|
data: JSON.stringify(data),
|
contentType: "application/json;charset=UTF-8",
|
dataType: "json",
|
success: function (data) {
|
callback(data);
|
},
|
error: function (data) {
|
console.log(error);
|
}
|
}
|
|
)
|
|
}
|
|
|
var zNodes = [{
|
id: 1,
|
name: "无右键菜单 1",
|
open: true,
|
noR: true,
|
children: [{
|
id: 11,
|
name: "节点 1-1",
|
noR: true
|
},
|
{
|
id: 12,
|
name: "节点 1-2",
|
noR: true
|
}
|
|
]
|
},
|
{
|
id: 2,
|
name: "右键操作 2",
|
open: true,
|
children: [{
|
id: 21,
|
name: "节点 2-1"
|
},
|
{
|
id: 22,
|
name: "节点 2-2"
|
},
|
{
|
id: 23,
|
name: "节点 2-3"
|
},
|
{
|
id: 24,
|
name: "节点 2-4"
|
}
|
]
|
},
|
{
|
id: 3,
|
name: "右键操作 3",
|
open: true,
|
children: [{
|
id: 31,
|
name: "节点 3-1"
|
},
|
{
|
id: 32,
|
name: "节点 3-2"
|
},
|
{
|
id: 33,
|
name: "节点 3-3"
|
},
|
{
|
id: 34,
|
name: "节点 3-4"
|
}
|
]
|
}
|
];
|
|
function OnRightClick(event, treeId, treeNode) {
|
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
|
zTree.cancelSelectedNode();
|
showRMenu("root", event.clientX, event.clientY);
|
} else if (treeNode && !treeNode.noR) {
|
zTree.selectNode(treeNode);
|
showRMenu("node", event.clientX, event.clientY);
|
}
|
}
|
|
function showRMenu(type, x, y) {
|
$("#rMenu ul").show();
|
if (type == "root") {
|
$("#m_del").hide();
|
$("#m_check").hide();
|
$("#m_unCheck").hide();
|
} else {
|
$("#m_del").show();
|
$("#m_check").show();
|
$("#m_unCheck").show();
|
}
|
rMenu.css({
|
"top": y + "px",
|
"left": x + "px",
|
"visibility": "visible"
|
});
|
|
$("body").bind("mousedown", onBodyMouseDown);
|
}
|
|
function hideRMenu() {
|
if (rMenu) rMenu.css({
|
"visibility": "hidden"
|
});
|
$("body").unbind("mousedown", onBodyMouseDown);
|
}
|
|
function onBodyMouseDown(event) {
|
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
|
rMenu.css({
|
"visibility": "hidden"
|
});
|
}
|
}
|
var addCount = 1;
|
|
function addTreeNode() {
|
hideRMenu();
|
var newNode = {
|
name: "增加" + (addCount++)
|
};
|
if (zTree.getSelectedNodes()[0]) {
|
newNode.checked = zTree.getSelectedNodes()[0].checked;
|
zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
|
} else {
|
zTree.addNodes(null, newNode);
|
}
|
}
|
|
function removeTreeNode() {
|
hideRMenu();
|
var nodes = zTree.getSelectedNodes();
|
if (nodes && nodes.length > 0) {
|
if (nodes[0].children && nodes[0].children.length > 0) {
|
var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
|
if (confirm(msg) == true) {
|
zTree.removeNode(nodes[0]);
|
}
|
} else {
|
zTree.removeNode(nodes[0]);
|
}
|
}
|
}
|
|
function checkTreeNode(checked) {
|
var nodes = zTree.getSelectedNodes();
|
if (nodes && nodes.length > 0) {
|
zTree.checkNode(nodes[0], checked, true);
|
}
|
hideRMenu();
|
}
|
|
function resetTree() {
|
hideRMenu();
|
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
|
}
|
|
var zTree, rMenu;
|
|
$(document).ready(function () {
|
ajax(metaQueryUrl, "get".null, function (e) {
|
zNodes = e.data;
|
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
|
zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
rMenu = $("#rMenu");
|
})
|
|
});
|
//-->
|
</SCRIPT>
|
<style type="text/css">
|
div#rMenu {
|
position: absolute;
|
visibility: hidden;
|
top: 0;
|
background-color: #555;
|
text-align: left;
|
padding: 2px;
|
}
|
|
div#rMenu ul li {
|
margin: 1px 0;
|
padding: 0 5px;
|
cursor: pointer;
|
list-style: none outside none;
|
background-color: #DFDFDF;
|
}
|
</style>
|
</HEAD>
|
|
<BODY>
|
<div id="treeDemo" class="ztree"></div>
|
<div id="rMenu">
|
<ul>
|
<li id="m_add" onclick="addTreeNode();">增加节点</li>
|
<li id="m_del" onclick="removeTreeNode();">删除节点</li>
|
<li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
|
<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
|
<li id="m_reset" onclick="resetTree();">恢复zTree</li>
|
</ul>
|
</div>
|
</BODY>
|
|
</HTML>
|
