码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI - Tree 树组件

时间:2015-11-05 13:34:36      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

效果:

技术分享

 

数据库设计:

技术分享

 

使用的数据:

  • 其中的字段,是跟据要生成的树节点的属性定义的。
  • 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;
            }
        }
    }
}

 

EasyUI - Tree 树组件

标签:

原文地址:http://www.cnblogs.com/KTblog/p/4939086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!