EasyUI Tree 树 ——实现多级别菜单的展示，以及与后台数据的交互

一要引入的js css库

    <link type="text/css" href="css/base.css" rel="stylesheet" />

    <link type="text/css" href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" />

    <link type="text/css" href="jquery-easyui-1.4/themes/icon.css" rel="stylesheet" />

    <link type="text/css" href="css/icon.css" rel="stylesheet" />

    <script type="text/javascript" src="jquery-easyui-1.4/jquery.min.js"></script>

    <script type="text/javascript" src="jquery-easyui-1.4/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="Scripts/json2.js"></script>

    <%--<script type="text/javascript" src="jquery-easyui-1.4/extension/jquery-easyui-datagridview/datagrid-detailview.js"></script>--%>

    <script type="text/javascript" src="Scripts/parseurl.js"></script>

二写DIV用来存放菜单树，代码如下

<div region="center" border="false" data-options="title:'系统导航',collapsible:true"> tree的标题、位置，等属性
<div id="menuTree"></div> 通过js获取后台json数据，展现出来
</div>

三写 js代码，与后台进行交互

    $(function () { //在页面加载完毕后会执行该方法，个人理解$(function(){});好比就是java c#中的main()方法，是程序的入口

            LoadMenuTree();

        });

        function LoadMenuTree() {

            $('#orgTree').tree({

                url: 'ashx/NewMenu.ashx?cmd=GetMENUTrees',//根据链接获取后台方法

                onSelect: function (node) {//选中某个节点，会调用该事件

                    if (node.link != "")

                        getAspxFromMenuUrl(node.link)//根据传来的节点属性link进行页面的跳转

                },

                onLoadSuccess: function () {//成功加载树后会调用该事件

                    var rootNode = $("#orgTree").tree('getRoot');

                    $("#orgTree").tree("select", rootNode.target);

                },

            })

        }

四对后台代码的调用

 1找到后台方法

 NewMenu.ashx 页面内的内容

   url: 'ashx/NewMenu.ashx?cmd=GetMENUTrees', 通过该链接既可找到 NewMenu类中的 GetMENUTrees方法

2 后台方法的实现

GetMENUTrees方法

       #region 获取菜单树

        public string GetMENUTrees(HttpContext context)

        {

            try

            {

                        DataTable _menuOption = 从数据库中获取菜单的信息(下面将会介绍数据库的设计，以及如何从数据库中获取菜单数据)

                        if (_menuOption.Rows.Count > 0)

                        {

                            List<EasyUITreeNode> list = GetTreeNode(_menuOption); //将菜单数据转换为带有递归关系的集合(即上下级关系)

                            return ObjToJson(list); //将集合转换为json数据，最后返回前台

                        }

                        else

                        {

                            return " ";

                        }

            }

            catch (Exception e)

            {

                throw e;

            }        

        }

两个bean类

  public class EasyUITreeNode

    {

        public string pkid { set; get; }//主键

        public string id { set; get; }//菜单ID

        public string text { set; get; }//菜单名称

        public string level { set; get; }

        public string iconCls { set; get; }

        public string state { set; get; }//节点是否展开

        public string link { set; get; }//链接

        public string  iscontainer { set; get; }//是否为容器

        public string visible { set; get; }//是否可见

        public string parentid { set; get; }//上级

        public string image { set; get; }

        public bool Checked { set; get; }

        public string haspermission { set; get; }

        public List<EasyUITreeNode> children { set; get; }

    }

    public partial class SYS_MENUANDMEMBER

    {

        public int id { set; get; }

        public int orderid { set; get; }

        public string iconCls { set; get; }

        public int levels { set; get; }

        public string name { set; get; }

        public string link { set; get; }

        public int parent{ set; get; }

        public string iscontainer { set; get; }//是否为容器

        public string  visible { set; get; }//是否可见

        public string image { set; get; }

        public string imgchange { set; get;}

        public string javascript { set; get; }

    }

将 DataTable _menuOption 转换为带有递归关系的List<EasyUITreeNode> 集合

