jQuery EasyUI-Tree使用

浏览数：21 / 时间：2015年06月09日

引自http://www.open-open.com/lib/view/open1390877623289.html；

概要

用jQuery EasyUIde 树形菜单控件在页面上以一个树形结构显示分层数据，我们就来看下这些树形结构是如何显示的。

分类

关于树形结构显示的内容有两种，一种是显示的内容直接来自于前台页面也就是固定的文本，另一种是来自于数据库，将数据库里的内容进行提取在页面进行显示。

第一种

我们先来看第一种将数据直接写到前台的方法，我们先来看下效果。

接下来我们来看下代码的实现：

<%-- 树的加载 --%>
<divdata-optionsdivdata-options="region:‘west‘,split:true" title="定性指标体系"style="width: 200px;">
<divclassdivclass="easyui-accordion"data-options="fit:true,border:false">

<ulidulid="AssessmeObjectTree" class="easyui-tree">
<li>
考核对象
<ul>
<lidata-optionslidata-options="state:‘closed‘">
县市区
<ul>
<li>
县市区定量
</li>
<li>
县市区定性
</li>

</ul>
</li>
<li>
市直单位
<ul>
<li>
市直单位定量
</li>
<li>
市直单位定性
</li>
</ul>
</li>
<li>
开发区
<ul>
<li>
开发区数据
</li>
</ul>
</li>
<li>
干部
<ul>
<li>
干部定量
</li>
<li>
干部定性
</li>
</ul>
</li>

</ul>
</li>
</ul>

</div>
</div>

这一种就是将页面的文字直接显示到到前台，一般可以用来做静态网页时来用。

第二种

将数据库中的文本获取到前台进行显示，这里需要说下的是，关于前台的树加载的文本是有固定的Json格式的文本，也就是说我们从后台获取的数据库中的内容是不能直接显示的，是需要进行Json的转换，这样才可以使前台顺利的显示我们的文本。

我们先来看下页面树加载的Json格式的数据是什么样的：

  
    01
    [{    

    02
        "id": 1,    

    03
        "text": "Node 1",    

    04
        "state": "closed",    

    05
        "children": [{    

    06
            "id": 11,    

    07
            "text": "Node 11"   

    08
        },{    

    09
            "id": 12,    

    10
            "text": "Node 12"   

    11
        }]    

    12
    },{    

    13
        "id": 2,    

    14
        "text": "Node 2",    

    15
        "state": "closed"   

    16
       
    17
    }]

下面就来看下的的实现过程，在这里我们使用了一般处级程序与前台进行交互，所以我们先来看下我们的前台与一般应用程序的交互：

先来看前台的代码：

  
    01
    <%-- 树的加载 --%> 

    02
            <divdata-optionsdivdata-options="region:‘west‘,split:true"title="定性指标体系"style="width: 200px;"> 

    03
                <divclassdivclass="easyui-accordion"data-options="fit:true,border:false"> 

    04
        
    05
                    <ul id="TestTree"class="easyui-tree"data-options="url:‘SetCharacterizationTargetLevelTree.ashx/ProcessRequest‘,method:‘get‘,"> 

    06
        
    07
                    </ul> 

    08
        
    09
                </div> 

    10
            </div>

在url里写的就是我们一般处级程序的名称，我们就是通过url这里与一般处级程序进行交互的，现在我们来看一般处理程序的代码：

  
    01
    public void Query(HttpContext context) 

    02
           { 

    03
       
    04
       
    05
               //组合查询语句：条件+排序 

    06
               StringBuilder strWhere = newStringBuilder(); 

    07
       
    08
               //先获取关于班子干部字典表的datatable 

    09
               DataTable dtTreeInfo = newDataTable(); 

    10
               //通过调用D层信息获取 

    11
               DataSet ds =systemDictionaryBLL.GetListTree(""); 

    12
               dtTreeInfo = ds.Tables[0]; 

    13
       
    14
               //将字典表的信息与另一张表的信息一起组合转化成前台需要的json数据的格式 

    15
               string strJson =getJson(dtTreeInfo); 

    16
              context.Response.Write(strJson);//返回给前台页面 

    17
               context.Response.End(); 

    18
           }

关于如何从数据库获取出DataTable这里我们就不赘余了。

接下来是关于将DataTable转化为树识别的Json格式数据的过程,大家可以照着前面我们需要的Json数据格式来理解下面的代码：

  
    01
    /// <summary> 

    02
         /// 节点树的组合 

    03
         /// </summary> 

    04
         /// <paramname="dt">参数为DataTable</param> 

    05
         /// <returns></returns> 

    06
         publicstring getJson(DataTable dt) 

    07
         { 

    08
             StringBuilder json = newStringBuilder(); 

    09
             json.Append("["); 

    10
             foreach (DataRow dr in dt.Rows) 

    11
             { 

    12
       
    13
                json.Append("{\"id\":"+dr["id"].ToString()); 

    14
                json.Append(",\"text\":\""+dr["name"].ToString() + "\""); 

    15
                json.Append(",\"state\":\"closed\""); 

    16
       
    17
                 DataTable dtChildren = newDataTable(); 

    18
       
    19
       
    20
                 //调用D层方法获取dataTable 

    21
                 DataSet ds =characterizationTargetBLL.GetList(" type=‘"+dr["name"].ToString() + "‘"); 

    22
                 dtChildren = ds.Tables[0]; 

    23
       
    24
                 if (dt != null&&dt.Rows.Count > 0) 

    25
                 { 

    26
                    json.Append(",\"children\":["); 

    27
                    json.Append(DataTable2Json(dtChildren,Convert.ToInt32(dr["id"]))); 

    28
                     json.Append("]"); 

    29
                 } 

    30
                 json.Append("},"); 

    31
       
    32
             } 

    33
             if(dt.Rows.Count > 0) 

    34
             { 

    35
                 json.Remove(json.Length - 1,1); 

    36
             } 

    37
             json.Append("]"); 

    38
             returnjson.ToString(); 

    39
         }