你的位置:首页 > ASP.net教程

[ASP.net教程]Jquery easyui Tree的简单使用


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,结构不确定,动态数据,数据需要从服务器端获取

 

  1. 静态数据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文件

  2. 动态数据Tree

    动态数据tree前台html代码示例:

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

    url代表的是从服务器端获取tree的数据的处理程序路径

  经过使用 Fiddle调试可以发现每次请求时,请求参数为“id”,值为选择节点的id

 

 

服务器端处理程序getTypesNodeHandler.ashx示例代码:     

 

  1.  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 、closed14     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 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         //判断父节点的值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         //判断是否有值,有值的话先转换为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         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 }

    getTypesNodeHandler