easyui的数据网格实现增加功能

我就是我 2022-05-12 08:16 210阅读 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="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
    		closed="true" buttons="#dlg-buttons">
    	<form id="fm" method="post" onSubmit="return checkForm()">
    	<input name="a_id" type="hidden" >
    		<div class="fitem">
    			<label>用户账号:</label>
    			<input name="a_account" id="account" class="easyui-validatebox" required="true" onblur="checkAccount()">
    			<span id="account_msg" style="color:red;"></span>
    		</div></br>
    		<div class="fitem">
    			<label>密    码:</label>
    			<input name="a_password"  id="pswd" class="easyui-validatebox" required="true" onblur="checkPassword()">
    			<span id="pswd_msg" style="color:red;"></span>
    		</div></br>
    		<div class="fitem">
    			<label>姓     名:</label>
    			<input name="a_name" class="easyui-validatebox" required="true">
    		</div></br>
    		<div class="fitem">
    			<label>性   别:</label>
    		 	<select name="a_sex" class="easyui-validatebox" required="true">
    	       <option value="0" selected = "selected">男</option>
    	       <option value="1">女</option>
    	       </select> 
    		</div></br>
    		<div class="fitem">
    			<label>联系电话:</label>
    			<input name="a_phone" class="easyui-validatebox" required="true">
    		</div></br>
    		<div class="fitem">
    			<label>类型:</label>
    			 <select name="a_level" class="easyui-validatebox" required="true">
    	       <option value="0" selected = "selected">普通管理员</option>
    	       <option value="1">超级管理员</option>
    	       </select>
    		</div>
    	</form>
    </div>
    <div id="dlg-buttons">
    	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
    	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>

js:

注：当点击保存时，会执行newUser中的url路径。

/*弹出增加form表单*/
    function newUser(){
    $('#dlg').dialog('open').dialog('setTitle','New User');
    $('#fm').form('clear');
    url = "<%=request.getContextPath()%>/admin/adds";
    }

代码实现：

controller层：

/**
    	 * 增加管理员信息
    	 * 
    	 * @param record
    	 * @return
    	 */
    	@RequestMapping("/adds")
    	@ResponseBody
    	public Integer adds(Admins record) {
    		return adminsService.insertSelective(record);
    	}

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

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

success: function(result){
    		if (result==0){
    			$.messager.show({
    				title: 'Error',
    				msg: "增加失败"
    			});
    		} else {
    			$('#dlg').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/15623a9508ad4802bae12f08f3d28e2c.png