Question

EasyUI tree绑定数据的几种方式

Answer 1

第一种直接使用<ul>标签方式，很容易就加载出来了：

class="code_img_closed" src="/Upload/Images/2013073018/0015B68B3C38AA5B.gif" alt="" />logs_code_hide('f6255e07-2992-44d7-8440-82bf2e943e6c',event)" src="/Upload/Images/2013073018/2B1B950FA3DF188F.gif" alt="" />
<ul id="tt" class="easyui-tree">
<li>
<span>编程语言</span>
<ul>
<li>
<span>C#</span>
<ul>
<li>
<span><a href="#">框架</a></span>
</li>
<li>
<span>Asp.Net</span>
</li>
<li>
<span>Winform</span>
</li>
</ul>
</li>
<li>
<span>Java</span>
</li>
<li>
<span>C++</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
View Code
第二种，在js中绑定：

<ul id="myTree"></ul>
$('#myTree').tree({
method: 'get',
url: 'tree_data1.json'

});
注意：easyui tree获取数据的HTTP方法默认是post，但是用post的时候却报了谓词错误， 所以指定了get ----》需要查查，还不了解因果。

json的数据格式：

1 [{
2 "id":1,
3 "text":"My Documents",
4 "children":[{
5 "id":11,
6 "text":"Photos",
7 "state":"closed",
8 "children":[{
9 "id":111,
10 "text":"Friend"
11 },{
12 "id":112,
13 "text":"Wife"
14 },{
15 "id":113,
16 "text":"Company"
17 }]
18 },{
19 "id":12,
20 "text":"Program Files",
21 "children":[{
22 "id":121,
23 "text":"Intel"
24 },{
25 "id":122,
26 "text":"Java",
27 "attributes":{
28 "p1":"Custom Attribute1",
29 "p2":"Custom Attribute2"
30 }
31 },{
32 "id":123,
33 "text":"Microsoft Office"
34 },{
35 "id":124,
36 "text":"Games",
37 "checked":true
38 }]
39 },{
40 "id":13,
41 "text":"index.html"
42 },{
43 "id":14,
44 "text":"about.html"
45 },{
46 "id":15,
47 "text":"welcome.html"
48 }]
49 }]
View Code
　　直接copy 的有点长

三，用data直接绑json：

$.ajax({
type: 'GET',
url: 'tree_data1.json',
success: function (result) {
var myJson = eval('(' + result + ')');
$('#myTree').tree({
data: myJson
});
}
});
这种方式绑定下面的这种json数据格式是有效的，但是方法二却绑不上：