jQuery EasyUI-Tree使用

 

引自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>
<span>考核对象</span>
<ul>
<lidata-optionslidata-options="state:'closed'">
<span>县市区</span>
<ul>
<li>
<span>县市区定量</span>
</li>
<li>
<span>县市区定性</span>
</li>

</ul>
</li>
<li>
<span>市直单位</span>
<ul>
<li>
<span>市直单位定量</span>
</li>
<li>
<span>市直单位定性</span>
</li>
</ul>
</li>
<li>
<span>开发区</span>
<ul>
<li>
<span>开发区数据</span>
</li>
</ul>
</li>
<li>
<span>干部</span>
<ul>
<li>
<span>干部定量</span>
</li>
<li>
<span>干部定性</span>
</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

}

     

 

 

 

下面我们就来看下我们的效果图：

 

 

到这里我们通过一般处级程序将数据库获取的DataTable转化为我们页面需要的固定格式的Json数据并在前台显示就搞定了。

 

 

总结

 

上述两种，一种是显示的固定的文本，一种是显示的数据库的文本。第一种显示方法简单，缺点就是不能很方便的进行变换内容，第二种是可以动态的加载树，可以针对需要随时来变，虽然第二种比第一种复杂，但优点也是显而易见的。