signed

QiShunwang

“诚信为本、客户至上”

通过切面引入EasyUI渲染前事件

2021/6/24 20:20:12   来源:

由于用了easyui的layout来布局,有个需求就是界面支持各块左右上下关系配置。比如工作列表在左边还是右边,操作区域在中间、左边还是右边。开始想到的是在jQuery的$(function(){})按配置控制layout添加和移除各块。但这样的话就波及了页面结构,造成页面结构大动。不难发现实现布局的根本就是改变layout每个块的特性,比如region值north改south。或者east改west等。那么只需要在easyUI渲染前按配置把这些值改成目标的值即可,为此引入页面加载前事件。

1.在jQuery后、easyUI前引入公共js
在这里插入图片描述

2.公共js实现如下

//集成跨平台需要的东西
$(function () {
    ///在页面初始化之前执行的方法
    ///申明有BeforePageInitCallBack或BeforePageInitCallBackNoSession就会请求参数后回调,供easyui渲染前按参数控制行为
    try {
        var InitType = 0;
        //带会话的回调
        if (typeof (eval("BeforePageInitCallBack")) == "function") {
            InitType = 1;
        }
        //不带会话回调
        else if (typeof (eval("BeforePageInitCallBackNoSession")) == "function") {
            InitType = 2;
        }
        //请求参数执行回调
        if (InitType > 0) {
            var url = '../../sys/ashx/ashCommon.ashx?Method=';
            if (InitType == 2) {
                url = '../../sys/ashx/ashCommonNoSession.ashx?Method=';
            }
            $.ajax({
                type: "get",
                dataType: "json", //text, json, xml
                cache: false, //
                async: false, //为true时,异步,不等待后台返回值,为false时强制等待;-asir
                url: url + "SYSBeforePageInitInfo",
                success: function (result, status) {
                    var paraObj = {};
                    //处理参数数组为对象
                    if (result.length > 0) {
                        for (var i = 0; i < result.length; i++) {
                            paraObj[result[i].Code] = result[i].Value;
                        }
                    }
                    BeforePageInitCallBack(paraObj);
                }
            });

        }
    }
    catch (e) {
    } 
 
});

3.页面只需按约定申明事件方法即可,在界面引入js前申明事件方法

<script type="text/javascript">
        var patInfoDivID = "div_patientInfo";
        //lis实现的页面初始化前时间,非会话页面申明BeforePageInitCallBackNoSession方法即可
        function BeforePageInitCallBack(paraObj) {
            if (paraObj != null && paraObj.LayOutMode != null) {
                //按配置处理布局
                //式一(左侧信息,中间结果,右侧列表,按钮下侧)
                if (paraObj.LayOutMode == "1") {
                    $("#div_patientInfo").remove();
                    $("#div_patientInfoRigth").attr("region", "west");
                    $("#div_patientInfoRigth").css("width", "220px");
                    patInfoDivID = "div_patientInfoRigth";
                }
                //模式二(左侧结果,中间信息,右侧列表,按钮下侧)
                else if (paraObj.LayOutMode == "2") {
                    $("#div_patientInfo").remove();
                    patInfoDivID = "div_patientInfoRigth";
                }
                //模式三(上侧信息,左侧结果,右侧列表,按钮下侧)
                else if (paraObj.LayOutMode == "3") {
                    $("#div_patientInfoRigth").remove();
                }
                //模式四(左侧列表,中间信息,右侧结果,按钮下侧)
                else if (paraObj.LayOutMode == "4") {
                    $("#divInfoEast").attr("region", "west");
                    $("#div_patientInfo").remove();
                    $("#div_patientInfoRigth").attr("region", "west");
                }
                //模式五(左侧列表,中间结果,右侧信息,按钮下侧)
                else if (paraObj.LayOutMode == "5") {
                    $("#divInfoEast").attr("region", "west");
                    $("#div_patientInfo").remove();
                    patInfoDivID = "div_patientInfoRigth";
                }
                //模式六(上侧信息,左侧列表,右侧结果,按钮下侧)
                else if (paraObj.LayOutMode == "6") {
                    $("#div_patientInfoRigth").remove();
                    $("#divInfoEast").attr("region", "west");
                }
                //模式七(左侧信息,中间结果,右侧列表,按钮上侧)
                else if (paraObj.LayOutMode == "7") {
                    $("#div_patientInfo").remove();
                    $("#divSouthBtn").attr("region", "north");
                    $("#div_patientInfoRigth").attr("region", "west");
                    patInfoDivID = "div_patientInfoRigth";
                }
                //模式八(左侧结果,中间信息,右侧列表,按钮上侧)
                else if (paraObj.LayOutMode == "8") {
                    $("#div_patientInfo").remove();
                    patInfoDivID = "div_patientInfoRigth";
                    $("#div_patientInfoRigth").attr("region", "east");
                    $("#divSouthBtn").attr("region", "north");
                }
                //模式九(左侧列表,中间信息,右侧结果,按钮上侧)
                else if (paraObj.LayOutMode == "9") {
                    $("#div_patientInfo").remove();
                    patInfoDivID = "div_patientInfoRigth";
                    $("#divInfoEast").attr("region", "west");
                    $("#div_patientInfoRigth").attr("region", "west");
                    $("#divSouthBtn").attr("region", "north");
                }
                //模式十(左侧列表,中间结果,右侧信息,按钮上侧)
                else if (paraObj.LayOutMode == "10") {
                    $("#div_patientInfo").remove();
                    patInfoDivID = "div_patientInfoRigth";
                    $("#divInfoEast").attr("region", "west");
                    $("#divSouthBtn").attr("region", "north");
                }
            }
        }
    </script>
    <script src="../../resource/common/js/lis-common.js?Vesion=20190219150605" type="text/javascript"></script>

如此就实现了一个按后台参数传给页面加载前方法的事件切面,方便页面在加载渲染easyUI前按配置做一些逻辑,避免等easyUI渲染后控制的麻烦和浪费渲染。

通过切面做回调,降低耦合和侵入性思想。