jQuery EasyUI 数据树控件(Tree)的简单使用实例

1,首先写了一个辅助的Model(CityEasyTree EasyUI Tree需要的的数据格式要符合json。标明 EasyUI Tree的API 中常用属性)

 1 public class CityEasyTree
 2     {
 3        /// <summary>
 4        /// id
 5        /// </summary>
 6         public int id { get; set; }
 7        /// <summary>
 8        /// 节点名称
 9        /// </summary>
10         public string text { get; set; }
11        /// <summary>
12        /// 是否展开
13        /// </summary>
14         public string state { get; set; }
15        /// <summary>
16        /// 图标
17        /// </summary>
18         public string iconCls { get; set; }
19        /// <summary>
20        /// 子节点集合
21        /// </summary>
22         public List<CityEasyTree>  children { get; set; }
23         public CityEasyTree( )
24         {
25             this.state = "open";
26             this.children = new List<CityEasyTree>();
27         }
28         /// <summary>
29         /// 常用构造函数
30         /// </summary>
31         public CityEasyTree(string id, string text, string iconCls = "", string state = "open", List<CityEasyTree>  listChildren =null)
32             : this()
33         {
34             this.id =int.Parse(id);
35             this.text = text;
36             this.state = state;
37             this.iconCls = iconCls;
38             this.children = listChildren;
39         }
40        /// <summary>
41         /// 常用构造函数
42         /// </summary>
43         public CityEasyTree(int id, string text, string iconCls = "", string state = "open")
44             : this()
45         {
46             this.id = id;
47             this.text = text;
48             this.state = state;
49             this.iconCls = iconCls;
50         }
51     }

CityEasyTree 说明:一个简单的实现(没有实现attributes,url)

  • id:节点ID,对加载远程数据很重要。
  • text:显示节点文本。
  • state:节点状态,‘open‘ 或 ‘closed‘,默认:‘open‘。在设置为‘closed‘的时候,当前节点的子节点将会从远程服务器加载他们。
  • attributes: 被添加到节点的自定义属性。(Url属性就在这个里面,用Dictionary可以方便的扩展attribute。)
  • children: 一个节点数组声明了若干节点。(这个是子节点,它拥有所有的父节点属性)

符合Tree 的json数据格式查看EasyuI API ( 官网文档:http://www.jeasyui.net/plugins/185.html

2,从数据库得到的DataTable转成成EasyUI所需要的对象结合,下面也是本文的核心代码。

    

/// <summary>
        /// 获取父节点
        /// </summary>
        /// <param name="parentId"></param>
        /// <returns></returns>
        public List<CityEasyTree> GetTreeParentList(int parentId)
        {
            List<CityEasyTree> treeParentNodeList = new List<CityEasyTree>();
            //从数据库获取相应数据
            List<City> list = new CityBLL().GetCityByParentId(parentId);
            foreach (City info in list)
            {
                string infoName = info.CityName;
                treeParentNodeList.Add(new CityEasyTree(info.PkId.ToString(), info.CityName, "open", "icon-user", GetTreeChildNodeList(info.PkId)));
             }
            return treeParentNodeList;
        }
        /// <summary>
        /// 获取所有的子节点(递归)
        /// </summary>
        /// <param name="parentId"></param>
        /// <returns></returns>
        public List<CityEasyTree> GetTreeChildNodeList(int parentId)
        {
            List<CityEasyTree> treeChildNodeList = new List<CityEasyTree>();
            //从数据库获取相应数据
            List<City> list = new CityBLL().GetCityByParentId(parentId);
            foreach (City info in list)
            {
                string infoName = info.CityName;
                treeChildNodeList.Add(new CityEasyTree(info.PkId.ToString(), info.CityName, "open", "icon-user", GetTreeChildNodeList(info.PkId)));
            }
            return treeChildNodeList;
        }
        /// <summary>
        /// json 数据装换
        /// </summary>
        /// <param name="obj"></param>
        /// <returns></returns>
        protected string ToJson(object obj)
        {
            string jsonData = (new JavaScriptSerializer()).Serialize(obj);
            return jsonData;
        }

3,在Controller中调用GetTreeParentList方法,获得对象集合,然后把集合转变成json对象(提示一下,后台所有的转换,都是为了返回EasyUI所需要的Json格式。需要注意的是:Json格式中,所有属性的字母都是小写的,所以在封装JsonTree对象时记得小写,避免不必要的麻烦。

/// <summary>
        ///   获取treejson 数据  post  GetTreeJson
        /// </summary>
        /// <param name="deptId"></param>
        /// <returns></returns>
        public ActionResult GetTreeJson(int parentId)
        {
            List<CityEasyTree> treeList = new List<CityEasyTree>();
            treeList = GetTreeParentList(parentId);
            string json = ToJson(treeList);
            reurn Content(json.ToLower());
        }

4,前台界面就比较简单了(根据EasyUI API 初始一个tree 官网文档:http://www.jeasyui.net/plugins/185.html   需要引用相关js这里就不说了)

<ul id="tt" class="easyui-tree">

</ul>
<script type="text/javascript">
    $(function () {
        LoadData(0);
    });
    function LoadData(parentId) {
        $(‘#tt‘).tree({
            url: "/AricleCatetary/GetUserTreeJson?parentId=" + parentId,
        });
    }
</script>

 5,实现效果如下图。

  

6,最后附上 脚本,核心源码和开发过程中需要的工具(链接: https://pan.baidu.com/s/1dFk1YO5 密码: k3zk)。

     还要感谢 "身未动、心已远"(http://www.cnblogs.com/yonex/p/3379362.html) 博主的技术支持

 

    

时间: 2024-11-09 06:19:02

jQuery EasyUI 数据树控件(Tree)的简单使用实例的相关文章

基于MVC+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

(转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面

Jquery easyui的validatebox控件和正则表达式

Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email.是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性.验证可以实现在数据层和业务规则层,但应当在表现层进行前端的"保护",因此,我们通常在UI层为用户提供友好的.可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证.在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证.那现在说的Validatebox是怎么实现验证的呢? 仔细观察j

(八)树控件(Tree Control),标签控件(tab control)

树控件 基于对话框创建工程 // 01_TreeCtrlDlg.cpp : 实现文件 // #include "stdafx.h" #include "01_TreeCtrl.h" #include "01_TreeCtrlDlg.h" #include "afxdialogex.h" #ifdef _DEBUG #define new DEBUG_NEW #endif // 用于应用程序“关于”菜单项的 CAboutDlg

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

转自:http://www.cnblogs.com/sunjie9606/archive/2012/09/13/2683636.html 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等 处理方法: 在html片段加载完毕后使用 Js代码 $.parser.parse(context) 即可重新渲染. 实现原理: 首先附上jquery.parser.js的源码 Js代码 (function($){ $.parser

jquery easyui datebox 时间控件默认显示当前日期的实现方法

添加如下代码,其中startTime为<input >中id值  <script>//得到当前日期 formatterDate = function(date) { var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate(); var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0&qu

jQuery的时间datetime控件在AngularJs中使用实例

百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder="开始日期" style="width:156px;" class="form-control date-picker" data-date-format="yyyy-mm-dd" type="text">

雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格(DataGrid) 创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中. url="datagrid24_getdata.php" toolbar="#tb" title="Load Data" iconCls="icon