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,大功告成,没白费我着急上火的。