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 = ;

            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 树组件

最新文章

热门文章