js插件ztree使用

最新给公司后台写了一个配置页面，在网上搜到一个js插件ztree，记录一下使用心得。

首先说一下ztree官网，好多方法我都是从官网api上学习的，官网地址http://www.treejs.cn/v3/main.php#_zTreeInfo

切入正题，我开始没有使用异步加载模式，但写时间发现编辑和添加后更新要使用的方法都是在异步加载模式的前提下，建议大家使用异步加载，方便后续操作。

首先是页面引用

<link href="zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="zTree/js/jquery.ztree.all.js" type="text/javascript"></script>

官方文档中用的jquery是1.4版本，我感觉有点低，用了稍微高点的版本。

js代码如下:

 1 var setting = {
 2             data: {
 3                 key: {
 4                     //将treeNode的ItemName属性当做节点名称
 5                     name: "appName"
 6                 },
 7                 simpleData: {
 8                     //是否使用简单数据模式
 9                     enable: true,
10                     //当前节点id属性  
11                     idKey: "appId",
12                     //当前节点的父节点id属性 
13                     pIdKey: "appFatherId",
14                     //用于修正根节点父节点数据，即pIdKey指定的属性值
15                     rootPId: "110"
16                 }
17             },
18             async: {
19                 enable: true,//是否启动异步加载模式
20                 url: "handler/DeployZTree.ashx",//一般处理程序得地址
21                 autoParam: ["appId"],//post请求时参数名
22                 otherParam: { "Type": "All" },//附加参数
23                 // dataType: "json",//默认text  
24                 type: "post",//默认post  
25                 dataFilter: addProperty  //异步返回后经过Filter,如果返回的数据不完整，并且修改后台sql语句比较麻烦，可以用这个方法在前台修改
26             },
27             view: {
28                 //是否支持同时选中多个节点
29                 selectedMulti: false
30             },
31             callback: {
32                 //onAsyncSuccess: zTreeOnAsyncSuccess,
33                 onMouseDown: onMouseDown  //鼠标点击节点事件
34             }
35         };

ztree基础配置