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;
            }
        }
    }
}
复制代码

 

posted on   ultrastrong  阅读(498)  评论(0编辑  收藏  举报

编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示