Tree - jQuery LigerUI API

jQuery LigerUI

previous page next page

参数列表

参数名 类型 描述 默认值
url String url null
data Object 数据 null
checkbox Bool 是否复选框 true
autoCheckboxEven Bool 复选框联动 true
parentIcon String 父节点图标 'folder'
childIcon String 子节点图标 'leaf'
textFieldName String 文本字段名 'text'
attribute Array 预加载的属性名 ['id', 'url']
treeLine Bool 是否显示连接线 true
nodeWidth Int 节点宽度 90
statusName String 状态名 '__status'
isLeaf Function 是否子节点的判断函数 null
single Bool 是否单选 false
idFieldName String ID字段名 null
parentIDFieldName String 父节点字段 'pid'
topParentIDValue String 顶级节点 0
slide Bool 是否显示动画 true
iconFieldName String 图标字段名 'icon'
nodeDraggable Bool 是否允许拖拽 false
nodeDraggingRender Function   null
btnClickToToggleOnly Bool 是否点击展开/收缩 按钮时才有效 true
needCancel Bool 已选的是否需要取消操作 null
ajaxType String 远程加载方式 post
render Function 自定义函数 null
selectable Function 可选择判断函数 null
isExpand Object  是否展开 
            1,可以是true/false 
            2,也可以是数字(层次)N 代表第1层到第N层都是展开的，其他收缩
            3,或者是判断函数 函数参数e(data,level) 返回true/false


        优先级没有节点数据的isexpand属性高,并没有delay属性高 		null
delay Object 是否延迟加载 
            1,可以是true/false 
            2,也可以是数字(层次)N 代表第N层延迟加载 
            3,或者是字符串(Url) 加载数据的远程地址
            4,如果是数组,代表这些层都延迟加载,如[1,2]代表第1、2层延迟加载
            5,再是函数(运行时动态获取延迟加载参数) 函数参数e(data,level),返回true/false或者{url:...,parms:...}


        优先级没有节点数据的delay属性高 		 
idField String id字段 2
parentIDField String parent id字段，可用于线性数据转换为tree数据 2
enabledCompleteCheckbox Bool 是否启用半选择  
iconClsFieldName String 附加图标的class后缀，比如.l-tree-icon-xx可自定义css样式 null

parentIDFieldName参数 示例：

 1  var data = [];
 2               
 3             data.push({ id: 1, pid: 0, text: '1' });
 4             data.push({ id: 2, pid: 1, text: '1.1' });
 5             data.push({ id: 4, pid: 2, text: '1.1.2' });
 6             data.push({ id: 5, pid: 2, text: '1.1.2' });      
 7 
 8             data.push({ id: 10, pid: 8, text: 'wefwfwfe' });
 9             data.push({ id: 11, pid: 8, text: 'wgegwgwg' });
10             data.push({ id: 12, pid: 8, text: 'gwegwg' });
11 
12             data.push({ id: 6, pid: 2, text: '1.1.3', ischecked: true });
13             data.push({ id: 7, pid: 2, text: '1.1.4' });
14             data.push({ id: 8, pid: 7, text: '1.1.5' });
15             data.push({ id: 9, pid: 7, text: '1.1.6' });
16 
17             $("#tree1").ligerTree({  
18             data:data, 
19             idFieldName :'id',
20             parentIDFieldName :'pid'
21             }
22             );

isExpand参数 示例：

 1  $("#tree1").ligerTree({ 
 2                 nodeWidth: 200,
 3                 data : createData(),
 4                 checkbox: true,
 5                 idFieldName: 'id', 
 6                 isExpand: false, 
 7                 slide: false 
 8             });
 9               
10 
11             $("#tree2").ligerTree({
12                 nodeWidth: 200,
13                 data: createData(),
14                 checkbox: true,
15                 idFieldName: 'id',
16                 isExpand: true,
17                 slide: false
18             });
19 
20             $("#tree3").ligerTree({
21                 nodeWidth: 200,
22                 data: createData(),
23                 checkbox: true,
24                 idFieldName: 'id',
25                 isExpand: 2,
26                 slide: false
27             });
28 
29             $("#tree4").ligerTree({
30                 nodeWidth: 200,
31                 data: createData(),
32                 checkbox: true,
33                 idFieldName: 'id',
34                 isExpand: function (e)
35                 {
36                     var data = e.data; 
37                     return data.index % 2 == 0;
38                 },
39                 slide: false
40             });
41 
42             var data5 = createData();
43             data5[2].isExpand = true;
44             $("#tree5").ligerTree({
45                 nodeWidth: 200,
46                 data: data5,
47                 checkbox: true,
48                 idFieldName: 'id',
49                 isExpand: false,
50                 slide: false
51             });

delay参数 示例：

 1    $("#tree2").ligerTree({
 2                 nodeWidth: 200,
 3                 data: createData(),
 4                 checkbox: true,
 5                 idFieldName: 'id',
 6                 delay: true,
 7                 slide: false
 8             });
 9 
10             $("#tree3").ligerTree({
11                 nodeWidth: 200,
12                 data: createData(),
13                 checkbox: true,
14                 idFieldName: 'id',
15                 delay: 2,
16                 slide: false
17             });
18 
19             $("#tree4").ligerTree({
20                 nodeWidth: 200,
21                 data: createData(),
22                 checkbox: true,
23                 idFieldName: 'id',
24                 delay: function (e)
25                 {
26                     var data = e.data; 
27                     return data.index % 2 == 0;
28                 },
29                 slide: false
30             });
31 
32             var data5 = createData();
33             data5[0].delay = true;
34             $("#tree5").ligerTree({
35                 nodeWidth: 200,
36                 data: data5,
37                 checkbox: true,
38                 idFieldName: 'id',
39                 delay: false,
40                 slide: false
41             });
42 
43  $("#tree1").ligerTree({
44                 nodeWidth: 300,
45                 url: 'treeDeptData.ashx?type=company',
46                 isLeaf : function(data)
47                 {
48                     if (!data) return false;
49                     return data.type == "employee";
50                 },
51                 delay: function(e)
52                 {
53                     var data = e.data;
54                     if (data.type == "company")
55                     {
56                         return { url: 'treeDeptData.ashx?type=deptment&prev=' + data.id }
57                     }
58                     if (data.type == "deptment")
59                     {
60                         return { url: 'treeDeptData.ashx?type=employee&prev=' + data.id }
61                     }
62                     return false;
63                 },
64                 checkbox: true,
65                 idFieldName: 'id', 
66                 slide: false
67             });

previous page start next page