//获取根节点

        public List<EasyUITreeNode> GetTreeNode(DataTable _menuOtion)

        {

            DatatableToList<SYS_MENUANDMEMBER> list = new DatatableToList<SYS_MENUANDMEMBER>();

            menuList = list.ConvertTolist(_menuOtion);//将 DataTable数据转换为list

            List<SYS_MENUANDMEMBER> menulistNode = menuList.Where(m => m.parent == 0).ToList()  获取菜单的跟菜单，祖先菜单

            List<EasyUITreeNode> treeList = new List<EasyUITreeNode>();

            if (menulistNode.Count < 1)//为空，返回空值

            {

                return null;

            }

            else //不为空 则将 menulistNode 转换为 EasyUITreeNode

            {

                for (int i = 0; i < menulistNode.Count; i++)

                {

                    EasyUITreeNode tree = new EasyUITreeNode();

                    tree.id = menulistNode[i].id.ToString();

                    tree.text = menulistNode[i].name;

                    tree.level = menulistNode[i].levels.ToString();

                    tree.link = menulistNode[i].link;

                    tree.parentid = menulistNode[i].parent.ToString();

                    tree.iscontainer = menulistNode[i].iscontainer;

                    tree.visible = menulistNode[i].visible;

                    //tree.iconCls = "panel-tool-collapse";

                    tree.iconCls = menulistNode[i].imgchange;

                    tree.state = "closed";

                    tree.children = GetTreeChildren(menulistNode[i].id);将根菜单的id作为其下级菜单的parentid,获取其下属的菜单

                    treeList.Add(tree);

                }

                return treeList;

            }

        }

        //获取子节点

        private List<EasyUITreeNode> GetTreeChildren(Int32 p) 方法原理同其上次菜单获取的原理相同

        {

            List<SYS_MENUANDMEMBER> menulistChildred = menuList.Where(m => m.parent.Equals(p)).ToList();

            List<EasyUITreeNode> treeList = new List<EasyUITreeNode>();

            if (menulistChildred.Count < 1)

            {

                return null;

            }

            else

            {

                for (int i = 0; i < menulistChildred.Count; i++)

                {

                    EasyUITreeNode tree = new EasyUITreeNode();

                    tree.id = menulistChildred[i].id.ToString();

                    tree.text = menulistChildred[i].name;

                    tree.level = menulistChildred[i].levels.ToString();

                    tree.link = menulistChildred[i].link;

                    tree.parentid = menulistChildred[i].parent.ToString();

                    tree.iscontainer = menulistChildred[i].iscontainer;

                    tree.visible = menulistChildred[i].visible;

                    //tree.iconCls = menulistChildred[i].image;

                    tree.iconCls = menulistChildred[i].imgchange;

                    //tree.state = "closed";

                    tree.children = GetTreeChildren(menulistChildred[i].id);//一步步递归，最后将会得到一个具有层层递归关系的集合

                    treeList.Add(tree);

                }

                return treeList;

            }

        }

 #region Datatable转List

    public class DatatableToList<T> where T : new()

    {

        public List<T> ConvertTolist(DataTable dt)

        {

            List<T> ts = new List<T>();

            Type type = typeof(T);

            string tempName = "";

            foreach (DataRow dr in dt.Rows)

            {

                T t = new T();

                PropertyInfo[] propertys = t.GetType().GetProperties();

                foreach (PropertyInfo pi in propertys)

                {

                    tempName = pi.Name;

                    if (dt.Columns.Contains(tempName))

                    {

                        if (!pi.CanWrite) continue;

                        object value = dr[tempName];

                        if (value != DBNull.Value)

                            pi.SetValue(t, value, null);

                    }

                }

                ts.Add(t);

            }

            return ts;

        }

    }

    #endregion

  //将返回值转换为json

        public static string ObjToJson<T>(T data)

        {

            return JsonConvert.SerializeObject(data);

        }

五数据库部分后续更新....

　　关于数据库的设计可以参考我的另一篇随笔 mvc+easyui，写个树

巴特西

EasyUI Tree 树 ——实现多级别菜单的展示，以及与后台数据的交互

最新文章

热门文章