ztree插件学习

该插件不需要通过递归创造一遍树形结构，只要把父子id弄好，加上一个属性判断是否是父ID直接使用。

html代码：

1

 <div class="zTreeDemoBackground left">

2

      <ul id="treeDemo" class="ztree"></ul>

1

<script>

2

  var setting = {

3

        check: {

4

            enable: true,

5

            chkStyle: "checkbox"

6

        },

7

        data: {

8

            simpleData: {

9

                enable: true,

10

                idKey: "id",

11

                pIdKey: "pid",

12

            },

13

            key:{

14

                name: 'menuName'

15

            }

16

        },

17

        callBack: {

18

​

19

        }

20

    };

21

    var managerTreeData = function(){

22

        var _d;

23

        $.ajax({

24

            url:'/sys/menu/getMenuByManager',

25

            dataType:'json',

26

            async: false,

27

            success:function(data){

28

                _d =  data;

29

            }

30

        });

31

        return _d;

32

    };

33

    var defaultRoleTreeData=function(){

34

        var _d,sysRoleId=$("input[name='data.sysRoleId']").val();

35

​

36

        $.ajax({

37

            url:'/sys/menu/getMenuByRoleId',

38

            data:{"sysRoleId":sysRoleId},

39

            dataType:'json',

40

            async: false,

41

            success:function(data){

42

                _d =  data;

43

               console.log(_d);

44

            }

45

        });

46

        return _d;

47

    }

48

​

49

    $(document).ready(function(){

50

        $.fn.zTree.init($("#treeDemo"), setting, managerTreeData());

51

​

52

        /*设置当前角色所有对应的权限为选中状态*/

53

        var defaultRoleTreeDatas=defaultRoleTreeData();

54

        for(var data in defaultRoleTreeDatas){

55

            alert(data);

56

            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

57

            var node = treeObj.getNodeByParam("id", data, null);

58

            if(node!=null){

59

                treeObj.checkNode(node, true, true);

60

            }

61

        }

62

    });

63

</script>

1、设置初始化选中节点：

chkStyle = "checkbox" 时，显示 checkbox 选择框
chkStyle = "radio" 时，显示 radio 选择框

1

 var setting = {

2

        check: {

3

            enable: true,

4

            chkStyle: "checkbox"  //要想初始化选中状态必须要有这个属性，不然没法选中

5

        },

6

   //先不看下面代码

7

       /* data: {

8

            simpleData: {

9

                enable: true,  //表示使用简单的数据模式 id,pid设置.（false表示使用标准的数据模式json.)

10

                idKey: "id",

11

                pIdKey: "pid",

12

            },

13

            key:{

14

                name: 'menuName'

15

            }

16

        },

17

        callBack: {

18

​

19

        }*/

20

    };

21

​

22

​

1

​

2

​

3

//设置当前节点为选中状态  

4

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

5

//

6

var node = treeObj.getNodeByParam("id", nodeId, null);

7

if(node!=null){

8

    treeObj.checkNode(node, true, true); 

9

 //勾选 或 取消勾选 单个节点方法checkNode（需要勾选 或 取消勾选 的节点数据node，表示勾选节点true，进行父子节点的勾选联动操作true）

10

​

11

 //

12

}

2、初始化ztree生成树

1

  $(document).ready(function(){

2

        $.fn.zTree.init($("#treeDemo"), setting, managerTreeData());

3

//树jQuery对象，setting属性，初始化树的数据（简单格式的）

4

   })

3、默认展开所有的节点

1

 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

2

 treeObj.expandAll(true);