前端之家收集整理的这篇文章主要介绍了
ajax增上改查,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<%@ 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>
<title>单信息查询系统</title>
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript"
src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
<script src="<%=basePath %>js/jquery.confirm.js"></script>
<link rel="stylesheet" href="<%=basePath %>css/jquery.confirm.css">
<style type="text/css">
form {
margin: 0;
padding: 0;
}
.dv-table td {
border: 0;
}
.dv-table input {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table id="dg" title="最新活动" class="easyui-datagrid"
style="width: 1200px; height: 590px" url="<%=basePath%>findActContentList.action"
toolbar="#toolbar" pagination="true" rownumbers="true"
fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="activityId" width="50">活动标示</th>
<th field="actContents" width="50">活动内容</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-add" plain="true" onclick="newUser()">添加活动信息</a> <a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-edit" plain="true" onclick="editUser()">编辑活动信息</a> <a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-remove" plain="true" onclick="destroyUser()">删除活动信息</a>
</div>
<div id="dlg" class="easyui-dialog"
style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
buttons="#dlg-buttons">
<div class="ftitle">活动信息</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>活动标示:</label> <input name="activityId"
class="easyui-validateBox" required="true" id="activityId">
</div>
<div class="fitem">
<label>活动内容:</label>
<!-- <input name="actContents" class="easyui-validateBox" required="true" id="actContents"> -->
<textarea cols="40" rows="8" id="actContents" name="actContents" class="easyui-validateBox">
</textarea>
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-ok" onclick="saveUser()">Save</a> <a
href="javascript:void(0)" class="easyui-linkbutton"
iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
<script type="text/javascript">
var url;
function newUser() {
$('#dlg').dialog('open').dialog('setTitle','添加活动信息');
$('#fm').form('clear');
url = "<%=basePath%>addactContent.action";
}
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle','编辑活动信息');
$('#fm').form('load',row);
url = '<%=basePath%>updateActContent.action?id=' + row.id;
}
}
function saveUser() {
$('#fm').form('submit',{
url : url,onSubmit : function() {
return $(this).form('validate');
},success : function(result) {
var result = eval('(' + result + ')');
if (result.errorMsg) {
$.messager.show({
title : 'Error',msg : result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('Confirm','确定要删除吗 亲:?',function(r) {
if (r) {
$.post('<%=basePath%>deleteActContent.action',{
id : row.id
},function(result) {
if (result.success) {
$('#dg').datagrid('reload');
} else {
$.messager.show({
title : 'Error',msg : result.errorMsg
});
}
},'json');
}
});
}
}
</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;
}
</style>
</body>
</html>