.net+easyui实现异步树形菜单
<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;
}
}
}
}
效果图: