记忆我于深早前,开始介绍自己之Winform开发框架与自家之WCF开发框架的新,我都于来底的视图,介绍自身收拾的一个框架体系,其中含有有WInform开发框架和自身的Web开发框架,由于前段时间一直无暇Winform开发框架的提炼和优化,并统一整治了许多Winform开发框架和WCF开发框架的随笔文章。随着自之Winform逐步全面,终于有日来整治介绍我之Web开发框架的事了,下面先介绍一下自最新优化整治的Web开发框架的权管理网,其中者权力管理体系可以说凡是汇众多宠爱于一身了,除了固定的和代码生成工具并,可变通基础性的框架代码外,还做Winform开发框架继承而来之大部据库支持,在界面层,也就是Web权限管理体系,整合了JQuery的Easy-UI界面组件,功能强大的zTree控件、KindEditor在线编辑控件、界面层获取数据及保存使用基于JQuery的json数据操作,实现数量有刷新等等操作,其中提供零星种不同之菜系布局操作,非常有利使用被其他作业体系的界面。

图片 1

先是以介绍之前,我们来贴几单Web权限系统的图样展开感性的摸底先。

1)简洁的界面布局功能。这种功能顶部横幅比较艰苦凑,左边有一对常用的按钮操作,适合给菜单功能未顶多的略微事情体系,如我之Web权限系统。

图片 2

2)功能强大的界面企业业务体系布局。这种界面效果适合为功能比较多,菜单显示进行分类管理等业务系统。这种框架顶部的食谱也一级菜单,单击一级菜单可以当左手展示二级菜单,这种意义好毫无一次性列出所有系统的成效,而是分层次开展力量展示。

图片 3顶部之Tab选项卡每次打开页面的下,增加一个Tab页,页面可以双击进行关闭,也得以右键弹有菜谱进行再次多操作,如下图所展示。

图片 4

倘若用了解任何体系的职能,也可以下载《Web权限系统操作视屏》进行到的询问。

以提炼优化是Web权限框架的长河遭到,碰到了许多底题材,一一进行解决,现总结一部分进展拓展介绍。

1)使用JSON数据构造zTree

动用zTree确实比easy-ui自带的Tree好过多,功能吗强硬很多,由于自己的Web权限中,各个模块几乎都待培育控件来显示相关的多寡,如效果、组织部门等等。在自查自纠了我自己之风土民情Tree、Easy-UI的Tree控件以及zTree后,发现用zTree还是得加强广大底界面分数的。但是那个打带的事例,以及网上的例子,多数是运预先将好之树形数据,而我需要动态下ashx进行树形数据的取和变化,这确实费了有的坎坷来进展调试。

第一使未雨绸缪根据ashx处理程序生成的Tree数据,树的数量应用JSON格式。如效果定义之树形数据如下所示。

        /// <summary>
        /// 递归获取树形信息
        /// </summary>
        private string GetTreeJson(int PID, string folderIcon, string leafIcon)
        {
            string condition = string.Format("PID={0}", PID);
            List<FunctionInfo> nodeList = BLLFactory<Function>.Instance.Find(condition);
            StringBuilder content = new StringBuilder();
            foreach (FunctionInfo 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();
        } 

接下来就是页面的调用了,这里以加强体验效果,使用了基于javascript的JQuery的异步操作进行多少处理,而无是因aspx后台页面的拍卖,如下所示。

        //重新加载树形结构(异步)
        function reloadTree() {
            $("#loading").show();
            $.getJSON("http://www.cnblogs.com/AjaxHandler/FunctionJson.ashx?r=" + Math.random() + "&op=tree", function (json) {
                $.fn.zTree.init($("#treeDemo"), setting, json);
                $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);

                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                var treeNodes = treeObj.getNodes();
                if (treeNodes != null) {
                    loadData(treeNodes[0].id);
                }
            });
            $("#loading").fadeOut(500);
        }

然处理的效用是页面才是有刷新,体验好好。

2)基于JQuery的多少加载与保存操作

