公司框架學習之JSP布局《三》

一、布局效果

二、TableQues.jsp源碼

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="/common/common.jsp" %>
<div id="${id}" class="easyui-layout" fit="true">
	<div region="north" border="false">
		<query:form name="Form">
			<query:selectx name="QUES_TYPE" label="題型" source="SYS.TLX" value=""/>
			<query:selectx name="QUES_CONFIG" label="題標識" source="SYS.TBS" value=""/>
		</query:form>
	</div>
	<div region="center" border="false">
		<table:datagrid name="Table" singleSelect="true" pagination="true" idField="id" autoQuery="true"
						dataOptions="fitColumns:true"
						toolbar="[{text:'新增',iconCls:'icon-add',handler:ques.add},'-',
					  {text:'修改',iconCls:'icon-edit',handler:ques.edit},'-',
					  {text:'刪除',iconCls:'icon-edit',handler:ques.del},'-',
					  {text:'刷新',iconCls:'icon-remove',handler:ques.reflesh},'-',
					  {text:'批量導入',iconCls:'icon-edit',handler:ques.importQues}]">
			<table:param name="sql">
				SELECT QUES_ID,QUES_TYPE,QUES_TITLE,SELECT_A,SELECT_B,SELECT_C,SELECT_D,
				QUES_ANSWER,QUES_DETAIL,QUES_CONFIG,QUES_SCORE FROM table_ques where 1=1
				and $F{QUES_TYPE}
				and $F{QUES_CONFIG}
			</table:param>
			<table:param name="columns">
				<columns>
					<column field="quesId" hidden="true"/>
					<column field="quesType" title="題型" dict="SYS.TLX" width="40" align="center"/>
					<column field="quesTitle" title="題目" width="40" align="center"/>
					<column field="selectA" title="A選項" width="40" align="center"/>
					<column field="selectB" title="B選項" width="40" align="center"/>
					<column field="selectC" title="C選項" width="40" align="center"/>
					<column field="selectD" title="D選項" width="40" align="center"/>
					<column field="quesAnswer" title="答案" width="40" align="center"/>
					<column field="quesDetail" title="詳解" width="40" align="center"/>
					<column field="quesConfig" title="題標識" dict="json:['0','單選題','1','多選題']" width="40" align="center"/>
					<column field="quesScore" title="題分" width="40" align="center"/>				
				</columns>
			</table:param>
		</table:datagrid>

	</div>
</div>
<script type="text/javascript">
    <page:script>
    window.ques = {};
    var $form = $('#Form', $c);
    var $table = $('#Table', $c);
    Datagrid.init($table, $form);
    // 新增
    ques.add = function () {
        var params = {};
        var url = ctx+"/jsp/feiwei/ssss/tableQues_insertOrupdate.jsp";
        var options = {
            title: "出題信息新增", modal: true, width:600, height:450,
            onClose: function () {
                Datagrid.reload($table);
            }
        };
        Dialog.open(url, options, params);
    };

    // 修改
    ques.edit = function () {
        var row = $('#Table', '#${id}').datagrid('getSelected');
        if (row) {
            var params = {quesId: row.quesId};
            var url = ctx + "/jsp/feiwei/ssss/tableQues_insertOrupdate.jsp";
            var options = {
                title:"出題信息編輯", modal: true, width: 600, height: 450,
                onClose: function () {
                    Datagrid.reload($table);
                }
            };
            Dialog.open(url, options, params);
        } else {
            $.messager.alert('提示', '請選中一條任務');
        }
    };

    // 刪除
    ques.del = function () {
        var row = $('#Table', '#${id}').datagrid('getSelected');
        if (row) {
            $.messager.confirm("提示", "確定要刪除這條數據?", function (r) {
                if (r) {
                    Service.invoke("tableQuesService.delete", {"quesId": row.quesId}, function (text) {
                        if (text) {
                            $.messager.alert('提示', '刪除成功!', "info", function () {
                                Datagrid.reload($table);
                            });
                        }
                    });
                }
            });
        } else {
            $.messager.alert('提示', '請選中一條任務');
        }
    };
    //刷新
    ques.reflesh = function () {
        Datagrid.reload($table);
    };
    //批量出題
　　ques.importQues = function (){
	var params ={action:"/feiwei_import_ques.do"};
        var url = ctx + "/jsp/feiwei/ssss/fileup.jsp";
        window.parent.Tab.open({title:"批量導入", href: url, params:params});
	}
    Page.init($c);

    </page:script>
