easyui 1.5+spring 4.2+mybatis 3.4 Web示例（七） 单表操作之页面层
程序员文章站
2022-05-29 14:46:26
...
easyui 还是很强大的一个框架，特别是表格操作的界面。省去了很多开发时间。
这里我就不过多的介绍easyui具体怎么用，只是说下值得注意到地方。
sysloglist.jsp
<%@ page contentType = "text/html; charset=UTF-8" %>
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>日志查询</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/themes/icon.css">
<script type="text/javascript" src="<%=basePath%>jslib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/comutil.js"></script>
<script type="text/javascript">
$(function () {
$('#list').datagrid({
title:"日志查询",
toolbar: '#toolbar',
fit: true,
nowrap:false,
pageSize :10,
pageList:[10, 20, 50],
singleSelect:true,
rownumbers:true,
fitcolumns:true,
url :"getSysLogList",
columns:[[
{field:'operatorid',title:'操作员编号',width:fixWidth(0.2),align:'center'},
{field:'code',title:'操作员代码',width:fixWidth(0.17),align:'center'},
{field:'logtime',
title:'日志记录时间',
width:fixWidth(0.2),
align:'center',
formatter:function(value,row,index){
var unixTimestamp = new Date(value);
return unixTimestamp.toLocaleString();
}
},
{field:'logtype',
title:'日志类型',
width:fixWidth(0.1),
align:'center',
formatter : function(value, row, index) {
if (value == '1') {
return '登录信息';
} else if (value == '2'){
return '重要业务';
}
}
},
{field:'loginfo',title:'日志内容',width:fixWidth(0.3),align:'center'}
]],
pagination:true,
loadFilter:pagerFilter
});
});
var url;
var type;
//弹出新增
function newuser () {
$("#dlg").dialog("open").dialog('setTitle', '添加日志');
$("#fm").form("clear");
url = "add";
}
//弹出修改
function edituser() {
var row = $("#list").datagrid("getSelected");
if (row) {
var unixTimestamp = new Date(row.logtime);
var time = unixTimestamp.toLocaleString();
row.logtime = time;
$("#dlg").dialog("open").dialog('setTitle', '修改日志');
$("#fm").form("load", row);
url = "update";
}else{
$.messager.alert("提示信息", "请选择要修改的行");
}
}
function saveuser() {
$('#fm').form('submit', {
url: url,
onSubmit: function(){
return $(this).form("validate");
},
success:function(data){
var result = eval('('+data+')');
if (result.success == "true") {
$.messager.alert("提示信息", "操作成功");
$("#dlg").dialog("close");
$("#list").datagrid("load");
}
else {
$.messager.alert("提示信息", "操作失败");
}
}
});
}
function destroyUser() {
var row = $('#list').datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm', '确认删除?', function (r) {
if (r) {
$.post('delete', { logid: row.logid }, function (result) {
if (result.success) {
$('#list').datagrid('reload'); // reload the user data
} else {
//$.messager.alert("提示信息", "操作失败");
$.messager.show({ // show error message
title: 'Error',
msg: result.errorMsg
});
}
}, 'json');
}
});
}
else {
$.messager.alert("提示信息", "请选择要修改的行");
}
}
</script>
<style type="text/css">
#fm
{
margin: 0;
padding: 10px 30px;
}
.ftitle
{
font-size: 14px;
font-weight: bold;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.fitem
{
margin-bottom: 5px;
}
.fitem label
{
display: inline-block;
width: 80px;
}
#worp
{
padding: 0px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#worp #left
{
margin: 0px;
padding: 0px;
float: left;
width: 400px;
}
#worp #right
{
float: right;
width: 400px;
}
</style>
</head>
<body>
<div id="toolbar" style="padding: 10px">
<fieldset style="padding: 10px">
<legend> 条件搜索/工具栏 </legend>
<div>
 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" onclick="newuser()"plain="true">添加</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" onclick="edituser()" plain="true">修改</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" onclick="destroyUser()" plain="true">删除</a>
</div>
</fieldset>
</div>
<table id="list" ></table>
<div id="dlg" class="easyui-dialog" style="width: 500px; height: 350px; padding: 10px 20px;" closed="true" buttons="#dlg-buttons">
<div class="ftitle">信息编辑</div>
<form id="fm" method="post">
<div class="fitem">
<label>操作员编号</label>
<input name="operatorid" class="easyui-validatebox" required="true"/>
</div>
<div class="fitem">
<label>操作员代码</label>
<input name="code" class="easyui-validatebox" required="true" />
</div>
<div class="fitem">
<label>日志记录时间</label>
<input name="logtime" class="easyui-datetimebox" required="true"/>
</div>
<div class="fitem">
<label>日志类型</label>
<select id="logtype" class="easyui-combobox" name="logtype" required="true" panelHeight="auto" editable="false" style="width:155px;">
<option value="1">登录信息</option>
<option value="2">重要业务</option>
</select>
</div>
<div class="fitem">
<label>日志内容</label>
<input name="loginfo" class="easyui-textbox" data-options="multiline:true" style="width:200px;height:60px" required="true"/>
</div>
<input type="hidden" name="logid" id="logid" />
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="saveuser()" iconcls="icon-save">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')" iconcls="icon-cancel">取消</a>
</div>
</body>
</html>
这里是导入easyui的包，基本上用到的就这些。
comutil.js是一个我写的javascript类，里面有些共用方法。
//分页
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
//百分比
function fixWidth(percent)
{
return document.body.clientWidth * percent ; //这里你可以自己做调整
}
//时间比较
function compareDate(date1,date2){
var oDate1 = new Date(date1);
var oDate2 = new Date(date2);
if(oDate1.getTime() > oDate2.getTime()){
return false;
} else{
return true;
}
}这个方法是初始化列表的方法，easyui有两种方式初始话，我更喜欢这种，因为这种功能更全。
这里需要说明下，如果两种方式都有的话，页面就会调用两次。
因为oracle数据返回过来的时间是一串数字，所以需要格式化它。
至此，一个单表操作的功能就完成了。总体来说，这种框架对这种表结构形式的项目还是蛮好用的。
上一篇： 06-Spring复杂对象的创建
下一篇： HTML02：常用的文本标签