由于JQuery的方便性及良好体验性,我联合了多少的得与保存操作。下面为来相关的拍卖代码供参考。

        //加载制定的对象数据
        function loadData(id) {
            $("#loading").show();
            $.getJSON("http://www.cnblogs.com/AjaxHandler/FunctionJson.ashx?r=" + Math.random() + "&op=findbyid&id=" + id, function (json) {
                $("#txtID").val(json.ID);
                $("#txtName").val(json.Name);
                $("#txtControlID").val(json.ControlID);
                $("#txtPID").val(json.PID);
            });

            $('#lbxRoles').empty();
            $.getJSON("http://www.cnblogs.com/AjaxHandler/RoleJson.ashx?r=" + Math.random() + "&op=getrolesbyfunction&id=" + id, function (json) {
                $.each(json, function (i, item) {
                    $('#lbxRoles').append('<option value="' + item.ID + '">' + item.Name + '</option>');
                });
            });
            $("#loading").fadeOut(500);
        }

        //保存对象数据
        function saveData() {
            $.ajax({
                type: 'POST',
                url: 'http://www.cnblogs.com/AjaxHandler/FunctionJson.ashx?r=' + Math.random() + '&op=insert',
                async: false,
                data: { ID: $("#txtID").val(), Name: $("#txtName").val(), ControlID: $("#txtControlID").val(), PID: $("#txtPID").val() },
                success: function (id) {
                    alert("操作成功! ");
                    reloadTree();

                    if (id != "")
                        loadData(id);
                },
                error: function (xhr, status, error) {
                    alert("操作失败"); //xhr.responseText
                }
            });
        }

3)在数码操作等的时节,页面中显示Loading效果。

全总系统,在各种求操作,我还合并了作法,在界面显示Loading的待效果,任务了晚关闭,这种效益在烦的操作,用户体检会好有的,下面看看那效以及贯彻代码。

图片 5

搭下面javascript脚本

        //对象居中的函数,调用例子:$("#loading").center();
        jQuery.fn.center = function () {
            this.css("position", "absolute");
            this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
                                                $(window).scrollTop()) + "px");
            this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
                                                $(window).scrollLeft()) + "px");
            return this;
        }

        //初始化对象
        $(document).ready(function () {

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

然后还页面Body后面加一行代码即可(默认loading图片未出示的哦)。

    <div id="loading" style="display: none;"><img alt="数据正在加载中..." src="http://images.cnblogs.com/loading02.gif" /></div>

4)控件数据清空操作

鉴于长和编公用界面控件元素,因此我们以使加加多少的下,需要清空或者设置某些控件的价,但我们的控件可能较多,一种植好之章程是采用JQuery的选择器功能来开展有目的的控件清空操作。

而下面的事例所示。

        //新增清空控件
        function addData() {
            $("#txtPID").val($("#txtID").val());
            $("input[type=text][id*='txt']").val("");
            $("textarea[id*='txt']").empty();
            $("select[id*='lbx']").empty();
        }

其中$(“#txtPID”).val($(“#txtID”).val());是将当前之用户作为丰富数据的顶头上司,其他的即使是清空控件的多少了,不同的品种控件清空的步子有些不同。

5)Ashx处理程序的安全性考虑

俺们在系统中,多数都是调用ashx进行数据处理,虽然一般工作系统于VPN或者内网中运行,但是呢要是考虑用户并未登陆的时,不运行调用ashx程序,这样可以增进多少的安全性。

默认的ashx处理程序是未曾Session的操作的,所以我们需要修改其后续接口(多增加IReadOnlySessionState 的持续)

,然后才会调用Session来展开判断。

    /// <summary>
    /// 权限功能操作类
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class FunctionJson : IHttpHandler, IReadOnlySessionState 
    {        
        public void ProcessRequest(HttpContext context)
        {
            //类对象要显式的实现接口 IReadOnlySessionState,才能访问Session数据
            if (context.Session["Identity"] == null)
            {
                throw new ArgumentException("用户未登录!");
            }

6)Tab界面布局的匹配。

Web权限系统提供了一定量种植常用的菜单布局进行管制,一般对常用的事体系统肯定是尚未问题了。

图片 6

此外一种功能是网错综复杂的时刻用的,可以定义一级菜单与事关的二级菜单。

图片 7

于后人,一级菜单打开的下,可以提到打开一个初的页面,并且刷新二级菜单的涉。

        <!----------- 一级导航 ------------------>
        <ul class="navigation" style="display:block">
            <li><a href="#" onclick="showSubMenu('ListUser.aspx', '用户管理', 'default')">权限管理</a></li>
            <li><a href="#" onclick="showSubMenu('../Commonpage/MyJob.aspx', '事务中心开发中...', 'point', 'icon-organ')">事务中心</a></li>
            <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '合同起草开发中...', '')">合同起草</a></li>
            <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '合同管理开发中...', '')">合同管理</a></li>
            <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '查询打印开发中...', '')">查询打印</a></li>
            <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '知识管理开发中...', '')">知识管理</a></li>
            <li><a href="#" onclick="showSubMenu('../Commonpage/building.htm', '系统管理开发中...', '')">系统管理</a></li>
        </ul>

 好了,很多其它的特性,以后继续介绍,欢迎多多提出宝贵意见。

相关文章

网站地图xml地图