JsTree异步加载数据实现多级菜单
最近在搞一个项目的维护，有一个问题是把原来的树导航变成多级的，原来的那个导航是JsTree的，但我又不熟悉，遂头疼了好久。。。
终于，他还是出来了，下面就贴上主要代码和思路，因为我在搞这个东西的时候在园子里和网上没有找到适合的代码，或许我写的正好是你要找的呢也不一定啊。。。
1.此处是前台的代码：
<script type="text/javascript">
$(function () {
var id;
if ("$!id" != "") {
id = "$!id";
}
$("#MuLuHtml").tree({
data: {
async: false,
cache: false,
opts: {
url: "GetTree4Ajax.aspx?$!{dateTime.Now.toString('yyyyMMddHHmmssffff')}"
}
},
lang: { loading: '目录加载中...' },
selected: [id],
opened: ["muluRoot"],
ui: {
theme_name: "classic"
},
types: {
"Root": {
draggable: false,
deletable: false,
renameable: false,
icon: {
image: "/Theme/1/base/images/pi_diagona_pack.png"
}
},
"R1": {
draggable: false,
deletable: false,
renameable: false,
icon: {
image: "/Theme/1/base/images/pi_diagona_pack.png"
}
},
"R2": {
draggable: false,
deletable: false,
renameable: false,
icon: {
image: "/Theme/1/base/images/pi_diagona_pack.png"
}
},
"R3": {
draggable: false,
deletable: false,
renameable: false,
icon: {
image: "/Theme/1/base/images/pi_diagona_pack.png"
}
},
"R4": {
draggable: false,
deletable: false,
renameable: false,
icon: {
image: "/Theme/1/base/images/pi_diagona_pack.png"
}
}
},
callback: {
beforedata: function (NODE, TREE_OBJ) {
return {
id: $(NODE).attr("id") || 0,
JiBie: $(NODE).attr("JiBie") || -1,
ShangJiMuLuID: $(NODE).attr("zhujian") || 0,
Rel: $(NODE).attr("rel") || 0
}
},
oncreate: function (NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
},
onrename: function (NODE, TREE_OBJ, RB) {
},
beforemove: function (NODE, REF_NODE, TYPE, TREE_OBJ) {
},
onmove: function (NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
},
oncopy: function (NODE, REF_NODE, TYPE, TREE_OBJ, RB) {
},
beforedelete: function (NODE, TREE_OBJ) {
},
onselect: function (NODE, TREE_OBJ) {
var markName = $(NODE).attr("mark");
if (markName == "xiezuozu")//当节点是协作组的时候才在右边显示该协作组的列表
{
$("[name=contentFrame]").attr("src", "/System/GroupMem/List.aspx?ID=" + $(NODE).attr("zhujian") + "&rel=" + $(NODE).attr("rel"));
}
},
plugins: {},
onopen: function (NODE, tree_obj) {
var result = jQuery.ajax({
url: "GetChildTree.aspx?_=" + new Date().getTime(),
cache: false,
type: 'POST',
async: false,
data: { "higher_level": $(NODE).attr("zhujian"), "mark": $(NODE).attr("mark") },
dataType: "json",
sucess: function (data) {
return data;
}
});
var markName = $(NODE).attr("mark");
if (markName=="danwei") {
if (result.responseText != "" && $(NODE).find("ul").length == 1) {
$(NODE).append(result.responseText);
}
}
else {
if (result.responseText != "" && $(NODE).find("ul").length == 0) {
$(NODE).append(result.responseText);
}
}
}
}
});
document.oncontextmenu = new Function('event.returnValue=false;');
});
</script>
2.后台的：
public void GetTree4Ajax(int jiBie, int shangJiMuLuID, string rel, int flag) { CancelView(); try { string code = GlobalInfo.DepID; string HightestUnitName = UnitInforHelper.GetUnitName(GlobalInfo.HighestUnitCode); string strWhere = ""; if (code.Length == 6 && code.Substring(2, 4) == "0000") { //省 strWhere = string.Format(" code like '{0}%'", code.Substring(0, 2)); } else if (code.Length == 6 && code.Substring(4, 2) == "00") { //市 strWhere = string.Format(" code like '{0}%'", code.Substring(0, 4)); } else if (code.Length == 6) { //区县 strWhere = string.Format(" code like '{0}%'", code); } else { //学校 strWhere = string.Format(" code = '{0}'", code); } StringBuilder sbMuLu = new StringBuilder(""); DataTable dt = HQLHelper.ExecuteDataTable(@"select * from dbo.view_unitInfor where " + strWhere+" order by name"); //查询单位(学校) sbMuLu.Append("<ul>"); sbMuLu.Append("<li rel=\"Root\" id=\"" + code + "\" zhujian=\"all\" class=\"open\" mark=\"root\"><a href=\"#\"><ins> </ins>" + UnitInforHelper.GetUnitName(GlobalInfo.HighestUnitCode) + "</a>"); sbMuLu.Append("<ul>"); foreach (DataRow dr in dt.Rows)//学校单位 { sbMuLu.Append("<li rel=\"R1\" id=\"" + dr["code"] + "\" zhujian=\"" + dr["code"] + "\" MingCheng=\"" + dr["name"] + "\" mark=\"danwei\"><a href=\"#\"><ins> </ins>" + dr["name"] + "</a>"); sbMuLu.Append("<ul>"); sbMuLu.Append("</ul></li>"); } sbMuLu.Append("</ul>"); sbMuLu.Append("</li></ul>"); Session["sbMulu"] = sbMuLu.ToString(); Response.Write(sbMuLu.ToString()); } catch (Exception ex) { LogHelper.WriteLogError(ex); } } #region Added by DYK 2014-5-30 public void GetChildTree(string higher_level, string mark) { CancelView(); string Str = ""; try { DataTable dt = new DataTable();//学段表 if (mark == "root")//点击根展开单位 { // } if (mark == "danwei")//点击单位展开学段 { dt = GetChildTreeData(higher_level, mark); Str = Open(dt, mark); } if (mark == "xueduan")//点击学段展开学科 { dt = GetChildTreeData(higher_level, mark); Session["c_p_id"] = higher_level; Str = Open(dt, mark); } if (mark == "xueke")//点击学科加载年级 { dt = GetChildTreeData(higher_level, mark); Session["s_id"] = higher_level; Str = Open(dt, mark); } if (mark == "nianji")//点击年级加载对应协作组 { Session["g_id"] = higher_level; dt = GetCoopGroupData(Session["g_id"].ToString(), Session["s_id"].ToString(), Session["c_p_id"].ToString()); Str = Closed(dt, "xiezuozu");//末级不能展开 } Response.Write(Str); } catch (Exception ex) { LogHelper.WriteLogError(ex); Response.Write(""); } } /// <summary> /// 获取各个制定层级下面的协作组 /// </summary> /// <param name="g_id"></param> /// <param name="s_id"></param> /// <param name="c_p_id"></param> /// <returns></returns> public DataTable GetCoopGroupData(string g_id, string s_id, string c_p_id) { CancelView(); DataTable dt = new DataTable(); try { //string cmdText = @"select groupid as code,groupname as name from dbo.base_cooperativeGroup where g_id ='" + g_id + "'and subjectId='" + s_id + "' and p_id='" + c_p_id + "'"; string cmdText = @"select groupid as code,groupname as name from dbo.base_cooperativeGroup where g_id ='" + g_id + "' and subjectId='" + s_id + "' and p_id=" + c_p_id; dt = HQLHelper.ExecuteDataTable(cmdText); } catch (Exception) { throw; } return dt; } /// <summary> /// 根据存储过程调用获取树的下一级(最后一级协作组除外) /// </summary> /// <param name="code"></param> /// <param name="mark"></param> /// <returns></returns> public DataTable GetChildTreeData(string code, string mark) { CancelView(); DataTable dt = new DataTable(); try { SqlParameter[] ps = new SqlParameter[] { new SqlParameter("@code",code), new SqlParameter("@mark",mark) }; dt = HQLHelper.ExecuteDataSet(CommandType.StoredProcedure, "GetChildTree", ps).Tables[0]; } catch (Exception) { throw; } return dt; }
public string Open(DataTable dt, string mark) { string this_mark = ""; if (mark == "danwei") { this_mark = "xueduan"; } if (mark == "xueduan") { this_mark = "xueke"; } if (mark == "xueke") { this_mark = "nianji"; } if (mark == "nianji") { this_mark = "xiezuozu"; } StringBuilder SuperTreeML = new StringBuilder(""); if (dt.Rows.Count > 0) { SuperTreeML.Append("<ul>"); foreach (DataRow dr in dt.Rows) { SuperTreeML.Append("<li rel=\"R1\" id=\"" + dr["code"] + "\" zhujian=\"" + dr["code"] + "\" MingCheng=\"" + dr["name"] + "\" title=\"" + dr["name"] + "\" mark=\"" + this_mark + "\" class=\"closed\"><a href=\"javascript:void(0);\"><ins> </ins>" + dr["name"] + "</a></li>"); } SuperTreeML.Append("</ul>"); } else { SuperTreeML.Append(""); } return SuperTreeML.ToString(); } /// <summary> /// 功能：末级不能展开 /// </summary> /// <param name="dt"></param> /// <param name="mark"></param> /// <returns></returns> public string Closed(DataTable dt, string mark) { StringBuilder SuperTreeML = new StringBuilder(""); if (dt.Rows.Count > 0) { SuperTreeML.Append("<ul>"); foreach (DataRow dr in dt.Rows) { SuperTreeML.Append("<li rel=\"Root\" id=\"" + dr["code"] + "\" zhujian=\"" + dr["code"] + "\" MingCheng=\"" + dr["name"] + "\" title=\"" + dr["name"] + "\" mark=\"" + mark + "\" class=\"leaf\"><a href=\"javascript:void(0);\"><ins> </ins>" + dr["name"] + "</a></li>"); } SuperTreeML.Append("</ul>"); } else { SuperTreeML.Append(""); } return SuperTreeML.ToString(); }
3.设计到一个存储过程，就是根据两个参数@code,@mark来执行相应的sql了，这里就不贴了。
4.最后附上效果图：
ok,大功告成，没白费我着急上火的。