javascript与jquery混合而成的动态无限树形结构的菜单
前台代码如下：主要就是ajax的实现
<script type="text/javascript" language="javascript">
$(initMenuInfo);
function initMenuInfo()
{
var tbody = "";
$.ajax({
type: "GET",
dataType: "json",
url: 'Tree.aspx',
data: "s=1",
error: function(){
tbody="数据加载失败";
$("#menu").append(tbody);
},
success: function(data) {
var menus = data.menuModels;
$.each(menus, function(i, menu) {
if(menu!=null)
{
var divstr="div"+menu.ModuleId;
var trs = "";
trs +='<div id="'+divstr+'">';
trs += '<a href="#" class="menuover" title="' + menu.ModuleName + '" onclick="node
('+menu.ModuleId+');">';
trs +=menu.ModuleName+'</a>';
trs +='</div>';
tbody += trs;
}
});
if(tbody=="")
tbody="暂无数据";
$("#menu").addClass("hasload").append(tbody);
},
complete: function(XMLHttpRequest, textStatus){
}
});
}
function node(id){
var divId="div"+id.toString();
var tbody1 = "";
if(!$("#"+divId+"").hasClass("hasload"))
{
$.ajax({
type: "GET",
dataType: "json",
url: 'Tree.aspx',
data: "f=2&id=" + id,
error: function(){
tbody1="数据加载失败";
$("#"+divId+"").append(tbody1);
},
success: function(data) {
var menus = data.menuModels;
$.each(menus, function(i, menu) {
if(menu!=null)
{
var divstr="div"+menu.ModuleId;
var trs1 = "";
trs1+='<div class="menuover" id="'+divstr+'">';
trs1 += '<a href="#" title="' + menu.ModuleName + '" onclick="node
('+menu.ModuleId+');">';
trs1 +=menu.ModuleName+'</a>';
trs1 +='</div>';
tbody1 += trs1;
}
});
if(tbody1!="")
$("#"+divId+"").addClass("hasload").append(tbody1);
},
complete: function(XMLHttpRequest, textStatus){
}
});
}
else
{
$("#"+divId+">div").toggle();
$("#"+divId+">div>div").hide();
// if(document.getElementById(divId).getElementsByTagName("div")[0].className=="menuover")
// {
// alert("aa");
// for(j=0; j<document.getElementById(divId).getElementsByTagName("div").length; j++)
// {
//var obj=document.getElementById(divId).getElementsByTagName("div")[j];
// obj.className=obj.className.replace("menuover", "menuhide");
// }
//}
// else
//{
// for(j=0; j<document.getElementById(divId).getElementsByTagName("div").length; j++)
// {
// var obj=document.getElementById(divId).getElementsByTagName("div")[j];
// obj.className=obj.className.replace("menuhide", "menuover");
//}
//}
}
}
</script>
<div id="menu" >
</div>
后台代码如下：主要是构建json对象
protected void Page_Load(object sender, EventArgs e)
{
if( Request.QueryString["s"] == "1")
{
GetFirstMenu();
}
if (Request.QueryString["f"] == "2")
{
int nodeId = int.Parse(Request.QueryString["id"]);
GetLastMenu(nodeId);
}
}
public void GetFirstMenu()
{
DataSet ds = new DataSet();
string strsql = "select * from Menu where ParentID=0";
ds = DbHelper.Query(strsql);
if(ds!=null)
{
List<MenuModel> MenuModels = new List<MenuModel>();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
MenuModel menumodel = new MenuModel();
menumodel.ModuleId = int.Parse(ds.Tables[0].Rows[i]["ModuleId"].ToString());
menumodel.ModuleName = ds.Tables[0].Rows[i]["ModuleName"].ToString();
menumodel.ParentID = int.Parse(ds.Tables[0].Rows[i]["ParentID"].ToString());
menumodel.IsPage = bool.Parse(ds.Tables[0].Rows[i]["IsPage"].ToString());
menumodel.UrlAddress = ds.Tables[0].Rows[i]["UrlAddress"].ToString();
MenuModels.Add(menumodel);
}
string jsonstr = GetJsonStr(MenuModels);
Response.Write(jsonstr);
Response.End();
}
}
public void GetLastMenu(int id)
{
DataSet ds = new DataSet();
string strsql = "select * from Menu where ParentID='"+id+"'";
ds = DbHelper.Query(strsql);
if (ds != null)
{
List<MenuModel> MenuModels = new List<MenuModel>();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
MenuModel menumodel = new MenuModel();
menumodel.ModuleId = int.Parse(ds.Tables[0].Rows[i]["ModuleId"].ToString());
menumodel.ModuleName = ds.Tables[0].Rows[i]["ModuleName"].ToString();
menumodel.ParentID = int.Parse(ds.Tables[0].Rows[i]["ParentID"].ToString());
menumodel.IsPage = bool.Parse(ds.Tables[0].Rows[i]["IsPage"].ToString());
menumodel.UrlAddress = ds.Tables[0].Rows[i]["UrlAddress"].ToString();
MenuModels.Add(menumodel);
}
string jsonstr = GetJsonStr(MenuModels);
Response.Write(jsonstr);
Response.End();
}
}
public string GetJsonStr(List<MenuModel> MenuModels)
{
StringBuilder json = new StringBuilder();
json.Append("{\"menuModels\":[");
foreach (MenuModel model in MenuModels)
{
json.Append("{\"ModuleId\":\"" + model.ModuleId + "\",\"ModuleName\":\"" + model.ModuleName +
"\",\"ParentID\":\"" + model.ParentID + "\",\"IsPage\":\"" + model.IsPage + "\",\"UrlAddress\":\"" +
model.UrlAddress + "\"}");
json.Append(",");
}
return json.ToString().TrimEnd(',') + "]}";
}
public class MenuModel
{
public int ModuleId { get; set; }
public string ModuleName { get; set; }
public int ParentID { get; set; }
public string UrlAddress { get; set; }
public bool IsPage { get; set; }
}
