ztree插件简单使用

导入js文件和css文件

<script type="text/javascript" src="js/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/zTree/jquery.ztree.excheck-3.5.js"></script>

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

 

html代码

<div class="tree" style="height: 500px; overflow: auto; float: left; width: 20%">
      <input type="hidden" id="fznamehide"/>
      <div class="clearfix">
      </div>
      <ul id="tree" class="ztree"></ul>
</div>

js脚本

 

var vAddNodeId;//新增节点ID
 var vParentId;//父节点ID
 var vNodeSel = '<%=strRootNodeId%>'; //选中的节点ID

 var setting = {
   view : {
    dblClickExpand : false,
    showLine : true,
    removeHoverDom: removeHoverDom,
    addHoverDom: addHoverDom,
    selectedMulti : false
        },
     check: {
     enable: false
    },
   data : {
     simpleData : {
     enable : true,
     idKey : "id",                               //子节点
     pIdKey : "pId",                           //父节点
     rootPId : "0"                               //根节点
    }
   },
   edit: {                                          //树形结构可编辑
    enable: true,
     showRemoveBtn: showRemoveBtn,
    showRenameBtn: showRenameBtn,
    renameTitle: "编辑分组名称",
    removeTitle: "删除分组"
   },
   async: {
     enable: true,
     type:"post",
     url:getUrl,                                //获取数据url
     autoParam:["id"],
     otherParam:{"rootNodeId":'<%=strRootNodeId%>'}
    },
   // 回调函数
   callback : {
    onClick : function(event, treeId, treeNode, clickFlag) {
     vNodeSel = treeNode.id;
     vParentId = treeNode.pId;
     $("#tableMain").dataTable().fnDraw();
    },
    onAsyncSuccess:zTreeOnAsyncSuccess,
    //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
    onAsyncError : zTreeOnAsyncError,
   }
  };

 

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
   //设置新增节点为选中状态
   if(vAddNodeId != ''){
    var node = treeObj.getNodeByParam("id", vAddNodeId, null);
    treeObj.selectNode(node,false);
    vAddNodeId = '';
   }
   //初始化树默认根节点为选中
   if(vNodeSel == '<%=Tool.ROOT_NODE_ID%>'){
    var node = treeObj.getNodeByParam("id", vNodeSel, null);
    treeObj.selectNode(node,false);
   }
  }
  
  function getUrl(treeId, treeNode){
   return 'message/MessAnalysis_getTeamTreeInfo';
  }
  
  // 加载错误提示
  function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
   alert("加载错误：" + XMLHttpRequest);
  };
  function addHoverDom(treeId, treeNode) {
  //根目录才显示新增按钮
  if(treeNode.id != 1){   
   return ;
  }
  var sObj = $("#" + treeNode.tId + "_span");
  if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
  
   var vSelectNode = treeObj.getSelectedNodes();     
      var vselSel = vSelectNode[0].id; //当前标记为选中的节点
  
  if (btn) btn.bind("click", function(){
    var vselNodes = treeObj.getSelectedNodes();   //当前标记为选中的节点   
       vParentId = vselNodes[0].id;
       if( vParentId !=1){
        $(".ui-dialog:eq(6) .ui-dialog-buttonpane button:first").addClass("btn btn-success");
     $(".ui-dialog:eq(6) .ui-dialog-buttonpane button:first").html("<i class='icon-ok icon-white'></i>&nbsp;确定");      
        $("#dialog-addalert" ).dialog( "open" );       
     return ;
    } 
  });
  };
  function removeHoverDom(treeId, treeNode) {
   console.log("remove   " + "#addBtn_"+treeNode.id);
   $("#addBtn_"+treeNode.tId).unbind().remove();
  };

  $.fn.zTree.init($("#tree"), setting);                                  //初始化ztree
  treeObj = $.fn.zTree.getZTreeObj("tree");