zTree的理解

来源：互联网发布：ubuntu 卸载qq 编辑：程序博客网时间：2024/05/16 02:26

<span style="font-size:14px;">var setting = {async: {enable: true,      //可编辑（false不可编辑）contentType: "application/json",  //ajax提交参数的数据类型url: "http://host/getNode.php",   //ajax获取数据的地址autoParam: ["id"],        //异步加载时需要自动提交父节点属性的参数</span><h3>             <!-- Array(String) 格式说明</h3><div class="desc"><p>                1、将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"]</p><p>                2、可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"]</p><p>               --></p><p>               dataType:"text",   //Ajax 获取的数据类型           <pre><code>               otherParam: ["id", "1", "name", "test"], //Ajax 请求提交的静态参数键值对,可以为空[ ](默认值)，               如果有 key，则必须存在 value。 例如：[key, value].               直接用 JSON 格式制作键值对，例如：{ key1:value1, key2:value2 }</code>               type:"post",//Ajax 的 http 请求模式               dataFilter:ajaxDataFilter     //用于对 Ajax 返回数据进行预处理的函数

}
callback:{//回调函数，太多了，举几个我这两天遇到的例子
beforeClick: zTreeBeforeClick, //用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作

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' onfocus='this.blur();'></span>"+
                "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='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自己写代码

1 0