（转）基于MVC4+EasyUI的Web开发框架经验总结（2）- 使用EasyUI的树控件构建Web界面

时间  2019-11-20
标签 基于 mvc4+easyui mvc easyui web 开发 框架 经验总结 使用 控件 构建 界面 栏目 HTML 繁體版
原文   原文链接

http://www.cnblogs.com/wuhuacong/p/3669575.htmljavascript

最近花了很多时间在重构和进一步提炼个人Web开发框架上，力求在用户体验和界面设计方面，和Winform开发框架保持一致，而在Web上，我主要采用EasyUI的前端界面处理技术，走MVC的技术路线，在重构完善过程当中，不少细节花费很多时间进行研究和提炼，一步步走过来，也积累了很多经验，本系列将主要介绍我在进一步完善个人Web框架基础上积累的经验进行分享，本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验。html

在不少界面设计上，咱们可能都须要引入树列表控件，这个控件能够用zTree来实现，也能够用EasyUI的内置树控件进行展现，因为历史缘由，我原来倾向于使用zTree，最新把它所有修改成EasyUI的树控件，并进行了完善优化，发现代码更加简洁明快，很是不错。前端

一、在界面上使用EasyUI的树控件

通常状况下，使用EasyUI的树控件，代码很简单，脚本代码以下所示，主要就是经过调用url来得到Json数据，而后就能够显示了，经过onClick就能够响应用户单击节点的操做，每一个节点有id, text, iconCls, checked,state,children等属性。java

1）树控件的Json数据绑定node

复制代码 
            $('#treeDept').tree({
                url: '/User/GetMyDeptTreeJson?userId=@Session["UserId"]',
                onClick: function (node) {
                    loadData(node.id);
                }
            });
复制代码

2）树控件的折叠和展开数据库

树控件的展开和折叠，能够经过定义两个通用的脚本进行处理，以下所示。json

复制代码 
        function expandAll(treeName) {
            var node = $('#' + treeName).tree('getSelected');
            if (node) {
                $('#' + treeName).tree('expandAll', node.target);
            }
            else {
                $('#' + treeName).tree('expandAll');
            }
        }
        function collapseAll(treeName) {
            var node = $('#' + treeName).tree('getSelected');
            if (node) {
                $('#' + treeName).tree('collapseAll', node.target);
            }
            else {
                $('#' + treeName).tree('collapseAll');
            }
        }
复制代码

而后，在页面加载完毕后，绑定指定的按钮控件就能够了吗，以下代码所示。框架

复制代码 
        //初始化对象
        $(document).ready(function () {
            //初始化机构分类
            initOUCategorys();

            //机构基础信息
            initDeptTreeview();
            $("#deptExpand").bind("click", function () {
                expandAll("treeDept");
            });
            $("#deptCollapse").bind("click", function () {
                collapseAll("treeDept");
            });                       

            $("#loading").center(); //loading的图片显示居中
        });
复制代码

3）树控件的复选框显示函数

树控件默认是没有复选框的，它能够经过属性checkbox设置让它进行展现的，以下代码是我项目里面的代码。优化

其中cascadeCheck是否让树控件级联的，默认是级联，也就是只要父控件被选中，全部其子控件都会被选中，咱们能够设置它为false，让它不级联，这样在不少状况下是须要的。

复制代码 
            $('#treeFunctionView').tree({
                checkbox: true,
                cascadeCheck: false,
                url: '/Function/GetRoleFunctionByUser?userId=@Session["UserId"]',
                onClick: function (node) {
                    //
                }
            });
复制代码

4）树控件的全选和全不选择

这个所有不选的特性，我找了不少文章，都没有找到，其实后来才发现，咱们对树的节点理解有误差，认识到后，实现起来也很容易。

如取消所有节点的选中状态，代码以下所示。它的方法getChecked是返回全部的节点，而不是一个节点。它们把所有选中的节点放到一个结合里面，不像Winform里面，树节点须要递归查询，这里只须要一个for循环就能够展开了，我这里把全部勾选的节点，设置为非勾选状态就能够实现取消所有树节点勾选状态了。

复制代码 
        function unCheckTree(tree) {
            var nodes = $('#' + tree).tree('getChecked');
            if (nodes) {
                for (var i = 0; i < nodes.length; i++) {
                    $('#' + tree).tree('uncheck', nodes[i].target);
                }
            }
        }
复制代码

