最近在搞一個項目的維護，有一個問題是把原來的樹導航變成多級的，原來的那個導航是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,大功告成，沒白費我着急上火的。