Jquery easyui Tree的簡單使用 - weihanli－IT工程師數位筆記本

文章出處

Jquery easyui Tree的簡單使用

Jquery easyui 是jQuery EasyUI是一組基于jQuery的UI插件集合，而jQuery EasyUI的目標就是幫助web開發者更輕松的打造出功能豐富并且美觀的UI界面。開發者不需要編寫復雜的javascript，也不需要對css樣式有深入的了解，開發者需要了解的只有一些簡單的html標簽。

Jquery easyui 官網：http://jeasyui.com/ ，中文網站：http://www.jeasyui.net/，jquery easyui 下載地址：http://jeasyui.com/download/index.php

在項目中有時需要頁面設計，不巧美工前端人員比較忙或者其他原因，造成敲代碼的程序猿不得不進行ui設計，此時可以嘗試easyui。

進入正題，本文分兩部分介紹easyui中tree的使用：

　　首先我們需要引用兩個文件一個是主題樣式css文件，一個是easyui核心js文件（easyui依賴jquery，如果沒有引用，需要添加引用）

　　在想要生成tree的ul加上class "easyui-tree"

1.靜態數據Tree，結構確定，數據是確定的，數據直接在html寫死的

2.動態數據Tree，結構不確定，動態數據，數據需要從服務器端獲取

靜態數據Tree

靜態數據tree代碼示例：

<ul class="easyui-tree" id="nav_ul">
                    <li><a href="default.aspx">信息管理</a> </li>
                    <li><a href='columnManage.aspx'>欄目管理</a></li>
                    <li><a href="ContentManage.aspx">內容管理</a></li>
                    <li><a href="RecycleContent.aspx">內容回收站</a></li>
                    <li><span>資源管理</span>
                        <ul>
                            <li><a href="ResourceManage-0.aspx">CSS管理</a></li>
                            <li><a href="ResourceManage-1.aspx">JS管理</a></li>
                        </ul>
                        <li><span>模板管理</span>
                            <ul>
                                <li><a href="ResourceManage-2.aspx">內容頁模板管理</a></li>
                                <li><a href="ResourceManage-3.aspx">欄目頁模板管理</a></li>
                            </ul>
                        </li>
                    </li>
                </ul>

在瀏覽器中的效果：，可以根據自己想要實現的樣式，進行樣式的調整，建議加頁面內聯樣式或行內樣式，不要直接修改easyui的css文件

動態數據Tree

動態數據tree前臺html代碼示例：
```
<ul id="tt" class="easyui-tree" data-options="url:'/Handlers/getTypesNodeHandler.ashx'"></ul>
```
url代表的是從服務器端獲取tree的數據的處理程序路徑

　　經過使用 Fiddle調試可以發現每次請求時，請求參數為“id”，值為選擇節點的id

服務器端處理程序getTypesNodeHandler.ashx示例代碼：　　　　

移除tree當前選擇項，當選中tree的某個節點時，對應節點會多一個class為“tree-node-selected ”的樣式，將這個樣式去掉就可以移除選擇的tree的選項

$(".tree-node-selected").removeClass("tree-node-selected");

 1 using System;
 2 
 3 namespace Models.FormatModel
 4 {
 5     public class TreeModel
 6     {
 7         //節點id
 8         public int id { get; set; }
 9 
10         //節點顯示的文本
11         public string text { get; set; }
12 
13         //open 、closed
14         public string state { get { return "closed"; } }
15     }
16 }

TreeModel

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace WebApplication1.Handlers
 7 {
 8     /// <summary>
 9     /// Summary description for getTypesNodeHandler
10     /// </summary>
11     public class getTypesNodeHandler : IHttpHandler
12     {
13 
14         public void ProcessRequest(HttpContext context)
15         {
16             context.Response.ContentType = "text/plain";
17             int parentId = 0;
18             int.TryParse(context.Request["id"], out parentId);
19             List<Models.Category> types = null;
20             try
21             {
22                 //判斷父節點的值
23                 if (parentId > 0)
24                 {
25                     //加載子級菜單
26                     types = CommonNews.Helper.OperateContext.Current.LoadSecondaryCategory(parentId);
27                 }
28                 else
29                 {
30                     //加載頂級菜單
31                     types = CommonNews.Helper.OperateContext.Current.LoadTopCategory();
32                 }
33                 //判斷是否有值，有值的話先轉換為tree模型再轉換為json輸出，沒有值直接輸出空字符串
34                 if (types != null)
35                 {
36                     //轉換為tree模型
37                     List<Models.FormatModel.TreeModel> tree = types.Select(t => new Models.FormatModel.TreeModel() { id = t.CategoryId, text = t.CategoryName }).ToList();
38                     //轉換為json格式數據輸出
39                     context.Response.Write(Common.ConverterHelper.ObjectToJson(tree));
40                 }
41                 else
42                 {
43                     context.Response.Write("");
44                 }
45             }
46             catch (Exception ex)
47             {
48                 new Common.LogHelper(typeof(getTypesNodeHandler)).Error(ex);
49                 context.Response.Write("error");
50             }
51         }
52 
53         public bool IsReusable
54         {
55             get
56             {
57                 return true;
58             }
59         }
60     }
61 }