EasyUI树形菜单无限级

刚刚接触EasyUI可能和大家一样都想一下吃个胖子,希望到网上或者向别人找个实际的例子看,觉得这样来的更直观更有效率,从这次我个人的体会来说那是因为自己学习不踏实好高骛远。废话到此上代码:

/////////////

数据库:

//////////////

前台页面:(关于easyui的包自己找去,永远不要依赖别人)

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/Content/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/Content/easyui/themes/icon.css" />
    <script type="text/javascript" src="/Content/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/Content/easyui/jquery.easyui.min.js"></script>
    <script>
        $(function () {
            $('#tree').tree({
                url:'/Demo/Handler.ashx',
                onClick: function (node) {
                    alert(node.text);
                }
            })
        })             
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ul id="tree"></ul>
        </div>
    </form>
</body>
</html>

////////////////////////////////////////////////////

注:

  这个是Handler.ashx一般程序集

 

 public class Handler : IHttpHandler
    {
        Maticsoft.BLL.Tree t = new BLL.Tree();//用动软生成的三层
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(GetModule());//返回json字符串
        }
        public string GetModule()
        {
            DataTable dt = new DataTable();
            dt = t.GetAllList().Tables[0];//这个是查询数据库(存储整个树的这个表)所有数据
            string ss = TableToEasyUITreeJson(dt, "ParentID", "0", "TreeID", "Name");
            return ss;
        }
        /// <summary>
        /// 递归将DataTable转化为适合jquery easy ui 控件tree
        /// </summary>
        /// <param name="dt">要转化的表</param>
        /// <param name="pField">表中的父节点字段</param>
        /// <param name="pValue">表中顶层节点的值,没有 可以输入为0</param>
        /// <param name="kField">关键字字段名称</param>
        /// <param name="TextField">要显示的文本 对应的字段</param>
        /// <returns></returns>
        public static string TableToEasyUITreeJson(DataTable dt, string pField, string pValue, string kField, string TextField)
        {
            StringBuilder sb = new StringBuilder();
            string filter = String.Format(" {0}='{1}' ", pField, pValue);//获取顶级目录.
            DataRow[] drs = dt.Select(filter);
            if (drs.Length < 1)
            {
                return "";
            }
            else
            {               
                sb.Append("[");
                foreach (DataRow dr in drs)
                {
                    string pcv = dr[kField].ToString();
                    sb.Append("{");
                    sb.AppendFormat("\"id\":\"{0}\",", dr[kField].ToString());
                    string filter_parent = String.Format(" {0}='{1}' ", pField, pcv);//获取父级目录.
                    DataRow[] drs_parent = dt.Select(filter_parent);
                    if (drs_parent.Length < 1) {
                        sb.AppendFormat("\"text\":\"{0}\"", dr[TextField].ToString());
                    } else {
                        sb.AppendFormat("\"text\":\"{0}\",", dr[TextField].ToString());
                        sb.AppendFormat("\"children\":{0}", TableToEasyUITreeJson(dt, pField, pcv, kField, TextField));                        
                    }
                    if (sb.ToString().EndsWith(","))
                    {
                        sb.Remove(sb.Length - 1, 1);
                    }
                    sb.Append("},");
                }
                if (sb.ToString().EndsWith(","))
                {
                    sb.Remove(sb.Length - 1, 1);
                }
                sb.Append("]");
            }
            return sb.ToString();

        }       
    }

//////////////

效果图:

 

 

 

总结:有不对的希望大家指出,本人会及时更正。

 

posted @ 2015-12-01 17:03  山顶洞外人  阅读(661)  评论(0)    收藏  举报