zTree是一个基于jQuery的树形列表生成控件。
第一行
1 |
|
的意思是在id为treeDemo的元素上使用setting设置对象,初始化为一个ztree对象,并且将该部分存放在变量treeObj中。
第二行
1 |
|
的意思是使用ztree的getZTreeObj方法,获取id为treeDemo的元素上的ztree对象,并将该部分存放在变量zTree中。
这两个变量其实是相等的。区别在于第一个方法是初始化后就寄存在一个变量里。而第二个方法可以在需要控制zTree对象的时候再灵活获取,避免了全局变量泄露。
你可以去zTree的官网查看他的API就明白了
<script>
$(function() {
loadTree();
});
</script>
//加载树
var orgTree ;
function loadTree(){
var zNodes;
jQuery.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
data:{
id:$("#productId").val(),
name:$("#equipName").val()
},
url: 'subproductsController.do?getTreeDemoData',//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
console.log(data.obj)
zNodes = data.obj; //把后台封装好的简单Json格式赋给zNodes
}
});
var url = "subproductsController.do?getTreeDemoData";
var id = $("#productId").val();
var name = $("#equipName").val();
var reqUrl = url + "&id="+id+"&name="+name;
var ztreeCreator = new ZtreeCreator('orgTree',url,zNodes)
.setCallback({onClick:zTreeOnLeftClick,onRightClick:zTreeOnRightClick})
.initZtree({},function(treeObj){orgTree = treeObj});
orgTree = $.fn.zTree.getZTreeObj("orgTree");
var nodes = orgTree.getNodes();
var node = nodes[0].children[0];
orgTree.selectNode(node);
// var url = "eamProductController.do?goUpdateProduct&productId="+node.id;
var url = "productController.do?goUpdate&productStyle=1&id=" +node.id;
$("#listFrame").attr("src", url);
};
//左击
function zTreeOnLeftClick(event, treeId, treeNode){
curSelectNode = treeNode;
var id = treeNode.id;
// var url = "eamProductController.do?goUpdateProduct&productId=" + id;
var url = "productController.do?goUpdate&productStyle=1&id=" + id;
if(curSelectNode.parentId=="0"){
$.topCall.warn('该节点为根节点,请点击具体的组织');
return false;
}
$("#listFrame").attr("src", url);
};
/**
* 树右击事件
*/
function zTreeOnRightClick(e, treeId, treeNode) {
if (treeNode) {
orgTree.selectNode(treeNode);
curSelectNode=treeNode;
var isfolder = treeNode.isFolder;
var h = $(window).height();
var w = $(window).width();
var menuWidth = 120;
var menuHeight = 75;
var menu = null;
if (treeNode != null) {
menu = $('#orgMenu');
}
var x = e.pageX, y = e.pageY;
if (e.pageY + menuHeight > h) {
y = e.pageY - menuHeight;
}
if (e.pageX + menuWidth > w) {
x = e.pageX - menuWidth;
}
menu.menu('show', {
left : x,
top : y
});
}
};
//选择子产品节点
function chooseNode() {
var selectNode = getSelectNode();
if (!selectNode) return;
var url = "subproductsController.do?goChoose&productId=" + selectNode.id;
$("#listFrame").attr("src", url);
};
//添加节点
function addNode() {
var selectNode = getSelectNode();
if (!selectNode) return;
//原始的数据
// var url = "subproductsController.do?goAddProduct&productId=" + selectNode.id;
var url = "productController.do?goAdd&productStyle=1&productId=" + selectNode.id;
$("#listFrame").attr("src", url);
};
//编辑节点
function editNode() {
var selectNode = getSelectNode();
if (!selectNode) return;
//根节点 不能编辑
if(selectNode.parentId=="0"){
$.messager.confirm('提示','该节点为根节点,不可编辑');
// $.topCall.warn('该节点为根节点,不可编辑');
return;
}
// var url = "eamProductController.do?goUpdateProduct&productId=" + selectNode.id;
var url = "productController.do?goUpdate&productStyle=1&id=" + selectNode.id;
$("#listFrame").attr("src", url);
};
//删除
function delNode() {
var selectNode = getSelectNode();
if (selectNode.children)
{
$.messager.confirm('提示','该节点下存在子节点,不可删除');
// $.topCall.warn('该节点下存在子节点,不可删除');
return;
}
var nodeId = selectNode.id;
var parentId=selectNode.parentId;
if (nodeId == "0") {
$.messager.confirm('提示','该节点为根节点,不可删除');
return;
}
$.messager.confirm('提示','确定要删除该节点吗?',function(r){
if(r){
var url = "subproductsController.do?doDelRef&id="+selectNode.uuid;
jQuery.ajax({
async : false,
cache:false,
type: 'GET',
dataType : "json",
url: url,//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
if(data.success){
orgTree.removeNode(selectNode);
$("#listFrame").attr("src", "about:blank");
}else{
alert(data.msg);
}
}
});
}else{
return;
}
});
};
//选择资源节点。
function getSelectNode() {
orgTree = $.fn.zTree.getZTreeObj("orgTree");
var nodes = orgTree.getSelectedNodes();
var node = nodes[0];
return node;
};