使用easyui的Tree 实现无限子节点绑定

来源：互联网发布：手机视频导入mac找不到编辑：程序博客网时间：2024/05/16 23:36

因项目需求，要实现tree结构显示数据，没法，只能硬上了。但有懒写CSS样式，同事推荐用easyui. 网络搜索，下载看看先。http://www.jeasyui.com/

果然和我想的一样，不是咱国民做的。

国人的创新都去哪了。

《---------------------------------------------------------------------------------》

我就不吐槽了。继续谈我们的

编程都懂英文吧，自己不懂的问你家邻居。功能很强大，随用随知道。我今天主要用Tree.

先看看效果图

我这是用中国城市表做的测试。多级绑定。可以无限制的分级。只要你不嫌卡。---------------> what? 卡？废话，你绑定那么多数据，不卡才怪。

一、先看前台页面：

引入js,css.你懂的。

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="CSS/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="CSS/themes/icon.css" />
<script type="text/javascript" src="JS/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
<script type="text/javascript" src="JS/ajax.js"></script>
  <script type="text/javascript" src="JS/CreateTree.js"></script>

页面内容

1
2
3
<body onload="GetTreeData()">
<ul id="ttree"></ul>
</body>

O><O 一段ul 就可以？？，，，，。。这就是工具的好处。简单迅速。工具决定效率。

二、 js 部分

CreateTree.js 是我自己写的js. 不想在html 页面上写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function GetTreeData()
        {
            $('#ttree').tree({  
            url: 'Ashx/Handler6.ashx',  
            loadFilter: function(data)
            {  
                if (data.d)
                {  
                   return data.d;  
                 }
                 else
                 {  
                  return data;  
                 }  
             }  
          });
｝

如你所见。我用是ashx 一般处理程序。其实用啥都一样，只要返回对象是json对象就可以了。( 啥是json??)..

三、后台代码

1
2
3
4
5
6
7
8
DataSet ds = DataHelper();
       if (ds != null && ds.Tables.Count > 0)
       {
           DataTable dt = ds.Tables[0];
           stringbuilder.Append(GetDataString(dt, "0"));
           stringbuilder = stringbuilder.Remove(stringbuilder.Length - 2, 2);
       }
       context.Response.Write(stringbuilder.ToString());

GetDataString方法

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
public string  GetDataString(DataTable dt, string id)
   {
       StringBuilder stringbuilder = new StringBuilder();
       DataRow[] CRow = dt.Select("City_ParId="+id);
       if (CRow.Length > 0)
       {  
           stringbuilder.Append("[");
           for (int i = 0; i < CRow.Length; i++)
           { 
               string chidstring=GetDataString(dt, CRow[i]["City_Id"].ToString());
               if (!string.IsNullOrEmpty(chidstring))
               {
                   stringbuilder.Append("{ \"id\":\"" + CRow[i]["City_Id"].ToString() + "\",\"text\":\"" + CRow[i]["City_Name"].ToString() + "\",\"state\":\"closed\",\"children\":");
                   stringbuilder.Append(chidstring);
               }
               else
               {
                  if (int.Parse(CRow[i]["City_Id"].ToString()) % 2 == 0)
                  {
                       stringbuilder.Append("{\"id\":\"" + CRow[i]["City_Id"].ToString() + "\",\"text\":\"<span style='color:red'>" + CRow[i]["City_Name"].ToString() + "</span>\"},");
                  }
                  else
                  {
                      stringbuilder.Append("{\"id\":\"" + CRow[i]["City_Id"].ToString() + "\",\"text\":\"" + CRow[i]["City_Name"].ToString() + "\"},");
                  }
               }
           }
           stringbuilder.Replace(',', ' ', stringbuilder.Length - 1, 1);
           stringbuilder.Append("]},");
       }
       return stringbuilder.ToString();
   }

我这是完成拼接。按照官网给的实例写的样式。为啥？？因为这样正确。

这是官网上给的，看看

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
[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-ok",
    "children":[{
        "id":2,
        "text":"File1",
        "checked":true
    },{
        "id":3,
        "text":"Folder2",
        "state":"open",
        "children":[{
            "id":4,
            "text":"File2",
            "attributes":{
                "p1":"value1",
                "p2":"value2"
            },
            "checked":true,
            "iconCls":"icon-reload"
        },{
            "id": 8,
            "text":"Folder3",
            "state":"closed",
            "children":[{
                "id":9,
                "text":"File31"
            },{
                "id":10,
                "text":"File32"
            }]
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "id":"j1",
        "text":"Java"
    },{
        "id":"j2",
        "text":"C#"
    }]
}]

基本就这。so easy..当然也可以加其他东西的。添加个右击啥的。

很简单。看实例。比这改改就可以了。因时间问题我写的有些简单。愿大家见谅。

我的百度博客 http://hi.baidu.com/flyredfly/item/f87b923e1ae3d683c3cf29e4