一:之前写了一遍关于从数据库取出动态菜单的文章,但是那个用着发现有弊端,立马换了一种方式,也是ASP.NET三层架构的。那么今天采用的方式大致思路是这样的,处理是在前端的,就是把所有的要查的数据查询出来,通过JavaScriptSerializer序列化,返回到前端,接受数据进行判断处理。
站在我业务逻辑的基础上写的
1、SQL语句:因为有两张表结构,我这里采用UNION ALL 查询,代码如下,
DAL:
/// <summary>
/// 获取一级CLASS分类
/// </summary>
/// <returns></returns>
public DataTable GetAllClassInfo()
{
string tsql = "SELECT Id, ClassName, ParentId FROM IT_CourseClass UNION ALL SELECT Id, CourseName ClassName, ClassId ParentId FROM IT_Course";
DataTable dtt = DBResHelper.ExecuteTable(CommandType.Text, tsql);
return dtt;
}
BLL:
public DataTable GetAllClassInfo( )
{
return ic.GetAllClassInfo();
}
忘了一个工厂类了,补上。
FACTORY:
public interface ICourse
{
DataTable GetAllClassInfo();
}
public sealed partial class DataAccess
{
public static ICourse CreateCourse()
{
string className = path + ".Course";
return (ICourse)Assembly.Load(path).CreateInstance(className);
}
}
UI:前端页面
布局:
<div class="lesson_classfiy_nav">
<ul id="navmenu">
</ul>
</div>
后台处理方法(核心代码):
/// <summary>
///AJAX方法供
/// </summary>
/// <returns></returns>
[WebMethod] //这个一定要加上,不然前端访问不到
public static string GetChildren()
{
DataTable dty = cc.GetAllClassInfo();//获取从数据库查询出来的数据
if (dty.Rows.Count > 0)
{
int a=0;
}
return Serialize(dty);//调用序列化DataTable结果集
}
private static string Serialize(DataTable dt)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();//该JavaScriptSerializer可以序列化反序列化
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
foreach (DataRow dr in dt.Rows)
{
Dictionary<string, object> result = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
result.Add(dc.ColumnName, dr[dc].ToString());
}
list.Add(result);
}
return serializer.Serialize(list); ;
}
再回到前端,Ajax处理返回的数据: 遍历结果集,通过动态添加HTML控件的方式实现动态添加菜单。
var htmlStr = new Array();
$(function () {
loadNode(0);
})
function loadNode(pId) {
$.ajax({
type: "post",
url: "Index.aspx/GetChildren",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var htmlstr;
var j = 0;
$.each(jQuery.parseJSON(data.d), function (i, item) {
if (item.ParentId == "0") {
j++;
if (j == 1) {
htmlstr = '<li><a href="#">' + item.ClassName + '</a>' + '<ul>';
$.each(jQuery.parseJSON(data.d), function (k, twoitem) {
if (item.Id == twoitem.ParentId) {
htmlstr += '<li><a href="#">' + twoitem.ClassName + '</a>' + '<ul>';
$.each(jQuery.parseJSON(data.d), function (h, threeitem) {
if (threeitem.ParentId == twoitem.Id) {
htmlstr += '<li><a href="#">' + threeitem.ClassName + '</a>' + '</li>';
}
});
htmlstr += "</ul></li>";
}
});
htmlstr += "</li></ul>";
}
else {
htmlstr += '<li><a href="#">' + item.ClassName + '</a>' + '<ul>'
$.each(jQuery.parseJSON(data.d), function (k, twoitem) {
if (item.Id == twoitem.ParentId) {
htmlstr += '<li><a href="#">' + twoitem.ClassName + '</a>' + '<ul>';
$.each(jQuery.parseJSON(data.d), function (h, threeitem) {
if (threeitem.ParentId == twoitem.Id) {
htmlstr += '<li><a href="#">' + threeitem.ClassName + '</a>' + '</li>';
}
});
htmlstr += "</ul></li>";
}
});
htmlstr += "</li></ul>";
}
}
$(".lesson_classfiy_nav ul").html(htmlstr);
});
}
});
}
</script>
好了,大功告成了 数据取出来,然后页面上的样式自己好好调一下,我这有完整的DEMO,有想要的可以邮箱1787024563@qq.com.注明内容。