概要
用jQuery EasyUIde 树形菜单控件在页面上以一个树形结构显示分层数据，我们就来看下这些树形结构是如何显示的。
分类
关于树形结构显示的内容有两种，一种是显示的内容直接来自于前台页面也就是固定的文本，另一种是来自于数据库，将数据库里的内容进行提取在页面进行显示。
第一种
我们先来看第一种将数据直接写到前台的方法，我们先来看下效果。
接下来我们来看下代码的实现：
这一种就是将页面的文字直接显示到到前台，一般可以用来做静态网页时来用。
第二种
将数据库中的文本获取到前台进行显示，这里需要说下的是，关于前台的树加载的文本是有固定的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 |
}] |
下面就来看下的的实现过程，在这里我们使用了一般处级程序与前台进行交互，所以我们先来看下我们的前台与一般应用程序的交互：
先来看前台的代码：
在url里写的就是我们一般处级程序的名称，我们就是通过url这里与一般处级程序进行交互的，现在我们来看一般处理程序的代码：
关于如何从数据库获取出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 |
}
|
下面我们就来看下我们的效果图：
到这里我们通过一般处级程序将数据库获取的DataTable转化为我们页面需要的固定格式的Json数据并在前台显示就搞定了。
总结
上述两种，一种是显示的固定的文本，一种是显示的数据库的文本。第一种显示方法简单，缺点就是不能很方便的进行变换内容，第二种是可以动态的加载树，可以针对需要随时来变，虽然第二种比第一种复杂，但优点也是显而易见的。