jQuery easyUI

求一个网名 发布于 2015/04/06 11:35
阅读 539
收藏 1

初学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();
			}
		}
	}



加载中
0
topdogs
topdogs
你把<input type="hidden" name="id" /> 这个加个 id="id"试一下。
求一个网名
求一个网名
能帮我再看下嘛
求一个网名
求一个网名
没法样
0
topdogs
topdogs

我把你的代码copy到本机,运行了一下。发现不需要修改 <input type="hidden" name="id" /> 。

也能在编辑的时候为id赋值,然后点击提交也能把id post到后端。

那么我猜测,问题出在你的UserServlet?method=getList 方法,里面有没有id这个内容。或者你的后端,是否能接收到post类型的id参数。

如果都不是的话,请使用1.3版本的easyui。因为我是用1.3版本的。

求一个网名
求一个网名
刚才是我的忘了设置id了,但设置id之后,又出现了问题,执行用户更新的时候,能进入servlet的update方法,但不能执行更新数据库信息的update方法,即代码中的this.bd.update(user),从而不能达到更新的目的
0
Helloall
Helloall
  <input type="hidden" name="id" value="在这里填入id的值 "> 提交应该能够在后台获取到它。
0
alexgaoyh
alexgaoyh

 //根据需要显示添加列

是需要将ID的值写到页面上的,这样复选框选中的时候,能够取到ID值并且传递到后台。

0
sikele
sikele
自己用mvvm实现一切都变得简单了,根本不用研究easyui
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部