EasyUI tree绑定数据的几种方式_.NET_编程开发_程序员俱乐部

没想到easyui对json数据格式要求的那么严谨，折腾了半天

第一种直接使用<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数据格式是有效的，但是方法二却绑不上：

[{ 'text':'.Net','state':'closed','children':[{'text':'C#'},{'text':'asp.Net'}]},{'text':'Java'}]

 

第四种：与第二种js绑定其实都是一样的只是写在元素标签上了而已

 <ul class=" easyui-tree" data-options=" url:'JsonHandler.ashx'">

JsonHandler.ashx是asp.net中的一般处理文件，输出json串，当然这个返回的接送数据也要和第二种的json一致，不然还是绑不上

相关参考http://www.zi-han.net/case/easyui/datagrid&tree.html#tree

效果图：