jQuery初学jQuery easyUI的数据表格增删改查操作，遇到如下麻烦，求指教：
1、设置复选框，选中一条，点击下一页，所有记录却被全选了；
2、在修改用户时，得不到用户id，后台总是返回id=0,从而修改失败...
<%@ 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>jQuery-EasyUI演示:数据表格-基本特性</title>
<script type="text/javascript"
src="../js/jquery-easyui-1.4/jquery.min.js"></script>
<link rel="stylesheet"
href="../js/jquery-easyui-1.4/themes/default/easyui.css"
type="text/css" />
<link rel="stylesheet" href="../js/jquery-easyui-1.4/themes/icon.css"
type="text/css" />
<script type="text/javascript"
src="../js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="../js/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/commons.js"></script>
<script type="text/javascript">
$(function() {
/**
*from表单的验证
*/
//数值验证框
$('#age').numberbox({
min : 0,
max : 120,
required : true,
missingMessage : "年龄必填"
});
$('#salary').numberbox({
min : 1000,
max : 10000,
required : true,
missingMessage : "薪水必填"
});
//日期输入框
$('#date').datebox({
editable : false,
required : true,
missingMessage : "生日必填"
});
//日期时间输入框组件
$('#startTime,#endTime').datetimebox({
editable : false,
required : true,
missingMessage : "日期必填"
});
//下拉列表框
$('#city').combobox({
missingMessage : "所属城市必填",
required : true,
url : '../UserServlet?method=getCity',
valueField : 'id',
textField : 'name'
});
/**
*数据表格
*/
var flag; //表示变量
$('#t_easyui').datagrid({
idField : 'id', //只要创建数据表格就加上idfield
title : '用戶列表',
width : '100%',
height : 'auto',
url : '../UserServlet?method=getList',
fitColumns : true, //真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
striped : true, //隔行变色
//nowrap : false, //如果为true，则在同一行中显示数据。
loadMsg : '数据正在加载，请耐心等待....',
rownumbers : true, //显示行号
//singleSelect : true, //单选模式
// remoteSort : false, //取消服务器端自动排序
// sortName : 'salary', //设置按薪水排序
// sortOrder : 'desc', //降序
rowStyler : function(index, row) {
//rowIndex：该行索引从0开始
//rowData：与此相对应的记录行。
if (row.age > 25) {
return "background:red";
}
},
frozenColumns : [ [//冻结列，不能与fitColumns一起使用
{
field : 'ck',
title : '',
checkbox : true
} ] ],
//根据需要显示添加列
columns : [ [ {
field : 'username',
title : '用户名',
width : 50,
styler : function(value, row, index) {
if (value == '张三') {
return 'background-color:#ffee00;color:red;';
}
}
}, {
field : 'sex',
title : '性别',
width : 50,
formatter : function(value, row, index) {
if (value == 1) {
return '男';
} else {
return '女';
}
}
}, {
field : 'age',
title : '年龄',
width : 50
}, {
field : 'birthday',
title : '出生日期',
width : 100
}, {
field : 'city',
title : '所属城市',
width : 50,
formatter : function(value, row, index) {
if (value == 1) {
return '上海';
} else if (value == 2) {
return '北京';
} else if (value == 3) {
return '天津';
} else if (value == 4) {
return '成都';
} else {
return '深圳';
}
/* var str = '';
$.ajax({ //ajax异步请求
type : 'post',
url : '../UserServlet?method=getCityName',
cache : false,
async : false, //同步请求
data : {
id : value
},
dataType : 'json',
success : function(result) {
str = result.name;
}
});
return str; */
}
}, {
field : 'salary',
title : '薪水',
width : 100
}, {
field : 'starttime',
title : '开始时间',
width : 100
}, {
field : 'endtime',
title : '结束时间 ',
width : 100
}, {
field : 'description',
title : '描述',
width : 200,
formatter : function(value, row, index) {
return '<span title='+value+'>' + value + '</span>'
}
} ] ],
pagination : true,
pageSize : 10,
pageList : [ 5, 10, 15, 20, 50 ],
toolbar : [ {
text : '修改用户',
iconCls : 'icon-edit',
handler : function() {
var arr = $('#t_easyui').datagrid('getSelections');//返回选中元素的数组
if (arr.length != 1) {
$.messager.show({
title : '提示信息',
msg : '只能选中一行进行修改'
});
} else {
flag = 'edit';
$('#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,
sex : arr[0].sex,
age : arr[0].age,
birthday : arr[0].birthday,
city : arr[0].city,
salary : arr[0].salary,
starttime : arr[0].starttime,
endtime : arr[0].endtime,
description : arr[0].description
});
}
}
} ]
});
/**
*提交表单方法
*/
$('#btnOpen').click(
function() {
if ($('#myform').form('validate')) {
$.ajax({
type : 'post',
dataType : 'json',
url : flag == 'add' ? '../UserServlet?method=save'
: '../UserServlet?method=update',
data : $('#myform').serialize(),
cache : 'false',
success : function(result) {//操作成功
//1、关闭窗口
$('#mydialog').dialog('close');
//2、刷新页面
$('#t_easyui').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 : '表单验证未通过，请重新填写'
})
}
});
/**
*关闭窗口
*/
$('#btnClose').click(function() {
$('#mydialog').dialog('close');
});
});
</script>
</head>
<body>
<table id="t_easyui"></table>
<div id="mydialog" class="easyui-dialog" modal=true draggable=false
style="width: 300px;" closed=true title="新增用户">
<form id="myform" action="" method="post">
<input type="hidden" name="id" value="">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"
class="easyui-validatebox" required=true
validType="minLength[2,5]" missingMessage="用户名必填"
invalidMessage="用户名必须在2到5个字符之间!"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"
style="width: 150px" class="easyui-validatebox" required=true
validType="equalLength[5]" missingMessage="密码必填"></td>
</tr>
<tr>
<td>性别:</td>
<td>男<input type="radio" name="sex" value="1"
checked="checked"> 女 <input type="radio" name="sex"
value="2"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="age" id="age"
style="width: 150px"></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" name="birthday" id="date"
style="width: 150px"></td>
</tr>
<tr>
<td>所属城市:</td>
<td><input type="text" id="city" name="city"
style="width: 150px"></td>
</tr>
<tr>
<td>薪水:</td>
<td><input type="text" name="salary" id="salary"
style="width: 150px"></td>
</tr>
<tr>
<td>开始时间:</td>
<td><input type="text" name="starttime" id="startTime"
style="width: 150px"></td>
</tr>
<tr>
<td>结束时间:</td>
<td><input type="text" name="endtime" id="endTime"
style="width: 150px"></td>
</tr>
<tr>
<td>个人描述:</td>
<td><input type="text" name="description"
class="easyui-validatebox" required=true
validType="minLength[5,10]" missingMessage="个人描述必填"
invalidMessage="个人描述必须在5到10个字符之间!" style="width: 150px"></td>
</tr>
<tr align="center">
<td colspan="2"><a class="easyui-linkbutton" id="btnOpen">确定</a>
<a class="easyui-linkbutton" id="btnClose">关闭</a></td>
</tr>
</table>
</form>
</div>
</body>
</html> 后台servlet的update方法：
private void update(HttpServletRequest request, HttpServletResponse response) {
try {
int id = Integer.parseInt(request.getParameter("id"));
User user = this.bd.findById(id);
String username = request.getParameter("username");
String password = request.getParameter("password");
String sex = request.getParameter("sex");
int age = Integer.parseInt(request.getParameter("age"));
String birthday = request.getParameter("birthday");
String salary = request.getParameter("salary");
int city = Integer.parseInt(request.getParameter("city"));
String startTime = request.getParameter("starttime");
String endTime = request.getParameter("endtime");
String description = request.getParameter("description");
user.setUsername(username);
user.setPassword(password);
user.setSex(sex);
user.setCity(city);
user.setSalary(salary);
user.setBirthday(birthday);
user.setAge(age);
user.setStarttime(startTime);
user.setEndtime(endTime);
user.setDescription(description);
this.bd.update(user);
String str = "{\"status\":\"ok\",\"message\":\"操作成功!\"}";
response.getWriter().write(str);
} catch (Exception e) {
String str = "{\"status\":\"fail\",\"message\":\"操作失败!\"}";
try {
response.getWriter().write(str);
} catch (IOException e1) {
e1.printStackTrace();
}
}
}
我把你的代码copy到本机，运行了一下。发现不需要修改 <input type="hidden" name="id" /> 。
也能在编辑的时候为id赋值，然后点击提交也能把id post到后端。
那么我猜测，问题出在你的UserServlet?method=getList 方法，里面有没有id这个内容。或者你的后端，是否能接收到post类型的id参数。
如果都不是的话，请使用1.3版本的easyui。因为我是用1.3版本的。
//根据需要显示添加列
是需要将ID的值写到页面上的，这样复选框选中的时候，能够取到ID值并且传递到后台。