一、布局效果
二、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，后续项目来了，根本没时间看底层代码，后台辞职了，才有时间去看底层。在看底层代码时，时而奔溃，时而兴奋，喜忧参半，都快成神经病了。总的来说，看底层对个人编程思想有很大提升，编程全局观大大地提升。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
