Jquery结合Ztree生成树

标签：

Ztree的api http://www.ztree.me/v3/api.php

Ztree的网上demo http://www.ztree.me/v3/demo.php#_102

Ztree的本地demo

1、添加样式、js

<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctx}/hollybeacon/resources/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="${ctx}/hollybeacon/resources/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">

2、html设置一个div、ul，注意ul的class是固定的ztree

<div class="treecontentpane">
     <ul id="busTree" class="ztree">
     </ul>
</div>

3、写js操作数据

 1、setting配置详情
var setting = {

    //显示
    view: {
             selectedMulti: false//在复制的时候，是否允许选中多个节点
       },
    //增删改，移动复制
    edit: {
     enable: true, //如果enable为flase，那么树就不能移动了
     showRemoveBtn: true, //是否显示树的删除按钮
     showRenameBtn: true, //是否显示数的重命名按钮
     isSimpleData : true, //数据是否采用简单 Array 格式，默认false
     treeNodeKey : "id",  //在isSimpleData格式下，当前节点id属性
     treeNodeParentKey : "parentId",//在isSimpleData格式下，当前节点的父节点id属性
     showLine : true, //是否显示节点间的连线
     //拖拽
     drag: {
      isCopy: true,//能够复制
      isMove: true//能够移动
     }
    },
    //异步
    async: {
     enable: true, //开启异步加载
     type:"get",
     url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest",
     contentType:"application/json",
     autoParam: ["id"], //异步加载数据，自动添加id参数
     dataFilter:filter //过滤，跟easy-ui中的loadFilter方法一样。
     //比如
    },
    //节点显示的值
    data:{
     key:{
      name:"codeName"
     },
     //
     simpleData:{
      enable:true,//如果为true，可以直接把从数据库中得到的List集合自动转换为Array格式。而不必转换为json传递
      idKey:"id",//节点的id
      pIdKey:"parentId",//节点的父节点id
      rootPId:null
     }
    },
    //回调函数
    callback: {
     beforeDrag: beforeDrag,//拖拽之前
     beforeDrop: beforeDrop,//拖拽结束
     onDrop: zTreeOnDrop,//拖拽结束后
     //onDrag: zTreeOnDrag,//拖拽的时候
     beforeRemove: zTreeBeforeRemove,//删除节点前
     onRemove: zTreeOnRemove,//节点删除之后
     beforeEditName: zTreeBeforeEditName,//进行编辑之前
     //beforeRename: zTreeBeforeRename,//重命名节点之前
     //onRename: zTreeOnRename,//重命名之后
     onClick: zTreeOnClick,//点击
     onRightClick: zTreeOnRightClick,//右键
     onAsyncSuccess: zTreeOnAsyncSuccess//异步加载
     //beforeExpand: beforeExpand,
     //onAsyncSuccess: onAsyncSuccess,
     //onAsyncError: onAsyncError
    }
   };
   //加载树的默认显示根节点，以及一级节点
    function zTreeOnAsyncSuccess(event, treeId, msg) {
      try {
       var nodes = zTree.getNodes();
       for(var i = 0;i<nodes.length;i++){
       //展开一级节点
        zTree.expandNode(nodes[i], true);
       }
      } catch (err) {
       holly.showError("数据异常", err);
      }
    }
    //设置一个标识，是为了解决点击的时候，执行异步。
    /* var firstAsyncSuccessFlag = 0;
    function zTreeOnAsyncSuccess(event, treeId, msg) {
     if (firstAsyncSuccessFlag == 0 || firstAsyncSuccessFlag == 1) {
      try {
       //调用默认展开第一个结点
       var selectedNode = zTree.getSelectedNodes();
       var nodes = zTree.getNodes();
       zTree.expandNode(nodes[0], true);
       var childNodes = zTree.transformToArray(nodes[0]);
       zTree.expandNode(childNodes[1], true);
       zTree.selectNode(childNodes[1]);
       var childNodes1 =  zTree.transformToArray(childNodes[1]);
       zTree.checkNode(childNodes1[1], true, true);
       firstAsyncSuccessFlag = 1;
      } catch (err) {
       holly.showError("数据异常", err);
      }
     }else{
      alert(111);
     }
     }*/
   //初始化树
   zTree = $.fn.zTree.init($("#busTree"), setting);
   //异步刷新
   zTree.reAsyncChildNodes(null, "refresh");

Jquery结合Ztree生成树

标签：

原文地址：http://my.oschina.net/u/2472104/blog/529055