本文共 3946 字,大约阅读时间需要 13 分钟。
var setting = { async: { enable: true, //可编辑(false不可编辑) contentType: "application/json", //ajax提交参数的数据类型 url: "http://host/getNode.php", //ajax获取数据的地址 autoParam: ["id"], //异步加载时需要自动提交父节点属性的参数} callback:{//回调函数,太多了,举几个我这两天遇到的例子 beforeClick: zTreeBeforeClick, //用于捕获单击节点之前的事件回调函数,并且根据返回值确定是否允许单击操作
dataType:"text", //Ajax 获取的数据类型
otherParam: ["id", "1", "name", "test"], //Ajax 请求提交的静态参数键值对,可以为空[ ](默认值), 如果有 key,则必须存在 value。 例如:[key, value]. 直接用 JSON 格式制作键值对,例如:{ key1:value1, key2:value2 }
type:"post",//Ajax 的 http 请求模式 dataFilter:ajaxDataFilter //用于对 Ajax 返回数据进行预处理的函数
beforeAsync:zTreeBeforeAsync, //用于捕获异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载
......此处省略很多,可以看zTree API(D://lucky/cctWeb/zTree----) } view:{ addHoverDom: addHoverDom , //用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮
请务必与 setting.view.removeHoverDom 同时使用;属于高级应用,使用时请确保对 zTree 比较了解。
removeHoverDom: removeHoverDom //
} }; function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span");// ( id+_span为树的样式id名) if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return; var addStr = "<span class='button edit' id='editBtn_" + treeNode.tId + "' title='add node' οnfοcus='this.blur();'></span>"+ "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' οnfοcus='this.blur();'></span>"; if(treeNode.level>=1)//(蓝色为样式,红色id,为了后面remove) sObj.after(addStr);//在鼠标扫过的后面加上编辑和增加按钮 var btn = $("#addBtn_"+treeNode.tId); if (btn) btn.bind("click", function(){//点击按钮 var addressName = getAddressName(treeNode); if(treeNode.level==0){ var s = connectionString(a1,treeNode,addressName); $("#formArea").html(s); }else if(treeNode.level==1){ var s = connectionString(a2,treeNode,addressName); $("#formArea").html(s); }else if(treeNode.level==2){ var s = connectionString(a3,treeNode,addressName); $("#formArea").html(s); }else if(treeNode.level==3){ var s = connectionString(a4,treeNode,addressName); $("#formArea").html(s); }else if(treeNode.level==4){ var s = connectionString(a5,treeNode,addressName); $("#formArea").html(s); }else if(treeNode.level==5){ var s = form2String(treeNode.id,addressName,treeNode.addressLevel+1); $("#formArea").html(s); } $("#addModal").modal(); return false; }); var editBtn = $("#editBtn_"+treeNode.tId); if (editBtn) editBtn.bind("click", function(){ var addressName = getAddressName(treeNode); if(treeNode.level==0){ $("#showArea").html(""); }else if(treeNode.level==1){ var s1 = getForm1String("省份",treeNode.name,treeNode.remarks,treeNode.id,treeNode.level+1,addressName); $("#showArea").html(s1); }else if(treeNode.level==2){ var s1 = getForm1String("市县",treeNode.name,treeNode.remarks,treeNode.id,treeNode.level+1,addressName); $("#showArea").html(s1); }else if(treeNode.level==3){ var s1 = getForm1String("行政区",treeNode.name,treeNode.remarks,treeNode.id,treeNode.level+1,addressName); $("#showArea").html(s1); }else if(treeNode.level==4){ var s1 = getForm1String("小区/街道",treeNode.name,treeNode.remarks,treeNode.id,treeNode.level+1,addressName); $("#showArea").html(s1); }else if(treeNode.level==5){ var s1 = getForm1String("单元",treeNode.name,treeNode.remarks,treeNode.id); $("#showArea").html(s1); } $("#editModal").modal();此id为模态框id return false; }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); $("#editBtn_"+treeNode.tId).unbind().remove(); };function ajaxDataFilter(treeId, parentNode, responseData) {//修改异步获取的name的值 if (responseData) { for(var i =0; i < responseData.length; i++) { responseData[i].name += "_filter";//replace } } return responseData;}; function zTreeBeforeClick(treeId, treeNode, clickFlag) {//禁止节点被选中 return (treeNode.id !== 1);}; function zTreeBeforeAsync(treeId, treeNode) {//禁止父节点为 1 的父节点进行异步操作 return (treeNode.id !== 1);}; 整棵树有很多很多的内容,要熟练应用的话就是学会根据API自己写代码
转载地址:http://lpiti.baihongyu.com/