</script>

　　相關jsp:common.jsp

<%@ page language="java" pageEncoding="utf-8"%>
<%@ page import="com.feiwei.framework.core.*"%>
<%@ page import="com.feiwei.framework.util.*"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/html" prefix="html"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/view" prefix="view"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/page" prefix="page"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/query" prefix="query"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/edit" prefix="edit"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/table" prefix="table"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/fr" prefix="fr"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/util" prefix="util"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/sys" prefix="sys"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/date" prefix="date"%>
<%@ taglib uri="http://dev.feiwei.cn/tags/chart" prefix="chart" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<% pageContext.setAttribute("ctx",request.getContextPath()); %>
<% pageContext.setAttribute("base",WebUtils.getBase()); %>
<% pageContext.setAttribute("id",String.valueOf(System.nanoTime())); %>
<% pageContext.setAttribute("online", OnlineUserManager.getOnlineUser()); %>
<% pageContext.setAttribute("date",DateUtils.getDateVariableMap());%>

　　相關jsp:system.jsp

<!DOCTYPE HTML>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="/common/common.jsp" %>
<page:set var="leftDefault" service="ConfigService.getValue('_layoutDefault')"/>
<page:set var="app" service="AppService.getApp(${param.appId})"/>
<page:set service="roleService.getUserRole(${online.userId})" var="role"/>
<c:set var="upload_url" value="${sys:abspath('/idcard/upload.do?loginId=')}${online.loginId}"/>
<html>
<head>
    <%@ include file="/frame/header_all.jsp" %>
    <html:js src="/js/sys.client.js"/>
   <!--  <style>
    	.large {
    		width:174px;
    		height:174px;
    		border-radius:100%;
    		box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
						0 0 7px 7px rgba(0, 0, 0, 0.25), 
				inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    		display:block;
    		z-index:10000;
    	}
    </style> -->
    <script type="text/javascript">
        window.SystemPage = {};
        window.echarts = null;
        require.config({
            paths: {
                echarts: '/js/echarts/build/dist'
            }
        });
        require(
                [
                    'echarts',
                    'echarts/chart/bar',// 地圖
                    'echarts/chart/map', // 地圖
                    'echarts/chart/gauge', //
                    'echarts/chart/line', // 線條
                    'echarts/chart/radar', // 雷達
                    'echarts/chart/pie' //餅圖
                ],
                function (ec) {
                    echarts = ec;
                }
        );
        // 退出系統
        SystemPage.logout = function () {
            if (confirm("確認退出系統？")) {
                /* messager.stop(); */
                window.location = "/logout.do";
            }
        };
        // 刷新當前頁面
        SystemPage.refresh = function () {
            window.location.reload();
        };

        //通過滑輪放大或縮小圖片
        SystemPage.mouseImgWheel = function (obj) {
            var zoom = parseInt(obj.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12;
            if (zoom > 0) {
                obj.style.zoom = zoom + '%';
            }
            return false;
        }

        var rota = 0;//旋轉次數
        //旋轉90度
        SystemPage.rotation90 = function () {
            rota++;
            $("#previewImg").rotate(90 * rota);
            rota = rota >= 5 ? 0 : rota;
        }

        SystemPage.rotation180 = function () {
            rota++;
            $("#previewImg").rotate(180 * rota);
            rota = rota >= 3 ? 0 : rota;
        }

        SystemPage.previewImage = function (id, array) {
            var preview = $("#mainImagePreview");
            $("#previewImg", preview).attr("src", "");
            $("#previewImg", preview).attr("yyid", "");
            preview.window("open");
            var src = "${ctx}/file/downloadfj.do?id=" + id + "&sjtlfj=" + Math.random();
            $("#previewImg", preview).attr("src", src);
            $("#previewImg", preview).attr("yyid", id);
            var previewWidth = preview.width();//獲取圖片的寬度
        }

        //衛監預覽2016/06/30
        SystemPage.previewWjImage = function (id) {
            var preview = $("#mainImagePreview");
            $("#previewImg", preview).attr("src", "");
            preview.window("open");
            var src = "${ctx}/file/downloadWjFj.do?id=" + id + "&sjtlfj=" + Math.random();
            $("#previewImg", preview).attr("src", src);
            var previewWidth = preview.width();//獲取圖片的寬度
        }

        //文件總覽
        SystemPage.allPreviewImg = function (array, title) {
            var preview = $("#allMainImagePreview");
            $("#imgList", preview).html("");
            preview.window("open");
            for (var i = 0; i < array.length; i++) {
                var img = '<div  style="width:540px;height:560px;margin-top:20px;margin-left:20px;position:relative;float:left; text-align:center;" ><img style="cursor:pointer;width="520px" height="560px";" title="' + title[i] + '" onclick="SystemPage.previewImage(' + array[i] + ','+array+')" src="${ctx}/file/downloadfj.do?id=' + array[i] + '" alt="暫無圖片" /></div>';
                $("#imgList", preview).append(img);
            }
            $("#Imgarray").data("array",array);
        }
        

        // 回到子系統選擇
        SystemPage.index = function () {
            window.location = "${ctx}/frame/index.jsp";
        };

        // 顯示更新日志
        SystemPage.showUpdate = function (force) {
            var updateId = force ? 0 : ($.cookie("updateId") || "0");
            Service.invoke("UpdateService.hasUpdate", {"updateId": updateId}, function (text) {
                if (text == "true") {
                    var url = ctx + "/admin/update/update_view.jsp?updateId=" + updateId;
                    var options = {title: "系統更新", "iconCls": "icon-tip", modal: false, width: 700, height: 500};
                    Dialog.open(url, options);
                }
            });
        };

        // 折疊Panel
        SystemPage.collapse = function (region) {
            $("body").layout("collapse", region);
        };

        // 展開Panel
        SystemPage.expand = function (region) {
            $("body").layout("expand", region);
        };

        // 用戶信息
        SystemPage.userInfo = function () {
            var url = ctx + "/admin/user/user_info.jsp";
            var options = {
                title: "用戶信息", modal: false, width: 480, height: 320, onClose: function () {
                }
            };
            Dialog.open(url, options, {});
        };

        // 打開菜單
        SystemPage.openMenu = function (menu, closeable) {
            var target = menu.target || "FRAME";
            if (target == "FRAME") {//框架內打開
                var options = {"title": menu.name, "href": menu.url, "closable": true};
                options.params = $.eval("{" + (menu.params || "") + "}");
                Tab.open(options);
            } else if (target == "BLANK") {//打開新窗口
                window.open(menu.url);
            } else if (target == "SELF") {//當前窗口打開
                window.location = menu.url;
            } else if (target == "JS") {//執行腳本
                eval(menu.url);
            } else if (target == "LOGINOUTAPP") {//登陸外部app
                var text = Service.invoke("LoginOtherAppService.loginOtherApp", {'url': menu.url});
                window.open(text, "_self")
            }
        };

        // 鎖定
        SystemPage.lock = function () {
            if (!SystemPage.lockdiv) {
                SystemPage.lockdiv = $("#lock");
            }
            $("body").mask(SystemPage.lockdiv);
            $("#password").val(null);
            $("#password").focus();
            thclient.insertCache("AllowF5,false");
            thclient.insertCache("AllowF11,false");
        };

        // 解鎖String region, String loginName, String password
        SystemPage.unlock = function () {
            if ($.trim($("#password").val()) == "")return null;
            Service.invoke("loginService.unLock", {
                region: '${online.regionId}',
                loginName: '${online.loginName}',
                password: $("#password").val()
            }, function (r) {
                if (r == "true") {
                    $("body").unmask();
                    thclient.insertCache("AllowF5,true");
                    thclient.insertCache("AllowF11,true");
                } else {
                    $("#password")[0].setCustomValidity("請輸入正確的密碼!");
                    $("#password").focus();
                }
            });
        };

        SystemPage._unlock = function (e) {
            if (e.keyCode == 13) {
                SystemPage.unlock();
            }
        };

        SystemPage._lock = function (e) {
            if (e.altKey && e.keyCode == 76) {
                SystemPage.lock();
            }
        };

        SystemPage.initAppScript = function () {
            try {
                eval("${app.initScript}" || "{}");
            } catch (E) {
            }
        };

        //注銷
        SystemPage.zx = function () {
            $.post(ctx + "/logout.do", function (data) {
                thclient.zx();
            });
        };

        $(function () {
            thclient.checkLoginAndMax();//登錄成功默認最大化
            Page.parse(document);
            thclient.insertCache("AllowCtrlF12," + app.config.develop);//增加開發模式
            $("#OBJECT").appendTo("body");//延遲添加組件
            Page.bindAction($("body"), SystemPage);
            setTimeout(function () {
                $("#navs a:contains('首頁')").each(function () {
                    $(this).closest("li").trigger("click");
                });
            }, 500);
            LoginCenter.addUser("${online.loginName}", "${sys:config("APP_NAME")}", "${online.user.deptName}");
//            SystemPage.showUpdate();//增加系統更新日志顯示
        });
        SystemPage.getYjInfo = function() {
            var yjInfo = Service.invoke("totalMonthService.getYjInfo",{});
            yjInfo = $.parseJSON(yjInfo);
            return yjInfo;
        }

        SystemPage.getWtInfo = function() {
            var wtInfo = Service.invoke("totalMonthService.getWtInfo",{});
            wtInfo = $.parseJSON(wtInfo);
            return wtInfo;
        }

        SystemPage.previousPage = function () {
            var yyid = $("#previewImg").attr("yyid");
            var array = $("#Imgarray").data("array");
            var id = 0;
            for (var i = 0; i < array.length; i ++) {
                if (array[i] == yyid) {
                    if (i == 0) {
                        id = array[array.length-1];
                    } else {
                        id = array[i-1];
                    }
                }
            }
            $("#mainImagePreview").window("close");
            var preview = $("#mainImagePreview");
            preview.window("open");
            var src = "${ctx}/file/downloadfj.do?id=" + id + "&sjtlfj=" + Math.random();
            $("#previewImg", preview).attr("src", src);
            $("#previewImg", preview).attr("yyid", id);
        };

        SystemPage.nextPage = function () {
            var yyid = $("#previewImg").attr("yyid");
            var array = $("#Imgarray").data("array");
            var id = 0;
            for (var i = 0; i < array.length; i ++) {
                if (array[i] == yyid) {
                    if (i == array.length-1) {
                        id = array[0];
                    } else {
                        id = array[i+1];
                    }
                }
            }
            $("#mainImagePreview").window("close");
            var preview = $("#mainImagePreview");
            preview.window("open");
            var src = "${ctx}/file/downloadfj.do?id=" + id + "&sjtlfj=" + Math.random();
            $("#previewImg", preview).attr("src", src);
            $("#previewImg", preview).attr("yyid", id);
        };

        Service.invoke("UserService.judgeUserInfoCompelete",{},function (text) {
            if(text == "false"){
                var url = ctx + "/admin/permission/user/pwd_edit.jsp";
                var options = {
                    title: "用戶信息", modal: true, width: 400, height: 410, onClose: function (data) {
                        if (!data) {
                            $.messager.alert("系統提示", "對不起，請您先完善用戶信息！", null, function () {
                                Dialog.open(url, options, {});
                            });
                        }
                    }
                };
                Dialog.open(url, options,{pwd:true});
            }
        });
    </script>
</head>

<style>
    .sysBody .panel {
        width: 100%;
    }
</style>

<body id="allPanel" class="easyui-layout sysBody" data-event="keydown:_lock">
<edit:hidden id="Imgarray" name="Imgarray" value="123"/>
<div id="NothPanel" region="north" split="false" border="false" href="${ctx}/frame/top.jsp"
     params="{'appId':'${param.appId}'}"
     style="background:none; height:50px;overflow:hidden;-webkit-user-select:none;">
</div>

<div id="leftMenuPanel" region="west" split="false" border="false" iconCls="icon-menu"
     style="
     <c:if test="${leftDefault=='1'}"> width:200px;</c:if>
     <c:if test="${leftDefault!='1'}"> width:0px;</c:if> background:none;-webkit-user-select:none;overflow-x: hidden;">
</div>
<div id="CenterPanel" region="center" border="false" style="position:fixed;z-index: -1;">
    <div id="Tabs" class="easyui-tabs" fit="true" border="false" style="background:none;"
         data-options="onContextMenu:Tab.onContextMenu">
    </div>
</div>

<div id="lock" style="display:none;z-index:99999999;background:#fff;height:100%;padding-top:25%;">
    <div class="lockPanel">
        <span style="font-size:14px;color: #666;">請輸入密碼:</span>
        <input type="password" id="password" name="password"
               style="border:none;border-bottom:1px solid #d3d3d3;height:28px;" required data-event="keyup:_unlock"/>
        <input type="button" class="button" value="解鎖" data-event="click:unlock"/>
        <input type="button" class="button" value="返回登錄" data-event="click:zx"/>
    </div>
</div>

<%@ include file="/common/fragment.jsp" %>
<c:if test="${role.roleType eq '1'}">
    <jsp:include page="${ctx}/common/develop.jsp"></jsp:include>
</c:if>
<div id="mainImagePreview" class="easyui-window" title="預覽" style="margin: 0 auto;"
     data-options="iconCls:'icon-tip',modal:true,closed:true,
        collapsible:false,
	    minimizable:false,
	    maximizable:false,
	    width:1200,
	    height:600,
        ">
    <img id="previewImg" src="" alt="暫無圖片"  onmousewheel="return SystemPage.mouseImgWheel(this);"/>
    <br/>
    <div style="position:absolute; 	bottom:30px;margin-left: 350px;">
        <%--<a style="margin-left: 0px;" href="#" id="Rotation" onclick="SystemPage.previousPage();"
           class="easyui-linkbutton" data-options="iconCls:'icon-ok'">上一頁</a>--%>
        <a style="margin-left: 20px;" href="#" id="Rotation" onclick="SystemPage.rotation90();"
           class="easyui-linkbutton" data-options="iconCls:'icon-ok'">旋轉90</a>
        <a style="margin-left: 20px;" href="#" id="Rotation" onclick="SystemPage.rotation180();"
           class="easyui-linkbutton" data-options="iconCls:'icon-ok'">旋轉180</a>
        <%--<a style="margin-left: 20px;" href="#" id="Rotation" onclick="SystemPage.nextPage();"
           class="easyui-linkbutton" data-options="iconCls:'icon-ok'">下一頁</a>--%>
    </div>
</div>

<div id="allMainImagePreview" class="easyui-window" title="總覽圖" style="margin:0 auto"
     data-options="iconCls:'icon-tip',modal:true,closed:true,
        collapsible:false,
	    minimizable:false,
	    maximizable:false,
	    width:$(window).width(),
	    height:$(window).height()
        ">
    <div id = "imgList" style="width:1200px;margin:0 auto;"></div>
</div>
<iframe id="h_frame" class="h_frame"
        style="position:absolute;left:0;width:100%;height:100%; border:none;display:none;"></iframe>
</body>
</html>

三、說明

　　整個頁面布局基本原理：easyui做html(骨架)、bootstrap做css(衣服)、jquery做js(活動)

　　system.jsp當作引入jsp頁面的js、css、image等靜態資源，將整個頁面的header、body、footer都固定了，body就是個人編寫的jsp頁面的填充

　　common.jsp則引入公司自定義標簽、jsp頁面全局變量

　　TableQues.jsp則是整個頁面主體，做數據查詢、展示、crud操作

　　jsp頁面基本沒有原生的html、css、js代碼，全部都用自定義標簽封裝了，至於怎么封裝的，后續會寫，個人能力有限，有不足之處還望同行見諒

　　此jsp頁面只是做一般的查詢、展示功能，后續會展示增改頁面（其實就是一個頁面，刪除在此頁面即可完成）

　　在本頁面還有兩個值得關注的功能（其實就一個）：

　　　　　　在jquery代碼中可以調用service層執行刪除操作，在jsp繞過controller層，調用service層執行業務邏輯代碼。

　　　　　　標簽體中寫sql語句，就可以實現在數據中寫sql語句一樣將查詢出的數據在頁面展示。

　　　　　　題外話：該功能是整個框架最亮瞎眼之處，剛進入公司，在框架上寫CRUD操作。當時，看框架結構就蒙了，怎么和平時搭的hibernate+spring+spring框架不一樣呢，springmvc.xml差不多，hibernate和服務器配置文件關聯使用監聽器加載，見都沒見過，最奇葩的算applicationContext.xml配置了，只注冊了一個SpringUtils工具類bean。jsp頁面調用后台不寫controller類，直接在標簽屬性或jquery代碼中寫service類.方法（參數）就達到與后台交互。當時，組長安排我們第一天部署環境idea+公司框架部署，第二天在公司框架上寫crud，后續項目來了，根本沒時間看底層代碼，后台辭職了，才有時間去看底層。在看底層代碼時，時而奔潰，時而興奮，喜憂參半，都快成神經病了。總的來說，看底層對個人編程思想有很大提升，編程全局觀大大地提升。