.net+easyui实现异步树形菜单

HTML代码:

<div class="easyui-layout" style="width:100%;height:935px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:180px;">
<ul class="easyui-tree" data-options="url:'/json/tree_data1.json',method:'get',animate:true,dnd:true"></ul>
</div>
<div data-options="region:'west',split:true" title="菜单项" style="width:180px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
                <div title="考试项目维护" data-options="selected:true" style="padding:10px;">
                    <ul class="easyui-tree" id="menutree"></ul>
                </div>
<div title="考试模块" style="padding:10px;">
<ul class="easyui-tree"> 
                        <li data-options="state:'closed'">
                            <span>我的考试</span>
                            <ul>
                                <li>
                                    <span>考试任务</span>
                                </li>
                                <li>
                                    <span>考试记录</span>
                                </li>
                            </ul>
                        </li>
</ul>
</div>
<div title="权限模块" style="padding:10px">
<ul class="easyui-tree">
                        <li>
                            <span>权限管理</span>
                        </li>
</ul>
</div>
</div>  
</div>
<div data-options="region:'center'">
<div class="easyui-tabs" data-options="fit:true,border:false">
<div title="欢迎使用" data-options="href:'_content.html'" style="padding:10px"></div>
</div>
</div>

</div>


Jquery代码:

<script type="text/javascript">
        $(function () {
            $("#menutree").tree({
                url: '/testClass.ashx',               
            });
        });
    </script>


后端代码(json转换:http://www.cnblogs.com/myloveblogs/articles/5010647.html):


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;


namespace FineUITest
{
    /// <summary>
    /// testClass 的摘要说明
    /// </summary>
    public class testClass : IHttpHandler
    {
        DAL.TestDAL dal = new DAL.TestDAL();//MenuTree类
        public void ProcessRequest(HttpContext context)
        {
            context.Response.Write(GetModel());//返回json字符串
        }
        /// <summary>
        /// 返回JSON实体
        /// </summary>
        /// <returns></returns>
        public string GetModel()
        {
            DataTable dt = new DataTable();
            dt = dal.GetList("1=1").Tables[0];//这个是查询数据库(存储整个树的这个表)所有数据
            string strJson = TableToEasyUITreeJson(dt, "ParentID", "0", "ID", "Name");
            return strJson;
        }


        /// <summary>
        /// 递归将DataTable转化为适合jquery easy ui 控件tree parentid
        /// </summary>
        /// <param name="dt">要转化的表</param>
        /// <param name="parentid">父节点字段值</param>
        /// <param name="topValue">根节点值,没有 可以输入为0</param>
        /// <param name="valueField">关键字字段名称</param>
        /// <param name="TextField">要显示的文本字段</param>
        /// <returns></returns>
        public string TableToEasyUITreeJson(DataTable dt, string parentid, string topValue, string valueField, string TextField)
        {
            StringBuilder sb = new StringBuilder();
            string filter = String.Format(" {0}='{1}' ", parentid, topValue);//获取顶级目录.
            DataRow[] drs = dt.Select(filter);
            if (drs.Length < 1)
            {
                return "";
            }
            else
            {
                sb.Append("[");
                foreach (DataRow dr in drs)
                {
                    string pcv = dr[valueField].ToString();
                    sb.Append("{");
                    sb.AppendFormat("\"id\":\"{0}\",", dr[valueField].ToString());
                    string filter_parent = String.Format(" {0}='{1}' ", parentid, pcv);//获取父级目录.
                    DataRow[] drs_parent = dt.Select(filter_parent);
                    if (drs_parent.Length < 1)
                    {
                        sb.AppendFormat("\"text\":\"{0}\"", dr[TextField].ToString());
                    }
                    else
                    {
                        sb.AppendFormat("\"text\":\"{0}\",", dr[TextField].ToString());
                        sb.AppendFormat("\"children\":{0}", TableToEasyUITreeJson(dt, parentid, pcv, valueField, TextField));
                    }
                    if (sb.ToString().EndsWith(","))
                    {
                        sb.Remove(sb.Length - 1, 1);
                    }
                    sb.Append("},");
                }
                if (sb.ToString().EndsWith(","))
                {
                    sb.Remove(sb.Length - 1, 1);
                }
                sb.Append("]");
            }
            return sb.ToString();
        }        


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}


效果图:


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值