<返回上一级
jQuery EasyUI-树状控件Tree的使用
EasyUI

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

分类

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

第一种

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

 

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

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                 <ulidulid="AssessmeObjectTree"class="easyui-tree"
06                     <li
07                        <span>考核对象</span
08                         <ul
09                             <lidata-optionslidata-options="state:'closed'"
10                                <span>县市区</span
11                                 <ul
12                                     <li
13                                        <span>县市区定量</span
14                                     </li
15                                     <li
16                                        <span>县市区定性</span
17                                     </li
18     
19                                 </ul
20                             </li
21                             <li
22                                <span>市直单位</span
23                                 <ul
24                                     <li
25                                        <span>市直单位定量</span
26                                     </li
27                                     <li
28                                        <span>市直单位定性</span
29                                     </li
30                                 </ul
31                             </li
32                             <li
33                                <span>开发区</span
34                                 <ul
35                                     <li
36                                        <span>开发区数据</span
37                                     </li
38                                 </ul
39                             </li
40                             <li
41                                <span>干部</span
42                                 <ul
43                                     <li
44                                        <span>干部定量</span
45                                     </li
46                                     <li
47                                        <span>干部定性</span
48                                     </li
49                                 </ul
50                             </li
51     
52                         </ul
53                     </li
54                 </ul
55     
56     
57             </div
58         </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