EasyUI - Tree 树组件

效果:

数据库设计:

使用的数据:

  • 其中的字段,是跟据要生成的树节点的属性定义的。
  • text:代表要显示的字段名称。
  • state:是否是目录节点。
  • iconCls:节点的图标是什么。
  • url:跳转的链接。

生成的数据:

html代码:

    <ul id ="tree"></ul>

JS代码:

    <script type="text/javascript">
        $(function () {
            $(‘#tree‘).tree({
                url: ‘../Json/treejson.ashx‘,
                lines: true,

                /*
                // * 作用:加载所有数据 *
                onLoadSuccess: function (node, data) {
                    //如果data有值
                    if (data) {
                        //遍历data中的值
                        $(data).each(function (index, value) {
                            //判断当前值得state是否为closed.
                            //如果是则代表下面依然有值,然后根据此次的id值,进行加载数据
                            if (this.state == "closed") {
                                $(‘#tree‘).tree(‘expandAll‘);
                            }
                        });
                    }
                },*/

                //鼠标单击事件
                onClick: function (node) {
                    //获取是否有下一级目录,true为没有,false为有
                    var flag = $(‘#tab‘).tree(‘isLeaf‘,node.target);
                    if (flag) {
                        alert(node.url);
                    }
                },

            });
        })
    </script>

后台使用的/treejson.ashx代码:

using EasyUI.Tools;
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;

namespace EasyUI.Json
{
    /// <summary>
    /// treejson 的摘要说明
    /// </summary>
    public class treejson : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            int id = 0;

            if (context.Request["id"] != "")
            {
                id = Convert.ToInt32(context.Request["id"]);
            }

            #region SQLHelper运行有问题,待改进,此时使用手动数据连接代码。

            //SQLHelper运行有问题,待改进,此时使用手动数据连接代码。
            DataTable dt = new DataTable();
            string connectstring = ConfigurationManager.ConnectionStrings["ConString"].ToString() ;
            SqlConnection con = new SqlConnection(connectstring);
            con.Open();
            SqlDataAdapter adp = new SqlDataAdapter("select id, text, state from Tb_category where pid = " + id + " ", con);
            adp.Fill(dt);
            con.Close();

            #endregion

            string json = DatatableToJson.ToJson(dt);//将DataTable数据生成Json数据。

            context.Response.Write(json);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
时间: 2024-10-21 19:22:06

EasyUI - Tree 树组件的相关文章

.NET easyUI tree树状结构

简单的制作后台制作写一个json(string类型)格式 public partial class goodstype_type : System.Web.UI.Page { public string datalist = "",tree=""; goodstypeManage bll = new goodstypeManage(); goodstype model = new goodstype(); protected void Page_Load(objec

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>

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

JQuery Easy Ui (Tree树)详解(转)

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

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

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

递归和循环---从EasyUI Tree 发现自己的硬伤

前一阵子,朋友托我帮忙用vb.net写一个数独游戏,我当时的第一个想法---万能的互联网肯定有资源,肯定有人写---当然这是必须的---我站在巨人的肩膀上帮朋友完成代码---但是我突然觉得自己站在巨人这么高的肩膀上太高耸,想要找一下脚踏实地的感觉,所以我想自己写写,看看能不能写出来,结果就是------我压根没有思路. 对,毫不夸张,无从下手. 更深刻的一件事就是项目中用的的树状结构(easyui tree 实现),同样是根据数据库动态生成,我站在巨人的肩膀上,看着网上类似的datatable转

GUI树组件,表格

树组件首先要new一个JTree,再加结点,然后添加到 JScrollPane JTree tree1=new JTree(); //.......添加节点 add(new ScrollPane(tree1) 添加节点 DefaultMutableTreeNode root=new DefaultMutableTreeNode("dongxi")//后面的是备注 DefaultMutableTreeNode root=new DefaultMutableTreeNode(new Goo

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

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

HT for Web的HTML5树组件延迟加载技术实现

HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的等待时间,让页面的加载更加流畅,增强用户体验. 进入正题,今天用来做演示的Demo是,客户端请求服务器读取系统文件目录结构,通过HT for Web的HTML5树组件显示系统文件目录结构. 首先,我们先来设计下服务器,这次Demo的服务器采用Node.js,用到了Node.js的express.so