首页 > 代码库 > JsTree异步加载数据实现多级菜单

JsTree异步加载数据实现多级菜单

2024-07-07 08:05:01   224人阅读

最近在搞一个项目的维护，有一个问题是把原来的树导航变成多级的，原来的那个导航是JsTree的，但我又不熟悉，遂头疼了好久。。。

终于，他还是出来了，下面就贴上主要代码和思路，因为我在搞这个东西的时候在园子里和网上没有找到适合的代码，或许我写的正好是你要找的呢也不一定啊。。。

1.此处是前台的代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<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=http://www.mamicode.com/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=http://www.mamicode.com/"#\"><ins>&nbsp;</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=http://www.mamicode.com/"#\"><ins>&nbsp;</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=http://www.mamicode.com/"javascript:void(0);\"><ins>&nbsp;</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=http://www.mamicode.com/"javascript:void(0);\"><ins>&nbsp;</ins>" + dr["name"] + "</a></li>");
                }
                SuperTreeML.Append("</ul>");
            }
            else
            {
                SuperTreeML.Append("");
            }
            return SuperTreeML.ToString();
        }
 
 
3.设计到一个存储过程，就是根据两个参数@code,@mark来执行相应的sql了，这里就不贴了。
4.最后附上效果图：
ok,大功告成，没白费我着急上火的。






























        

            
                
                  
                
                

                    联系

                    我们