# 方法示例
# 说明
- 使用初始化之后的返回值来调用方法,即
var el=eleTree({...});el.getChecked(...);
- 除了以get开头的方法,如getChecked/getRadioChecked/getAllNodeData/getClipboardData,其它所有方法均可链式调用,即el.on(...).setChecked(...).setRadioChecked(...)等
# 示例
<select class="sel">
<option value="" selected>请选择</option>
<option value="getChecked">checkbox获取所有选中项</option>
<option value="setChecked">checkbox选中桃源路</option>
<option value="setChecked_2">checkbox先清空其他选中项,再选中桃源路</option>
<option value="unChecked">checkbox只取消湖东路的选中</option>
<option value="unChecked_2">checkbox取消所有节点选中</option>
<option value="setAllChecked">checkbox选中所有节点</option>
<option value="reverseChecked">checkbox反选所有节点</option>
<option value="getRadioChecked">radio获取所有选中项</option>
<option value="setRadioChecked">radio选中桃源路</option>
<option value="setRadioChecked_2">radio先清空其他选中项,再选中桃源路</option>
<option value="unRadioChecked">radio只取消湖东路的选中</option>
<option value="unRadioChecked_2">radio取消所有节点选中</option>
<option value="expandAll">展开所有项</option>
<option value="unExpandAll">合并所有项</option>
<option value="append">安徽省添加子节点</option>
<option value="append_2">最外层添加节点</option>
<option value="updateKeySelf">更新淮北市节点</option>
<option value="remove">删除湖东路</option>
<option value="insert">在合肥市前面添加节点</option>
<option value="insert_2">在合肥市后面添加节点</option>
<option value="edit">编辑湖东路</option>
<option value="reload">重新渲染树节点</option>
<option value="search">搜索带有“路”字的节点</option>
<option value="getAllNodeData">获取所有节点数据</option>
<option value="copy">复制和县,并粘贴到江苏省</option>
<option value="cutPaste">剪贴和县,并粘贴到江苏省</option>
<option value="getClipboardData">获取剪贴板数据</option>
<option value="setHighlightNode">设置湖东路节点高亮</option>
<option value="expandNode">展开马鞍山市及其父节点</option>
<option value="unExpandNode">合并马鞍山市及其父节点</option>
</select>
<div class="eletree2"></div>
<script>
var index = 0;
var el = eleTree({
el: '.eletree2',
url: '/eleTree/json/1.json?v=2.0.12',
highlightCurrent: true,
showCheckbox: true,
showRadio: true,
imgUrl: "/eleTree/images/",
icon: {
fold: "fold.png",
leaf: "leaf.png",
checkFull: ".eletree_icon-check_full",
checkHalf: ".eletree_icon-check_half",
checkNone: ".eletree_icon-check_none",
dropdownOff: ".eletree_icon-dropdown_right",
dropdownOn: ".eletree_icon-dropdown_bottom",
loading: ".eleTree-animate-rotate.eletree_icon-loading1",
},
})
var methods = {
getChecked: function() {
alert(JSON.stringify(el.getChecked()))
},
setChecked: function() {
el.setChecked(["001002002002"], false)
},
setChecked_2: function() {
el.setChecked(["001002002002"])
},
unChecked: function() {
el.unChecked(["001002002003"])
},
unChecked_2: function() {
el.unChecked()
},
setAllChecked: function() {
el.setAllChecked()
},
reverseChecked: function() {
el.reverseChecked()
},
getRadioChecked: function() {
alert(JSON.stringify(el.getRadioChecked()))
},
setRadioChecked: function() {
el.setRadioChecked(["001002002002"], false)
},
setRadioChecked_2: function() {
el.setRadioChecked(["001002002002"])
},
unRadioChecked: function() {
el.unRadioChecked(["001002002003"])
},
unRadioChecked_2: function() {
el.unRadioChecked()
},
expandAll: function() {
el.expandAll()
},
unExpandAll: function() {
el.unExpandAll()
},
append: function() {
el.append("001",[
{
label: "池州市" + index++,
id: "池州市",
isOpen: true,
children: [
{
label: "贵池区" + index++,
id: "贵池区",
}
]
}
])
},
append_2: function() {
el.append("", [
{
label: "浙江省" + index++,
id: "浙江省",
isOpen: true,
children: [
{
label: "杭州市" + index++,
id: "杭州市",
}
]
}
])
},
updateKeySelf: function() {
el.updateKeySelf("001001",{
label: "淮北市111",
disabled: true,
checked: true
})
},
remove: function() {
el.remove(["001002002003"])
},
insert: function() {
el.insert("001003", [
{label: "蚌埠市" + index++, id: "蚌埠市"}
])
},
insert_2: function() {
el.insert("001003", [
{label: "阜阳市" + index++, id: "阜阳市"}
], "after")
},
edit: function() {
el.edit("001002002003")
},
reload: function() {
el.reload()
},
search: function() {
el.search("路", function(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
})
},
getAllNodeData: function() {
alert(JSON.stringify(el.getAllNodeData()))
},
copy: function() {
el.copy("001002003").paste("003")
},
cutPaste: function() {
el.cutPaste("001002003").paste("003")
},
getClipboardData: function() {
alert(JSON.stringify(el.getClipboardData()))
},
setHighlightNode: function() {
el.setHighlightNode("001002002003")
},
expandNode: function() {
el.expandNode(["001002"], true)
},
unExpandNode: function() {
el.unExpandNode(["001002"], true)
},
}
document.querySelector(".sel").onchange = function() {
this.value && methods[this.value] && methods[this.value]()
}
</script>
1
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
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
显示代码