Easyui+Spring+Mybatis完整示例(前台)

典型的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);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值