Jquery easyui Tree的簡單使用

Jquery easyui Tree的簡單使用

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

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

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

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

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

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

1.靜態(tài)數(shù)據(jù)Tree，結(jié)構(gòu)確定，數(shù)據(jù)是確定的，數(shù)據(jù)直接在html寫死的

2.動態(tài)數(shù)據(jù)Tree，結(jié)構(gòu)不確定，動態(tài)數(shù)據(jù)，數(shù)據(jù)需要從服務器端獲取

1. 靜態(tài)數(shù)據(jù)Tree

   靜態(tài)數(shù)據(jù)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">內(nèi)容管理</a></li>                    <li><a href="RecycleContent.aspx">內(nèi)容回收站</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">內(nèi)容頁模板管理</a></li>                                <li><a href="ResourceManage-3.aspx">欄目頁模板管理</a></li>                            </ul>                        </li>                    </li>                </ul>

   在瀏覽器中的效果：，可以根據(jù)自己想要實現(xiàn)的樣式，進行樣式的調(diào)整，建議加頁面內(nèi)聯(lián)樣式或行內(nèi)樣式，不要直接修改easyui的css文件

2. 動態(tài)數(shù)據(jù)Tree

   動態(tài)數(shù)據(jù)tree前臺html代碼示例：

   <ul id="tt" class="easyui-tree" data-options="url:'/Handlers/getTypesNodeHandler.ashx'"></ul>

   url代表的是從服務器端獲取tree的數(shù)據(jù)的處理程序路徑

　　經(jīng)過使用 Fiddle調(diào)試可以發(fā)現(xiàn)每次請求時，請求參數(shù)為“id”，值為選擇節(jié)點的id

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

移除tree當前選擇項，當選中tree的某個節(jié)點時，對應節(jié)點會多一個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         //節(jié)點id 8         public int id { get; set; } 9 10         //節(jié)點顯示的文本11         public string text { get; set; }12 13         //open 、closed14         public string state { get { return "closed"; } }15     }16 }

 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 getTypesNodeHandler10     /// </summary>11     public class getTypesNodeHandler : IHttpHandler12     {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             try21             {22                 //判斷父節(jié)點的值23                 if (parentId > 0)24                 {25                     //加載子級菜單26                     types = CommonNews.Helper.OperateContext.Current.LoadSecondaryCategory(parentId);27                 }28                 else29                 {30                     //加載頂級菜單31                     types = CommonNews.Helper.OperateContext.Current.LoadTopCategory();32                 }33                 //判斷是否有值，有值的話先轉(zhuǎn)換為tree模型再轉(zhuǎn)換為json輸出，沒有值直接輸出空字符串34                 if (types != null)35                 {36                     //轉(zhuǎn)換為tree模型37                     List<Models.FormatModel.TreeModel> tree = types.Select(t => new Models.FormatModel.TreeModel() { id = t.CategoryId, text = t.CategoryName }).ToList();38                     //轉(zhuǎn)換為json格式數(shù)據(jù)輸出39                     context.Response.Write(Common.ConverterHelper.ObjectToJson(tree));40                 }41                 else42                 {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 IsReusable54         {55             get56             {57                 return true;58             }59         }60     }61 }