zTree增删改查

此文章仅供个人学习使用,所以写的比较简陋,如果对各位有所帮助,我深感荣幸

zTree增删改查

首先三个引用

//核心引用

    <link rel="stylesheet" href="../lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">//css插件

zTree想要实现需要三个注意点
**第一:**加载树的容器,class必须是ztree
<ul id="treeDemo" class="ztree"></ul>
第二设置setting属性

var setting={
       data:{
                simpleData:
                {
                        enable:true,//表示数据使用简单数据格式,具体官方api有定义
                         idKey:"id",//对应表内编号
                         pIdKey:"pid",//对应表内外键
                             rootPid:'' 
                  }      
   }
}
//配置完setting之后,需要对zNodes进行配置,但是我第三步做了一个小修改,直接从数据库取值绑定,并不需要重新定义zNodes,可以直接在ajax内进行绑定

**第三:**绑定数据

    $.ajax({
        type: "Get", url: "http://localhost:52533/api/Si/getztree",
        success: function (data) {
            $.fn.zTree.init($("#treeDemo"), setting, data);
        },
    });

注意:第二步第三步都需要放在文本就绪函数里,否则无效## 此文章仅供个人学习使用,所以写的比较简陋,如果对各位有所帮助,我深感荣幸

zTree增删改查

首先三个引用

//核心引用 //css插件

zTree想要实现需要三个注意点
**第一:**加载树的容器,class必须是ztree
<ul id="treeDemo" class="ztree"></ul>
第二设置setting属性

var setting={
       data:{
                simpleData:
                {
                        enable:true,//表示数据使用简单数据格式,具体官方api有定义
                         idKey:"id",//对应表内编号
                         pIdKey:"pid",//对应表内外键
                             rootPid:'' 
                  }      
   }
}
//配置完setting之后,需要对zNodes进行配置,但是我第三步做了一个小修改,直接从数据库取值绑定,并不需要重新定义zNodes,可以直接在ajax内进行绑定

**第三:**绑定数据

    $.ajax({
        type: "Get", url: "***",//这里的url是你需要取值方法的路径
        success: function (data) {
            $.fn.zTree.init($("#treeDemo"), setting, data);
        },
    });

注意:第二步第三步都需要放在文本就绪函数里,否则无效

接下来是删除的操作
在zTree的操作中，删除可以说是非常简单的操作，只需要两个回调函数就可以完成
首先在zTree中定义了一个属性，当鼠标移到节点上时，会显示修改和删除按钮，这里的两个按钮是zTree插件定义好的，如果有需要别的可以自己写自定义控件，然后添加到zTree就可以，话不多说，接下来上代码

首先是自定义控件以及官方控件的显示和隐藏方法

   var setting={       
        data:{           
               simpleData:       
                          {  
                           enable:true,//表示数据使用简单数据格式,具体官方api有定义       
                           idKey:"id",//对应表内编号      
                           pIdKey:"pid",//对应表内外键        
                           rootPid:''         
                            }        
             },    
      edit: {
             enable: true,                     //控件显示的前提条件是这里必须为true
             showRemoveBtn: true,    //true表示显示删除按钮
             showRenameBtn: false,   //false表示不显示修改按钮
             removeTitle: "删除节点"
    },


    view: {                
                addHoverDom: addHoverDom,      //鼠标移入，显示用户自定义控件，：之前的单词是官方定义好 的，    
                                              ：之后的addHoverDom是自己写的函数，跟普通的js函数用法一样，  
                                              但是这里只需要将函数名称写过来即可，之后的回调函数意义相同， 不做一一讲解     
                emoveHoverDom: removeHoverDom    //鼠标移除，隐藏自定义控件


//鼠标移入，显示用户自定义控件
function addHoverDom(treeId, treeNode) {
       var aObj = $("#" + treeNode.tId + "_a");
       if ($("#diyBtn_" + treeNode.id).length > 0) return;
       var editStr = "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id+ "' title='" + treeNode.name + "'  
       onfocus='this.blur();'>+</button>";
       aObj.append(editStr);
       var btn = $("#diyBtn_" + treeNode.id);
       if (btn) btn.bind("click", function () {
                        AddStageChildr();
                       $("#txthidden").val(treeNode.id);
                  });
};

接下来是删除的回调函数，分为删除前和删除后
当zTree没有和数据库交互，单纯的操作数据库的时候，每当点击删除控件的时候，zTree会自动调用删除前的回调函数，也就是beforeRemove，根据函数返回来的bool执行判断是否将节点删除，当返回值为True的时候，会将zTree节点移除，然后触发onRemove，
当与数据库交互的时候，主要就是在onRemove里写js代码，当beforeRemove为true的时候，删除节点，然后触发onRemove，这时候在onRemove里写删除的代码，就可以实现zTree的节点删除，并且数据库交互成功

    callback:  //这里需要卸载setting里，和view以及data同级
    {
        beforeRemove: zTreeBeforeRemove,  //删除前
        onRemove: zTreeOnRemove          //删除后
    },

function zTreeBeforeRemove(treeId, treeNode) {
    var IsUse = true;
    if (confirm("节点删除不可恢复，是否继续？")) {
        return IsUse;
    }
    return false;
}



  function zTreeOnRemove(event, treeId, treeNode) {
      当此函数执行之后，可以通过treeNode获取所需要的id值或者Name值，treeNode包含了所要删除节点的所有信息，
      比 如treeNode.Id代表了此节点的id值,
      得到删除所需要的信息之后就可以进行与控制器的交互
  }