版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39220472/article/details/82721635
项目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教程
页面展示：
前端页面：
//工具栏
<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>
<!--增加form表单-->
<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:
<script type="text/javascript">
/* 验证账号是否存在*/
function checkAccount() {
if ($.trim($("#account").val()) == "") {
$("#account_msg").html("账号不能为空");
return false;
}else{
$.ajax({
type: "post",
url: "<%=request.getContextPath()%>/admin/selectByAccount",
data: {account:$("#account").val()},
dataType: "json",
success: function(data){
if(data>0){
$("#account_msg").html("该账号已存在，请重新输入");
console.log("flase");
return false;
}else{
$("#account_msg").html("该账号可用");
console.log("true");
return true;
}
},
error:function(){
alert("error");
$("#account_msg").html("");
}
});
}
return true;
}
/*弹出增加form表单*/
function newUser(){
$('#dlg').dialog('open').dialog('setTitle','New User');
$('#fm').form('clear');
url = "<%=request.getContextPath()%>/admin/adds";
}
/*增加*/
function saveUser(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
},
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: "增加成功"
});
}
}
});
}
</script>
注：当点击保存时，会执行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: "增加成功"
});
}