WebTree下拉树
概述
一般用于左树右网格/右表单
初始化加载WebTree树及常用事件
自定义初始化加载:
例子:
加载通用方法:init_tree_layout(_treeContainerId,_treeXmlDataId);
xml对象
<xml id="TreeItem1_Tree_xml"><!--[CDATA[<TreeItem Field="TreeItem1">{ "Root":
{ "children": [
{"id": "063b70d9-ed98-4896-a9a1-e2c9e695e594", "leaf": "true", "text": "物料19" },
{"id": "0b92be0d-ffd8-4e13-8fc1-a99371198fa6", "leaf": "true", "text": "物料2" },
{"call": "1", "child": "1", "children": [ {"call": "1", "child": "1", "children": [ {"id": "1FF090D0-C158-890C-6F60-6148C5521B31", "leaf": "true", "text": "物料18 新建子项1 新建子项1" } ], "id": "684C613B-2E6C-0647-7DA8-9DAD3C8F5317", "isExpand": "1", "open": "1", "text": "物料18 新建子项1", "XMLload": "1" } ], "id": "13534f49-aedb-4e5f-b667-7736f4f94468", "isExpand": "1", "open": "1", "text": "物料18", "XMLload": "1" },
{"id": "173f4892-0a27-4935-8ce0-1dc6f31f4a16", "leaf": "true", "text": "物料1" },
{"id": "21d25539-3907-45ce-99ae-0ac54eece34f", "leaf": "true", "text": "物料6" },
{"id": "2e24bb5e-2eb6-4240-ab7b-261c22f00bb5", "leaf": "true", "text": "物料17" },
{"id": "2e4f60ea-255c-4378-819a-5cf4918f795b", "leaf": "true", "text": "物料8" },
{"id": "3279796b-052b-47dd-8bc1-31e3a8f0ebc1", "leaf": "true", "text": "物料4" } ], "id": "0", "showRoot": "false", "text": "根" }}</TreeItem>]]--></xml
init_tree_layout("TreeItem1_Tree", "TreeItem1_Tree_xml"); //TreeItem1_Tree为对应的树容器ID
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
常用JS:
段折叠
<script language="javascript" type="text/javascript">
//==树操作相关==
//UI/Tree/WebTree.js WMTree
//取得树对象
var treePageObj=wm.c.getTree();
//刷新
treePageObj.refresh();
//刷新单个列表树
var options = { field: "", type: "json", data: null };
treePageObj.refreshItem(options);
//列表树对象
var field="";
var treeObj = treePageObj.getNamedItem(field);
//相关方法(WMTree也就是WebTree.js)
//生成
treeObj.render();
//重新生成
treeObj.refresh();
//展开所有
treeObj.expandAll();
//折叠所有
treeObj.collapseAll();
//勾选所有
treeObj.setCheckAll();
//取消勾选所有
treeObj.setUnCheckAll();
//折叠所有
//level展开级别 state:false 收缩,默认展开
treeObj.expandLevel(level, state);
//折叠所有
treeObj.collapseAll();
//取得勾选的Id集合数组
var name = "";
var idArr = treeObj.getChecked(name); //name为空时取id
//取得子节点
var itemId="";
var node = treeObj.getNodeById(itemId);
//展开到当前节点
var id=node.id;
var attrName = "myName";
//取得节点的属性 如id,text等
var otherAttr=node.attr(AttrName);
//展开到当前节点
treeObj.setFocusNode(node);
var attributes = { id: "", text: "" };
var parentId = "";
//添加子节点
node.appendChild(attributes,parentId);
//只为js智能提示 var treeItem = new WMTree();
//取得选中节点
var focusNode = treeObj.focusNode;
var node = focusNode;
//取得指定节点的子节点及子子节点
var subNodes = treeObj.getAllSubNodes(node)
//只为js智能提示 var node = new WMTreeNode();
//取得指定节点的子节点
var childNodes = node.childNodes;
//取得子节点数
var childCount = childNodes.length;
//判断是否根节点
var isRoot = node.isRoot()
//判断是否是叶子节点
var isRoot = node.isLeaf()
//包含子节点
var allChild = true;
//删除指定节点
node.removeChild(childNodes[0], allChild);
//包含节点缓存
var allCache = true;
//删除指定节点
node.removeNode(allCache);
//删除节点
node.removeChild(childNodes[0]);
//勾选状态 0:不勾选 1:勾选 2:半勾选 3:勾选并勾选子级
var checkState = 1;
//删除节点
node.setCheck(checkState);
//选中节点
node.select();
//不选中节点
node.unselect();
//收缩
node.unselect();
//展开
node.expand();
var title = "tooltip";
//设置tooltip
node.setTitle(title);
////事件
//配置Events/Event/@Name treeItem.addListener("onRowDblClicked",funName);
//beforeclick
//click
//beforedblclick
//dblclick
//beforechecked
//checked
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
###focusNode
概述
- 当前选中节点对象
示例
返回值:WebTree选中的节点对象
var treePageObj=wm.c.getTree(); //树页面对象 var webTree = treePageObj.getNamedItem(field); //树对象 var curNode=webTree.focusNode; //选中节点对象 var curNodeId = curNode.attr("id"); //选中节点对象的Id var curNodeText = curNode.attr("text"); //选中节点对象的Text var curNodePId = curNode.attr("pid"); //选中节点对象的PId
1
2
3
4
5
6
###setFocusNode
概述
- 展开到当前节点
参数
- node
示例
var treePageObj=wm.c.getTree(); //树页面对象 var webTree = treePageObj.getNamedItem(field); //树对象 var node = webTree.getNodeById(itemId); //对应Id的节点对象 webTree.setFocusNode(node); //展开到当前节点
1
2
3
4
###wm.c.getTree
概述
- 树页面对象
示例
树页面对象
var treePageObj=wm.c.getTree();
###refresh
- 概述
- 重新生成树
- 示例
- 重新生成树
treeObj.refresh();
- 重新生成树
###expandAll
概述
- 展开所有
示例
展开所有
treeObj.expandAll();
###collapseAll
概述
- 折叠所有
示例
折叠所有
treeObj.collapseAll();
###setCheckAll
概述
- 勾选所有
示例
勾选所有
treeObj.setCheckAll();
###setUnCheckAll
概述
- 取消勾选所有
示例
取消勾选所有
treeObj.setUnCheckAll();
###expandLevel
概述
- level展开级别 state:false 收缩,默认展开
参数
- level:展开级别; state:false 收缩,默认展开
示例
//level展开级别 state:false 收缩,默认展开
treeObj.expandLevel(level, state);
###getCheckedNodes
概述
- 获得勾选或未勾选的集合
参数
- state:null||1 勾选,0未勾选。默认为获得勾选集合
示例
//获得勾选或未勾选的集合
var ckNodes = treeObj.getCheckedNodes(state);
###getChecked
概述
- 获得勾选集合对应参数的属性值集合
参数
- name:name为空时取id
示例
//获得勾选集合对应参数的属性值集合
treeObj.getChecked(name);
###getAllSubCheckedNodes
概述
- 取得指定节点下的勾选或未勾选的节点
参数
- curNode:指定节点,state:勾选(1||null)或未勾选(0)状态
示例
取得指定节点下的勾选或未勾选的节点
var ckNodes = treeObj.getAllSubCheckedNodes(curNode,state);
###appendChild
概述
- 新增节点
参数
- attributes:json格式节点信息,pid:父节点Id
示例
//新增节点
treeObj.appendChild(attributes,pid);
###getAllSubNodes
概述
- 取得指定节点下的子节点
参数
- curNode:指定节点
示例
//取得指定节点下的子节点
var ckNodes = treeObj.getAllSubNodes(curNode);
###removeChildById
概述
- 移出对应Id的子节点
参数
- id
示例
//移出对应Id的子节点
treeObj.removeChildById(id)
###removeNodeById
概述
- 移出对应Id的节点
参数
- id
示例
//移出对应Id的节点
treeObj.removeNodeById(id)
###swapNode
- 概述
- 交换节点
- 参数
- nodeA, nodeB
- 示例
treeObj.swapNode(nodeA, nodeB)
###upLevel
- 概述
- 上移一级
- 参数
- nodeA,nodeB
- 示例
- treeObj.upLevel(nodeA, nodeB);
###downLevel
- 概述
- 下移一级
- 参数
- nodeA, nodeB
- 示例
treeObj.downLevel(nodeA, nodeB);