典型的Easyui+Spring+Mybatis例子,方便自己的记忆.
JSP:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>软件信息管理</title>
<%@include file="../include/head.jsp"%>
<script type="text/javascript" src="<%=basePath%>/resources/js/deploySoftware/deploySoftwareInfo.js"></script>
</head>
<body>
<table id="softDg" ></table>
<div id="toolbar" style="height: auto">
<div id="pFilter">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add", οnclick="addSoftwareInfo()">新增</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit", οnclick="editSoftwareInfo()">修改</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel", οnclick="delrow()">删除</a>
<span class="filterTip">程序名</span><input id="qSoftName" name="qSoftName" class="easyui-textbox"/>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload", οnclick="searchSoftware()">查询</a>
</div>
</div>
<div id="editSoftwareDg" data-options="minimizable:false, maximizable:false, modal:true,closed:true,width:350,height:300" ></div>
</body>
</html>
新增|修改JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<form id="editSoftwareInfo" method="post" >
<input type="hidden" name="id" value="${deploySoftwareInfo.id }">
<div style="width: 220px;height:200px;padding: 20px 0px 0px 40px" >
<div class="fitem" style="padding: 5px 0px 5px 0px">
<label style="position: relative;text-align: left" >软件名:</label> <br>
<input id='softName' name="softName" value="${deploySoftwareInfo.softName}" class="easyui-validatebox" style="width:100px;border:1px solid #ccc;" data-options="required:true" />
</div>
<div class="fitem" style="padding: 5px 0px 5px 0px">
<label style="position: relative;text-align: left" >安装路径:</label>
<input id='installPath' name="installPath" value="${deploySoftwareInfo.installPath}" class="easyui-validatebox" style="width:250px;border:1px solid #ccc;" data-options="required:true" />
</div>
<div class="fitem" style="padding: 5px 0px 5px 0px">
<label style="position: relative;text-align: left" >软件描述:</label>
<input id='softDesc' name="softDesc" value="${deploySoftwareInfo.softDesc}" class="easyui-textbox" style="width:250px;height:70px;border:1px solid #ccc;" data-options="multiline:true" />
</div>
</div>
<div align="center" style="line-height: 30px;">
<a href="javascript:void(0)" class="easyui-linkbutton" id="saveBtn" iconcls="icon-ok" οnclick="submitSoft();">保 存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-no" οnclick='$("#editSoftwareDg").dialog("close")'>关 闭</a>
</div>
</form>
<script type="text/javascript">
function submitSoft(){
var softName = $('#softName').val();
var installPath = $('#installPath').val();
if(softName==""||installPath==""){
$.messager.alert('提示信息','程序名和安装路径不能为空!');
return;
}
$('#editSoftwareInfo').form("submit",{
url: 'deploySoftware/editSoftwareInfo',
onSubmit:function(){
},
success:function(res){
if(res == "success"){
$("#editSoftwareDg").dialog('close');
$("#softDg").datagrid('reload');
}else{
$.messager.alert("提示",res);
}
}
})
}
</script>
JS:
/**软件管理界面JS*/
$(document).ready(function() {
loadSoftwareInfo();
});
function loadSoftwareInfo(){
$('#softDg').datagrid({
url : 'deploySoftware/getSoftwareInfoList',
checkbox : true,
fitColumns : true,
pagination : true,
striped : true,
remoteFilter:true,
pageList : [ 20, 30 ],
rownumbers : true,
pageSize : 20,
singleSelect : false,
method : 'get',
fit : true,
queryParams :{},
toolbar : '#toolbar'/*[{
iconCls: 'icon-add',
text : "新增",
handler: addSoftwareInfo
},{
iconCls: 'icon-edit',
text : "修改",
handler: editSoftwareInfo
},{
iconCls: 'icon-cancel',
text : "删除",
handler : delrow
}]*/,
frozenColumns : [ [ { field : 'Id', title : '虚属性', checkbox : true} ] ],
columns : [[
{
field : "softName",
title : "软件名",
halign : 'center',
sortable : false,
width : $(this).width() * 0.27
},{
field : "installPath",
title : "安装路径",
halign : 'center',
sortable : false,
width : $(this).width() * 0.27
},{
field : "softDesc",
title : "软件描述",
halign : 'center',
sortable : false,
width : $(this).width() * 0.27
}/*{
field : "operator",
title : "操作",
halign : 'center',
formatter: softwareFormatter
}*/
]]
});
}
/* function softwareFormatter(value,row,index) {
var str = '';
str+=" <a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" iconCls=\"icon-edit\" οnclick=\"editSoftwareInfo("+row.id+")\">修改</a>";
str+=" <a href=\"javascript:void(0)\" class=\"easyui-linkbutton\" iconCls=\"icon-delete\" οnclick=\"delSoftwareInfo("+row.id+");\">删除</a>";
return str;
}*/
/** 修改*/
function editSoftwareInfo(){
var rows = $('#softDg').datagrid('getChecked');
if(rows.length == 1){
var id = rows[0].id;
$('#editSoftwareDg').dialog({
title : "编辑软件",
href : "deploySoftware/toEditSoftwareInfo/"+id,
cache : false
}).dialog('open');
}else{
$.messager.alert("提示","一次修改一个程序");
}
}
/** 新增*/
function addSoftwareInfo(){
$('#editSoftwareDg').dialog({
title : "新增软件",
href : "deploySoftware/toEditSoftwareInfo/"+"-1",
cache : false
}).dialog('open');
}
/** 删除*/
function delrow(){
var rows = $('#softDg').datagrid('getChecked');
if(rows.length<1){
$.messager.alert("提示","请选择至少一个程序");
retutn;}
var ids = [];
for(var i in rows){
ids.push(rows[i].id);
}
$.post("deploySoftware/delDeploySoftwareInfo/"+ids,{},function(callbackData){
$('#softDg').datagrid('reload');
/*$('#ed').dialog('close'); */
});
}
/** 搜索*/
function searchSoftware(){
var queryParams = $('#softDg').datagrid('options').queryParams;
queryParams.softName = $('#qSoftName').val();
$("#softDg").datagrid("reload",queryParams);
}