Jquery easyui Tree的简单使用

发布时间：2020-12-16 09:00:23 所属栏目：asp.Net 来源：网络整理

导读：Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需

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> ='columnManage.aspx'>栏目管理></="ContentManage.aspx">内容管理="RecycleContent.aspx">内容回收站span>资源管理>
                        ul>
                            ="ResourceManage-0.aspx">CSS管理="ResourceManage-1.aspx">JS管理>模板管理>
                                ="ResourceManage-2.aspx">内容页模板管理="ResourceManage-3.aspx">栏目页模板管理>
                >

在浏览器中的效果：

，可以根据自己想要实现的样式，进行样式的调整，建议加页面内联样式或行内样式，不要直接修改easyui的css文件

动态数据Tree

动态数据tree前台html代码示例：
```
id="tt" class data-options="url:'/Handlers/getTypesNodeHandler.ashx'">
```
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  TreeModel
 6     {
 7         //节点id
 8         int id { get; set; }
 9 
10         节点显示的文本
11         string text { 12 
13         open 、closed
14         string state { get { return "closed"; } }
15     }
16 }

TreeModel

 2  System.Collections.Generic;
 System.Linq;
 System.Web;
 5 
 WebApplication1.Handlers
 7  8     /// <summary>
 9     /// Summary description for getTypesNodeHandler
10     </summary>
11      getTypesNodeHandler : IHttpHandler
12 13 
void ProcessRequest(HttpContext context)
        {
16             context.Response.ContentType = text/plain;
17             int parentId = 018             int.TryParse(context.Request[id"],out parentId);
19             List<Models.Category> types = null20             try
21             {
22                 判断父节点的值
23                 if (parentId > )
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 != 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                 42 43                     context.Response.Write("");
44 45             }
46             catch (Exception ex)
47 48                 new Common.LogHelper(typeof(getTypesNodeHandler)).Error(ex);
49                 context.Response.Write(error50 51         }
52 
53         bool IsReusable
54 55             get
56 57                 return true58 59 60 61 }

getTypesNodeHandler

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!