1,js增删改查代码 (内含代码注释)
$(function() {
var Url=$("#Murl").val(); //请求路径
$('#nn').numberbox({
min:0,
precision:2
});
$('#dg').datagrid({ //数据表格
//查询
url:Url+'/userAction.action?methodName=userList&&'+Uvalue+'='+Avalue, //请求全路径
fitColumns:true, //是否水平展开
// fit:true, //是否垂直展开
pagination:true, //分页属性
//数据格式
columns:[[
{field:'SerialNo',title:'SerialNo',width:100},
{field:'uid',title:'ID',width:100},
{field:'uname',title:'名称',width:100},
{field:'upwd',title:'密码',width:100,align:'right'}
]],
//通过数组定义工具栏
toolbar:[{
//修改
iconCls: 'icon-edit', //图标
handler: function(){
var edit=$('#dg').datagrid("getSelected"); //选中项
if(edit){
$('#ff').form('load',edit); //绑定值
$("#dd").dialog('open'); //打开窗口
}else{
alert("请选择对象!");
}
}
},'-',{
iconCls: 'icon-add', //增加
handler: function(){
$("#de").dialog('open'); //打开窗口
}
},'-',{
iconCls: 'icon-remove', //删除
handler: function(){
var edit=$('#dg').datagrid("getSelected"); //选中项
if(edit){
$('#ff').form('load',edit); //绑定值
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){ //消息窗口
if (r){
var Nid=$('#asno').val();
$.ajax({
url:Url+'/userAction.action?methodName=DeleteUser&&SerialNo='+Nid,
});
$('#dg').datagrid('reload'); // 重新载入当前页面数据
alert("删除成功!");
}
});
}else{
alert("请选择对象!");
}
}
}]
});
//定义全局变量
var Uvalue="";
var Avalue="";
//搜索框控件
$('#ss').searchbox({
searcher:function(value,name){ //值,键
if(name!=null && value!=null){
Uvalue=name; //键
Avalue=value; //值
}else{
Uvalue="";
Avalue="";
}
//搜索
$('#dg').datagrid({ //数据表格
url:Url+'/userAction.action?methodName=userList&&'+Uvalue+'='+Avalue, //请求全路径及参数
fitColumns:true,
pagination:true,
columns:[[ //数据格式
{field:'SerialNo',title:'SerialNo',width:100},
{field:'uid',title:'ID',width:100},
{field:'uname',title:'名称',width:100},
{field:'upwd',title:'密码',width:100,align:'right'}
]]
});
},
menu:'#mm',
prompt:'请输入', //搜索框提示语
});
})
2,增/改script代码
script type="text/javascript">
function add(){
$('#fe').form('submit', {
url:'${pageContext.request.contextPath}/userAction.action?methodName=AddUser', //请求全路径
success:function(){
$('#fe').form('clear'); //清空form表单
$("#de").dialog('close'); //关闭窗口
$('#dg').datagrid('reload'); // 重新载入当前页面数据
alert("增加成功!");
}
});
}
function upd(){
$('#ff').form('submit', {
url:'${pageContext.request.contextPath}/userAction.action?methodName=UpdateUser',
success:function(){
$('#ff').form('clear'); //清空form表单
$("#dd").dialog('close'); //关闭窗口
$('#dg').datagrid('reload'); // 重新载入当前页面数据
alert("修改成功!");
}
});
}
</script>
3,jsp页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/head.jsp"%>
<%@ page buffer="16kb" %>
<!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>Insert title here</title>
</head>
<script type="text/javascript">
function add(){
$('#fe').form('submit', {
url:'${pageContext.request.contextPath}/userAction.action?methodName=AddUser',
success:function(){
$('#fe').form('clear'); //清空form表单
$("#de").dialog('close'); //关闭窗口
$('#dg').datagrid('reload'); // 重新载入当前页面数据
alert("增加成功!");
}
});
}
function upd(){
$('#ff').form('submit', {
url:'${pageContext.request.contextPath}/userAction.action?methodName=UpdateUser',
success:function(){
$('#ff').form('clear'); //清空form表单
$("#dd").dialog('close'); //关闭窗口
$('#dg').datagrid('reload'); // 重新载入当前页面数据
alert("修改成功!");
}
});
}
</script>
<body>
<input id="Murl" type="hidden" value="${pageContext.request.contextPath}"/>
<table id="dg">
<!-- 搜索控件 -->
<input id="ss" style="width:300px"></input>
<div id="mm" style="width:150px">
<div value="uid" data-options="name:'uid',iconCls:'icon-ok'"> I D </div>
<div value="uname" data-options="name:'uname',iconCls:'icon-ok'"> 名称 </div>
</div>
</table>
<!-- 数据表格(修改) -->
<div id="dd" class="easyui-dialog" title="My Dialog" style="top:200px;width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:'#tb',buttons:'#bb',closed:true">
<!-- form表单 -->
<form id="ff" method="post">
<div>
<label for="SerialNo">SerialNo: </label>
<input id="asno" class="easyui-validatebox" type="text" name="SerialNo" data-options="required:true" />
</div>
<div>
<label for="uid"> u i d : </label>
<input id="auid" class="easyui-validatebox" type="text" name="uid" data-options="required:true" />
</div>
<div>
<label for="uname">uname:</label>
<input id="auname" class="easyui-validatebox" type="text" name="uname" data-options="required:true" />
</div>
<div>
<label for="upwd">u pw d:</label>
<input id="aupwd" class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />
</div>
</form>
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" onclick="upd();">保存</a>
</div>
<!-- 数据表格(增加) -->
<div id="de" class="easyui-dialog" title="My Dialog" style="top:200px;width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,toolbar:'#tb',buttons:'#be',closed:true">
<form id="fe" method="post">
<div>
<label for="SerialNo">SerialNo: </label>
<input id="bsno" class="easyui-validatebox" type="text" name="SerialNo" data-options="required:true" />
</div>
<div>
<label for="uid"> u i d : </label>
<input id="buid" class="easyui-validatebox" type="text" name="uid" data-options="required:true" />
</div>
<div>
<label for="uname">uname:</label>
<input id="buname" class="easyui-validatebox" type="text" name="uname" data-options="required:true" />
</div>
<div>
<label for="upwd">u pw d:</label>
<input id="bupwd" class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />
</div>
</form>
</div>
<div id="be">
<a href="#" class="easyui-linkbutton" onclick="add();">提交</a>
</div>
</body>
</html>