咱们知道，不少树控件，为了方便操做，都提供了一个全选或者所有不选的操做，这个在EasyUI的树控件里面，也是很容易实现的。这里的getChildren和上面的意思相似，也是返回全部的子节点，不须要在进行递归，用一个for循环就能够遍历所有节点和其下面的多级子节点了。也就是说，它是一个二维的数据，不用递归查询。

复制代码 
        function checkAllTree(tree, checked) {
            var children = $('#' + tree).tree('getChildren');
            for (var i = 0; i < children.length; i++) {
                if (checked) {
                    $('#' + tree).tree('check', children[i].target);
                } else {
                    $('#' + tree).tree('uncheck', children[i].target);
                }
            }
        }
复制代码

 

5）下拉列表的树控件初始化

除了普通的树列表，还有一种比较特殊的树控件，就是在ComboTree,也就是在下拉列表中集成树控件，它的操做和普通的树控件差很少，不少事件属性都同样，它的使用代码以下所示。

复制代码 
        //初始化公司
        function initCompany() {
            $('#txtCompany_ID').combotree({
                url: '/User/GetMyCompanyTreeJson?userId=@Session["UserId"]',
                valueField: 'id',
                textField: 'text',
                required: true,
                onClick: function (node) {
                    //
                }
            });
        }
复制代码

 

二、树控件的优化

1）普通的Json数据生成

前面说了，咱们为了方便，通常使用Json数据和javascript打交道，而EasyUI的树控件支持很好地的Json连接绑定，所以咱们只须要在对应的控制器里面实现json数据的生成便可，若是是一开始想要肯定的Json数据，通常也是经过手工生成的居多，以下代码所示。

复制代码 
        public ActionResult GetTreeJson()
        {
            string folder = "/Content/JqueryEasyUI/themes/icons/customed/" + "organ.png";
            string leaf = "/Content/JqueryEasyUI/themes/icons/customed/" + "organ.png";
            string json = GetTreeJson(-1, folder, leaf);
            json = json.Trim(',');
            return Content(string.Format("[{0}]", json));
        }

        /// <summary>
        /// 递归获取树形信息
        /// </summary>
        /// <param name="PID"></param>
        /// <returns></returns>
        private string GetTreeJson(int PID, string folderIcon, string leafIcon)
        {
            string condition = string.Format("PID={0}", PID);
            List<OUInfo> nodeList = BLLFactory<OU>.Instance.Find(condition);
            StringBuilder content = new StringBuilder();
            foreach (OUInfo model in nodeList)
            {
                int ParentID = (model.PID == -1 ? 0 : model.PID);
                //string tempMenu = string.Format("{{ id:{0}, pId:{1}, name:\"{2}\",icon:\"{3}\" }},", model.ID, ParentID, model.Name, imgsrc);
                string subMenu = this.GetTreeJson(model.ID, folderIcon, leafIcon);
                string parentMenu = string.Format("{{ \"id\":{0}, \"pId\":{1}, \"name\":\"{2}\" ", model.ID, ParentID, model.Name);
                if (string.IsNullOrEmpty(subMenu))
                {
                    if (!string.IsNullOrEmpty(leafIcon))
                    {
                        parentMenu += string.Format(",\"icon\":\"{0}\" }},", leafIcon);
                    }
                    else
                    {
                        parentMenu += "},";
                    }
                }
                else
                {
                    if (!string.IsNullOrEmpty(folderIcon))
                    {
                        parentMenu += string.Format(",\"icon\":\"{0}\" }},", folderIcon);
                    }
                    else
                    {
                        parentMenu += "},";
                    }
                }

                content.AppendLine(parentMenu.Trim());
                content.AppendLine(subMenu.Trim());
            }

            return content.ToString().Trim();
        }
复制代码

上面的代码很好实现了根据数据库结构的关系，生成Json数据，可是感受部分硬编码，凑出来的数据，始终感受不太理想，若是咱们要简化，该如何操做呢？

 

2）简洁美观的Json数据生成

本小节继续上面的议题，看如何简化json的生成，由于咱们须要不少这样的json操做，若是采用上面的方法，我感受很容易出错，并且也不太美观。为了解决这个问题，咱们能够经过定义一个json数据的实体类，用来承载相关的信息，以下定义所示。

