官方文档:http://www.treejs.cn/v3/api.php
官方案例:http://www.treejs.cn/v3/demo.php#_101
官方案例代码下载地址:
这个地址是在官方案例界面右下角
官方有使用案例,这里就不多说了
接下来就是我自己的使用效果:
<SCRIPT type="text/javascript">
var setting = {
data: {
//true / false 分别表示 使用 / 不使用 简单数据模式
simpleData: {
enable: true
}
},
//从后台获取数据
async: {
enable: true,
url:"modelStrucController/getData.do?version=${version}&modelCode=${modelCode}&type=${type}",
autoParam:["id"],//自动提交的参数(可提交多个)
// otherParam:{"otherParam":"zTreeAsyncTest"}
dataFilter: filter //异步返回后经过Filter
},
//页面上的显示效果,节点的增删改按钮
view: {
addHoverDom: addHoverDom, //当鼠标移动到节点上时,显示用户自定义控件
removeHoverDom: removeHoverDom //离开节点时的操作
// fontCss: getFontCss //个性化样式
},
//设置开启编辑效果
edit: {
enable: true,//单独设置为true时,可加载修改、删除图标
showRemoveBtn: true,
showRenameBtn: true
},
//设置回调函数,每一个回调函数得加入这里才起效
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop,
onRename:onRename,
onRemove:onRemove,
onDrop:zTreeOnDrop,
onDrag:zTreeOnDrag,
onDblClick: zTreeOnDblClick, //双击
beforeRemove: zTreeBeforeRemove
}
};
//点击删除前触发
function zTreeBeforeRemove(treeId, treeNode) {
var root = treeNode.isRoot;
if(root == true){
console.log("根节点,不能删除!!")
$.messager.alert('Warning','根节点,不能删除!!');
//tip("根节点,不能删除!!")
return false;
}
}
//双击触发
function zTreeOnDblClick(event, treeId, treeNode) {
// alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
//console.log($("#tree").val())
var root = treeNode.isRoot;
if(root == true){
return
}
//var iframe = $("#myIframe")[0].contentWindow;
//console.log(iframe.$("#indexName").val())
var treeObj = $.fn.zTree.getZTreeObj("tree");
var nodes = treeObj.transformToArray(treeObj.getNodes());
console.log(nodes)
$.post("modelStrucController/getCode.do",{id:treeNode.id},function(result){
//console.log(result)
if(result != "null"&& result != ""){
//console.log("sss")
$("#myIframe").attr("src","indexModelController.do?goUpdate&indexCode="+result);
}else{
$("#myIframe").attr("src","");
}
//tip(result)
});
};
//刚拖住的时候触发
function zTreeOnDrag(event, treeId, treeNodes) {
//alert(treeNodes.length);
// console.log(event)
// console.log(event)
console.log("OnDrag")
console.log(treeNodes)
};
//拖拽松开鼠标触发 , moveType 移动后的位置,prev前面,next下面,inner里面
function zTreeOnDrop(event, tId, treeNodes, targetNode, moveType) {
console.log("OnDrop")
console.log(tId)
console.log(treeNodes)
console.log(targetNode)
console.log(moveType)
switch (moveType) {
case "prev":
//console.log("1")
/* for(var index in treeNodes){
$.post("modelStrucController/updateData.do",{id:treeNodes[index].id,name:treeNodes[index].name,pId:targetNode.pId},function(result){
console.log(result)
tip(result)
});
}
break; */
case "next":
//console.log("2")
for(var index in treeNodes){
$.post("modelStrucController/updateData.do",{id:treeNodes[index].id,name:treeNodes[index].name,pId:targetNode.pId},function(result){
console.log(result)
tip(result)
});
}
break;
case "inner":
//console.log("3")
for(var index in treeNodes){
$.post("modelStrucController/updateData.do",{id:treeNodes[index].id,name:treeNodes[index].name,pId:targetNode.id},function(result){
console.log(result)
tip(result)
});
}
break;
default:
console.log("4")
break;
}
// alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
};
//重命名节点
function onRename(e, treeId, treeNode){
console.log("onRename")
//console.log(treeId)
//console.log(treeNode)
$.post("modelStrucController/updateData.do?version=${version}&modelCode=${modelCode}&type=${type}",{id:treeNode.id,name:treeNode.name,
indexName:treeNode.name,/* version:treeNode.version,type:treeNode.type,modelCode:treeNode.modelCode, */
pId:treeNode.pId},function(result){
//console.log(result)
var json = JSON.parse(result)
console.log(json.attributes.code)
// treeNode.code=json.attributes.code
console.log(result)
tip(json.msg)
});
//console.log(isCancel)
}
//删除节点
function onRemove(e, treeId, treeNode) {
//需要对删除做判定或者其它操作,在这里写~~
console.log(treeNode)
$.post("modelStrucController.do?doDel&version=${version}",{id:treeNode.id,name:treeNode.name,pId:treeNode.pId},function(result){
console.log(result)
var json = JSON.parse(result)
tip(json.msg)
});
}
/* 获取返回的数据,进行预操作,treeId是treeDemo,异步加载完之后走这个方法,responseData为后台返回数据 */
function filter(treeId, parentNode, responseData) {
// responseData = responseData.jsonArray;
console.log("filter")
if (!responseData){
return null;
}
return responseData;
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.addNodes(treeNode, {id:guid().replaceAll("\\-",""), pId:treeNode.id, name:"new node" + (newCount++),
target:"myIframe",version:"${version}",type:"${type}"});
return false;
});
};
//生成uuid
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
//replaceAll的另一种写法,其实都差不多
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
} else {
return this.replace(reallyDo, replaceWith);
}
}
function uuid(len, radix) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [], i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
} else {
// rfc4122, version 4 form
var r;
// rfc4122 requires these characters
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
// Fill in random data. At i==19 set the high bits of clock sequence as
// per rfc4122, sec. 4.1.5
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random()*16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
//实现树的数据结构,也就是后来把list数据封装成这样的结构即可展现树
var zNodes =[
{ id:1, pId:0, name:"zTree Home", url:"http://www.treejs.cn/", target:"_blank"},
{ id:2, pId:0, name:"zTree in Google", url:"http://code.google.com/p/jquerytree/", target:"_blank"},
{ id:3, pId:0, name:"zTree in Iteye", url:"http://ztreeapi.iteye.com/", target:"_blank"},
{ id:4, pId:0, name:"Nothing...", url:"", target:"_blank", click:"alert('我是不会跳转的...');"}
];
function beforeDrag(treeId, treeNodes) {
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
return targetNode ? targetNode.drop !== false : true;
}
$(document).ready(function(){
//设置树的初始化代码
zTree=$.fn.zTree.init($("#tree"), setting);
/* var node = zTree.getNodes();
var nodes = zTree.transformToArray(node);
var tree = $.fn.zTree.getZTreeObj('tree');
console.log(node)
console.log(nodes)
console.log(tree) */
});
</SCRIPT>
<div class="easyui-panel" >
<div class=" left" >
<ul id="tree" class="ztree" style="width:30%"></ul>
</div>
<div class="right " style="width:70%;height: 100%">
<iframe name="myIframe" id="myIframe" style="width:80%;height: 100%" frameBorder="0"></iframe>
</div>
</div>
效果: