easyui的数据网格实现修改功能

灰太狼 2022-05-12 08:22 205阅读 0赞

项目ssm(spring+springmvc+mybatis)

编译工具：eclipse

后台框架：easyui

因为easyui数据网格显示的是一种json格式数据：

{
    
    
    "total":1,
    
    "rows":[
    
    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"}
    
    ]
    
    
    }

注：重点就是返回total和rows两个属性，而rows就是封装了我们要返回的数据集

搭建easyui框架可以参考：[easyui教程][easyui]

页面展示：

![70][]

前端页面：

//工具栏
        <div id="tb" style="padding:5px;height:auto">
        <div style="margin-bottom:5px">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
        </div>
        <div>
            
        <input id="keyWord" style="line-height:26px;border:1px solid #ccc" placeholder="输入查询关键字">
        <select id="keyType" class="easyui-combobox" style="width: 100px;height:auto">
            <option value="a_name"
                            <c:if test="${keyType=='a_name'}">selected="selected"</c:if>>姓名</option>
            <option value="a_phone"
                            <c:if test="${keyType=='a_phone'}">selected="selected"</c:if>>联系电话</option>
        </select>
        <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
        </div>
    </div>
     
    <table id="tt" class="easyui-datagrid" style="width:100%;height:550px"
            url="<%=request.getContextPath()%>/admin/adminList" 
             toolbar="#tb"
            singleSelect="true" fitColumns="true"  pagination="true">
        <thead>
            <tr>
            <th field="a_id" width="60">管理员编号</th>
                <th field="a_account" width="60">管理员账号</th>
                <th field="a_name"  width="70">姓名</th>
                <th data-options="field:'a_sex',width:60,align:'center',formatter:sexFormatter">性别</th>
                <th field="a_phone" width="100">联系电话</th>
                <th data-options="field:'a_level',width:60,align:'center',formatter:levelFormatter">级别</th>
                <th data-options="field:'a_status',width:60,align:'center',formatter:statusFormatter">状态</th>
                <th data-options="field:'_operate',width:80,align:'center',formatter:formatOper">操作</th>
            </tr>
        </thead>
    </table>
     
    
    <div id="dlg2" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
    		closed="true" buttons="#dlg-buttons">
    	<form id="fm2" method="post" >
    	<input name="a_id" type="hidden" >
    		<div class="fitem">
    			<label>用户账号:</label>
    			<input name="a_account" id="account" class="easyui-validatebox" required="true" readonly="readonly">
    			<span id="account_msg" style="color:red;"></span>
    		</div>
    		<div class="fitem">
    			<label>密码:</label>
    			<input name="a_password"  id="pswd" class="easyui-validatebox" required="true" >
    			<span id="pswd_msg" style="color:red;"></span>
    		</div>
    		<div class="fitem">
    			<label>姓名:</label>
    			<input name="a_name" class="easyui-validatebox" required="true">
    		</div>
    		<div class="fitem">
    			<label>性别</label>
    			 <select name="a_sex">
    	       <option value="0" selected>男</option>
    	       <option value="1">女</option>
    	       </select>
    		</div>
    		<div class="fitem">
    			<label>联系电话:</label>
    			<input name="a_phone" class="easyui-validatebox" required="true">
    		</div>
    		<div class="fitem">
    			<label>类型:</label>
    			 <select name="a_level">
    	       <option value="0" selected>普通管理员</option>
    	       <option value="1">超级管理员</option>
    	       </select>
    		</div>
    	</form>
    </div>
    <div id="dlg-buttons">
    	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser2()">Save</a>
    	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')">Cancel</a>
    </div>

js:

后台代码实现：

controller层：

/**
    	 * 修改管理员信息
    	 * @param record
    	 * @return 
    	 */
    	@RequestMapping("/updateAdmin")
    	@ResponseBody
    	public Integer update(Admins record) {
    		return adminsService.updateByPrimaryKeySelective(record);
    	}

修改一个用户信息就是执行简单的修改操作，没什么其他业务逻辑。所以其他service等层的代码就不展示了。

注：我返回的是一个Integer类型，修改失败就返回0，用于前端页面友好提示。

success: function(result){
    		if (result==0){
    			$.messager.show({
    				title: 'Error',
    				timeout:1000,
    				msg: "修改失败"
    			});
    		} else {
    			$('#dlg2').dialog('close');		// close the dialog
    			$('#tt').datagrid('reload');	// reload the user data
    			$.messager.show({
    				title: 'right',
    				timeout:1000,
    				msg: "修改成功"
    			});
    		}

### 我的座右铭：不会，我可以学；落后，我可以追赶；跌倒，我可以站起来；我一定行。 ###

[easyui]: http://www.jeasyui.net/tutorial/147.html
[70]: /images/20220512/ff520c2a56f64d319463cf5bf1816d89.png