复制代码 
    /// <summary>
    /// 定义EasyUI树的相关数据，方便控制器生成Json数据进行传递
    /// </summary>
    [DataContract]
    [Serializable]
    public class EasyTreeData
    {
        /// <summary>
        /// ID
        /// </summary>
        [DataMember]
        public string id { get; set; }

        /// <summary>
        /// 节点名称
        /// </summary>
        [DataMember]
        public string text { get; set; }
        
        /// <summary>
        /// 是否展开
        /// </summary>
        [DataMember]
        public string state  { get; set; }

        /// <summary>
        /// 图标样式
        /// </summary>
        [DataMember]
        public string iconCls { get; set; }


        /// <summary>
        /// 子节点集合
        /// </summary>
        [DataMember]
        public List<EasyTreeData> children { get; set; }
        
        /// <summary>
        /// 默认构造函数
        /// </summary>
        public EasyTreeData() 
        {
            this.children = new List<EasyTreeData>();
            this.state = "open";
        }

        /// <summary>
        /// 经常使用构造函数
        /// </summary>
        public EasyTreeData(string id, string text, string iconCls = "", string state = "open")
            : this()
        {
            this.id = id;
            this.text = text;
            this.state = state;
            this.iconCls = iconCls;
        }

        /// <summary>
        /// 经常使用构造函数
        /// </summary>
        public EasyTreeData(int id, string text, string iconCls = "", string state = "open")
            : this()
        {
            this.id = id.ToString();
            this.text = text;
            this.state = state;
            this.iconCls = iconCls;
        }
    }
复制代码

而后，咱们在须要生成Json数据的地方，使用这个实体类进行承载，而后把它列表生成Json就能够了，很简单了，呵呵。

复制代码 
        /// <summary>
        /// 根据用户获取对应人员层次的树Json
        /// </summary>
        /// <param name="deptId">用户所在部门</param>
        /// <returns></returns>
        public ActionResult GetUserTreeJson(int deptId)
        {
            List<EasyTreeData> treeList = new List<EasyTreeData>();
            treeList.Insert(0, new EasyTreeData(-1, "无"));

            List<UserInfo> list = BLLFactory<User>.Instance.FindByDept(deptId);
            foreach (UserInfo info in list)
            {
                treeList.Add(new EasyTreeData(info.ID, info.FullName, "icon-user"));
            }

            string json = ToJson(treeList);
            return Content(json);
        }
复制代码

若是须要递归的操做，同样的方式处理就能够了。

复制代码 
        /// <summary>
        /// 获取用户的部门树结构(分级须要）
        /// </summary>
        /// <param name="userId">用户ID</param>
        /// <returns></returns>
        public ActionResult GetMyDeptTreeJson(int userId)
        {
            StringBuilder content = new StringBuilder();
            UserInfo userInfo = BLLFactory<User>.Instance.FindByID(userId);
            if (userInfo != null)
            {
                OUInfo groupInfo = GetMyTopGroup(userInfo);
                if (groupInfo != null)
                {
                    List<OUNodeInfo> list = BLLFactory<OU>.Instance.GetTreeByID(groupInfo.ID);

                    EasyTreeData treeData = new EasyTreeData(groupInfo.ID, groupInfo.Name, GetIconcls(groupInfo.Category));
                    GetTreeDataWithOUNode(list, treeData);

                    content.Append(base.ToJson(treeData));
                }
            }
            string json = string.Format("[{0}]", content.ToString().Trim(','));
            return Content(json);
        }
复制代码

上面使用EasyTreeData来承载数据，而后构建列表，其自己就是一个多层级的树对象，而后一个ToJson的方法就能够把列表对象完美转换为Jason数据了。

这里的ToJson，主要就是调用JavaScriptSerializer 对象进行的操做，以下所示。

复制代码 
        /// <summary>
        /// 把对象为json字符串
        /// </summary>
        /// <param name="obj">待序列号对象</param>
        /// <returns></returns>
        protected string ToJson(object obj)
        {
            string jsonData = (new JavaScriptSerializer()).Serialize(obj);
            return jsonData;
        }
复制代码

 

三、树控件效果展现

在介绍如何使用它以后，咱们来看看我几个场景中使用树控件进行的展现效果，方便咱们加深上面EasyUI树控件使用的了解。

1）组织机构列表以下所示：

2）角色树列表展现

 

3）功能树列表展现

4）菜单树列表展现

5）登录日志树列表展现

6）下拉列表树展现

  

    

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程