easyUI 编辑用户，进行数据回显

最新推荐文章于 2025-06-20 14:00:32 发布

原创最新推荐文章于 2025-06-20 14:00:32 发布 · 8.3k 阅读

1 ·

CC 4.0 BY-SA版权

web开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在jsp页面中利用easyUI的datagrid组件，通过双击事件触发form表单加载指定URL数据，实现数据的回显功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

userAction中提供查询方法
//根据id查询用户查询user，进行页面回显
public String findUserById() {
     User user = userService.findUserById(model);
     java2Json(user, new String[]  {"assetBorrowRecordsForPrincipalId","assetBorrowRecordsForUid","assetInfosForPrincipalId",			"assetRecipientsRecordsForPrincipalId","assetAdjustmentRecordsForOldUid","assetInfosForUid","assetScrapRecordsForUid",			"assetRecipientsRecordsForUid","assetScrapRecordsForPrincipalId","roles","assetRepairRecordsForPrincipalId","assetAdjustmentRecordsForNewUid","assetAdjustmentRecordsForPrincipalId","assetRepairRecordsForUid","assetInventoryRecords"});
     return NONE;
	}

在jsp 页面中，添加easyUI datagrid表格的双击事件，使用form表单的内置load方法，并携带一个URL地址

// 双击
	function doDblClickRow(rowIndex, rowData) {
		var items = $('#grid').datagrid('selectRow', rowIndex);
		var id = rowData.uid;
		//根据id发送请求，进行页面回显
		$("#userEditForm").form('load',"${pageContext.request.contextPath}/userAction_findUserById?uid="+id+"");
		

		$('#editWindow').window('open');
	}

加载记录填表。数据参数可以是一个字符串或一个对象类型,当字符串作为一个远程URL,否则作为一个当地的记录。 
代码示例:

$('#ff').form('load','get_data.php');	// load from URL  $('#ff').form('load',{  	
    name:'name2',  	
    email:'mymail@gmail.com',  	
    subject:'subject2',  	
    message:'message2',  	
    language:5  
});

<!-- 双击进入修改用户信息页面 -->
	<div class="easyui-window" title="修改用户信息窗口" id="editWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div style="overflow:auto;padding:5px;" border="false">
			<form id="userEditForm" method="post"
			action="${pageContext.request.contextPath }/userAction_edit">
			<table class="table-edit" width="95%" align="center">
				<tr class="title">
					<td colspan="4">基本信息</td>
				</tr>
				<tr>
					<td>登录名:</td>
					<td><input type="text" name="userCode" id="userCode"
						class="easyui-validatebox" required="true" /></td>
					<td>真实姓名：</td>
					<td><input type="text" name="username" id="username"
						class="easyui-validatebox" required="true" /></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"
						class="easyui-validatebox" required="true"
						validType="minLength[5]" /></td>
				</tr>
				<tr class="title">
					<td colspan="4">其他信息</td>
				</tr>
				<tr>
					<td>生日:</td>
					<td><input type="text" name="birthday" id="birthday"
						class="easyui-datebox" /></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td><select name="gender" id="gender" class="easyui-combobox"
						style="width: 150px;">
							<option value="">---请选择---</option>
							<option value="男">男</option>
							<option value="女">女</option>
					</select></td>
					<td>用户状态:</td>
					<td><select name="userState" id="userState"
						class="easyui-combobox" required="true" style="width: 150px;">
							<option value="">---请选择---</option>
							<option value="未激活">未激活</option>
							<option value="已激活">已激活</option>
							<option value="已确认">已确认</option>
							<option value="已注销">已注销</option>
					</select></td>
				</tr>
				<tr>
					<td>联系电话：</td>
					<td><input type="text" name="telephone" id="telephone"
						class="easyui-validatebox" required="true" /></td>
					<td>邮箱：</td>
					<td><input type="text" name="email" id="email"
						class="easyui-validatebox" required="true" /></td>
				</tr>
				<tr>
					<td>备注:</td>
					<td colspan="3"><textarea name="remark" style="width: 80%"></textarea></td>
				</tr>
				<tr>
					<td colspan="4" align="right">
						<div class="datagrid-toolbar">
							<a id="save" icon="icon-save" href="#" class="easyui-linkbutton"
									plain="true">保存</a>
							<a id="back" icon="icon-undo"
								href="javascript:void(0);"
								class="easyui-linkbutton" plain="true">取消</a>
							
						</div>
					</td>
				</tr>
				</table>
		</form>
		</div>
	</div>