最近在搞一个项目的维护，有一个问题是把原来的树导航变成多级的，原来的那个导航是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 == && code.Substring(, ) == "")
{
//省
strWhere = string.Format(" code like '{0}%'", code.Substring(, ));
}
else if (code.Length == && code.Substring(, ) == "")
{
//市
strWhere = string.Format(" code like '{0}%'", code.Substring(, ));
}
else if (code.Length == )
{
//区县
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[];
}
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 > )
{
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 > )
{
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,大功告成，没白费我着急上火的。