记得本身在很早在此以前,早先介绍自个儿的Winform开发框架和自笔者的WCF开发框架之初,小编早就提交上边包车型大巴视图,介绍本人收十的二个框架类别,当中包罗有WInform开发框架以及本身的Web开发框架,由于前段时间一向缠身Winform开发框架的提炼以及优化,并统1整理了成千成万Winform开发框架以及WCF开发框架的小说小说。随着小编的Winform稳步全面,终于有时光来打点介绍自身的Web开发框架的事宜了,上边先介绍一下作者最新优化整治的Web开发框架之权能管理种类,在那之中那几个权力管理类别能够说是集众多疼爱于壹身了,除了固定的和代码生成工具集成,可转变基础性的框架代码外,还结合Winform开发框架继承而来的超越一半据库协助,在界面层,也正是Web权限管理类别,整合了JQuery的Easy-UI界面组件,效率强大的zTree控件、Kind艾德itor在线编辑控件、界面层获取数据及保存使用基于JQuery的json数据操作,实现多少局地刷新等等操作,个中提供二种不一致的菜单布局操作,非凡方便利用于别的事情连串的界面。

json 1

第3在介绍在此之前,大家来贴多少个Web权限系统的图纸展开感性的理解先。

一)简洁的界面布局成效。那种作用顶部横幅相比紧密,左侧有局地常用的按钮操作,适合于菜单功用不太多的小事情系统,如本人的Web权限系统。

json 2

json,二)效率强大的界面公司工作系统布局。那种界面效果适合于成效比较众多,菜单展现进行分类管理等工作系统。那种框架顶部的菜单为一流菜单,单击一流菜单能够在左侧体现二级菜单,那种功效能够毫无二遍性列出所有系统的效果,而是分层次开始展览功效显示。

json 3顶部的Tab选项卡每一次打开页面包车型地铁时候,扩张八个Tab页,页面能够双击实行倒闭,也足以右键弹出菜谱举办越多操作,如下图所示。

json 4

倘诺需求领悟整个类其余功力,也得以下载《Web权限系统操作视屏》进行宏观的问询。

在提炼优化这些Web权限框架的长河中,遭受了众多的题材,11举办缓解,现计算一部分进展进行介绍。

一)使用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);
        }

如此那般处理的功能是页面只是一对刷新,体验很好。

贰)基于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
                }
            });
        }

三)在数额操作等待的时候,页面中间彰显Loading效果。

全套系统,在各类请求操作,作者都统一了作法,在界面彰显Loading的等候效果,职责完结后关门,那种功效在费劲的操作,用户体格检查会好有的,下边看看其效果以及落到实处代码。

json 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>

四)控件数据清空操作

出于添加和编排公用界面控件成分,因而大家在要添加多少的时候,须要清空或然安装有些控件的值,但大家的控件或然相比多,一种好的措施是采纳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());是把当前的用户作为充裕多少的顶头上司,其余的正是清空控件的多寡了,分化的品种控件清空的步骤有个别分化。

伍)Ashx处理程序的安全性思考

作者们在系统中,多数都以调用ashx进行多少处理,纵然一般工作系统在VPN大概内网中运作,可是也要惦记用户没登6的时候,不运维调用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("用户未登录!");
            }

六)Tab界面布局的协作。

Web权限系统提供了三种常用的菜谱布局进行政管理理,一般对于常用的事情系统肯定是没难点了。

json 6

除此以外一种功效是系统错综复杂的时候用的,能够定义超级菜单和关系的二级菜单。

json 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地图