基于easyui的增删改查

源代码并且通过编译了

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<link rel="stylesheet" type="text/css" href="/Carsales/css/common.css">
<script type="text/javascript"
src="/Carsales/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css"
href="/Carsales/js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="/Carsales/js/jquery-easyui-1.2.6/themes/icon.css">
<script type="text/javascript"
src="/Carsales/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="/Carsales/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$.extend($.fn.validatebox.defaults.rules,
{
midLength : {
validator : function(value, param) {
return value.length >= param[0]
&& value.length <= param[1];
},
message : ''
},
equalLength : {
validator : function(value, param) {
return value.length == param[0];
},
message : '密码必须为四个字符'
}
});
//数值验证组件
$('#zip').numberbox({
required : true,
missingMessage : '邮编必填',
precision : 0


});
$('#telephone').numberbox({
required : true,
missingMessage : '电话必填',
precision : 0


});
var flag; //undefined判断新增和修改方法
$('#t_user').datagrid({
idField : 'id',
title : '用户列表',
fit : true,
height : 400,
url : '/Carsales/user/CustomerServlet?method=getList',
fitColumns : true,
striped : true,//隔行变色
loadMsg : '数据正在加载,请耐心的等待',
rownumbers : true,
frozenColumns : [ [ {
field : 'ck',
width : 50,
checkbox : true
} ] ],
columns : [ [


{
field : 'username',
title : '用户名',
width : 100
}, {
field : 'password',
title : '密码',
width : 100
}, {
field : 'telephone',
title : '电话',
width : 100
}, {
field : 'zip',
title : '邮编',
width : 100
}, {
field : 'address',
title : '地址',
width : 200,
formatter : function(value, record, index) {
return '<span title='+value+'>' + value + '</span>';
}
} ] ],
pagination : true,
pageSize : 15,
pageList : [ 5, 10, 15 ],
toolbar : [ {
text : '新增用户',
iconCls : 'icon-add',
handler : function() {
flag = 'add';
$('#mydialog').dialog({
title : '新增用户'
});
$('#myform').get(0).reset();
$('#mydialog').dialog('open');
}
}, {
text : '修改用户',
iconCls : 'icon-edit',
handler : function() {
flag = 'edit';
var arr = $('#t_user').datagrid('getSelections');
if (arr.length != 1) {
$.messager.show({
title : '提示信息',
msg : '只能选择一行记录进行修改'
});
} else {
$('#mydialog').dialog({
title : '修改用户'
});
$('#mydialog').dialog('open');
$('#myform').get(0).reset();
$('#myform').form('load', {
id : arr[0].id,
username : arr[0].username,
password : arr[0].password,
telephone : arr[0].telephone,
zip : arr[0].zip,
address : arr[0].address,
});
}
}
}, {
text : '删除用户',
iconCls : 'icon-remove',
handler : function() {
var arr = $('#t_user').datagrid('getSelections');
if (arr.length <= 0) {
$.messager.show({
title : '提示信息',
msg : '至少选择一行'
});
} else {
$.messager.confirm('提示信息', '确认删除', function(r) {
if (r) {
var ids = '';
for (var i = 0; i < arr.length; i++) {
ids += arr[i].id + ',';
}
ids = ids.substring(0, ids.length - 1);
$.post('/Carsales/user/CustomerServlet?method=delete', {
ids : ids
}, function(result) {
$('#t_user').datagrid('reload');
$('#t_user').datagrid('unselectAll');
$.messager.show({
title : '提示信息',
msg : '操作成功'
});
});
} else {
return;
}
});
}
}
}, {
text : '查询用户',
iconCls : 'icon-search',
handler : function() {
$('#lay').layout('expand', 'north');
}
} ]
});
/***
   提交表单方法
***/
$('#btn1')
.click(
function() {
if ($('#myform').form('validate')) {
$
.ajax({
type : 'post',
url : flag == 'add' ? '/Carsales/user/CustomerServlet?method=save'
: '/Carsales/user/CustomerServlet?method=update',
cache : false,
data : $('#myform').serialize(),
dataType : 'json',
success : function(result) {
//1关闭窗口
$('#mydialog').dialog('close');
//2刷新datagird
$('#t_user').datagrid('reload');
//3提示信息
$.messager.show({
title : result.status,
msg : result.message
});
},
error : function(result) {
$.messager.show({
title : result.status,
msg : result.message
});
}
});
} else {
$.messager.show({
title : '提示信息',
msg : '数据验证不通过,不能保存'
});
}
});
/*
关闭窗口方法
*/
$('#btn2').click(function() {
$('#mydialog').dialog('close');
});
$('#searchbtn').click(function() {
$.ajax({
  type: 'POST',
  url: '/Carsales/user/CustomerServlet?method=mysearch',
  data: {usernames:$("#usernames").val()},
  dataType: 'json',
  success: function(result) {
  $('#t_user').datagrid('loadData', result);
},
});
});
$('#clearbtn').click(function() {
$('#mysearch').form('clear');
$('#t_user').datagrid('load', {});
});
});
//序列化表单
function serializeForm(form) {
var obj = {};
$.each(form.serializeArray(), function(index) {
if (obj[this['name']]) {
obj[this['name']] = obj[this['name']] + ',' + this['value'];
} else {
obj[this['name']] = this['value'];
}
});
return obj;
}
</script>
</head>


<body>
<div id="lay" class="easyui-layout"
style="width: 100%; height: 100%; position: absolute;">
<div region="north" title="用户查询" collapsed=true style="height: 100px;">
<form id="mysearch" method="post" action="/Carsales/user/CustomerServlet">
用户名:<input name="username" id="usernames" class="easyui-validatebox" >
<a id="searchbtn" class="easyui-linkbutton">查询</a>
<a id="clearbtn" class="easyui-linkbutton">清空</a>
</form>
</div>
<div region="center">
<table id="t_user"></table>
</div>
</div>


<div id="mydialog" title="新增用户" class="easyui-dialog" closed=true
modal=true draggable=false style="width: 300px; height: 250px">
<form id="myform"  method="post">
<input type="hidden" name="id" value="">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"
class="easyui-validatebox" required=true style="width: 220px ;height: 25px"
validType="midLength[2,8]" missingMessage="用户名必填"
invalidMessage="用户名必许为2到8个字符" value=""></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"
class="easyui-validatebox" required=true style="width: 220px ;height: 25px"
validType="midLength[2,8]" invalidMessage="密码必许为2到8个字符"  missingMessage="密码必填" value=""></td>
</tr>
<tr>
<td>电话:</td>
<td><input id="telephone" type="text" name="telephone" style="width: 220px ;height: 25px" value="" required=true missingMessage="电话必填"></td>
</tr>
<tr>
<td>邮编:</td>
<td><input id="zip" type="text" style="width: 220px ;height: 25px" name="zip" value="" missingMessage="邮编必填"></td>
</tr>
<tr>
<td>地址:</td>
<td>
<!-- <input name="city" class="easyui-combobox" valueField="id" textField="name" value=""> -->
<input id="address" type="text"  style="width: 220px ;height: 25px" name="address" value="" missingMessage="地址必填">
</td>
</tr>
<!-- <tr>
<td>个人描述</td>
<td><input type="text" name="description"
class="easyui-validatebox" required=true
validType="midLength[5,50]" missingMessage="个人描述必填"
invalidMessage="个人描述必须为5到50字符" value=""></td>
</tr> -->
<tr align="center">
<td colspan="2"><a class="easyui-linkbutton" id="btn1">确定</a>
<a class="easyui-linkbutton" id="btn2">关闭</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值