今天主要搞了一个简单的easyui的crud
前台代码是在官网上找的
<body>
<h2>Basic CRUD Application</h2>
<div class="demo-info" style="margin-bottom:10px">
<div class="demo-tip icon-tip"> </div>
<div>Click the buttons on datagrid toolbar to do crud actions.</div>
</div>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:450px"
url="<%=basePath%>get_users"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" "newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" "editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" "removeUser()">Remove User</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" "saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" "javascript:$('#dlg').dialog('close')">Cancel</a>
</div>
</body>
<%=basePath%>是我自己写的一个获取当前路径的公共方法
其实easyui只需要我们在后台返回一个json数据给它，里面包含rows和total就够了
@ResponseBody
@RequestMapping("get_users")
public Map<String, Object> get_users(HttpServletRequest request){
//page和rows是easyui给我们的，只需要这样拿就ok
String page=request.getParameter("page");
String rows=request.getParameter("rows");
//开始分页
PageHelper.startPage(Integer.valueOf(page), Integer.valueOf(rows));
List<User> list = testService.get_users();
PageInfo<User> p = new PageInfo<User>(list);
Map<String, Object> map = new HashMap<String, Object>();
map.put("rows", list);
map.put("total", p.getTotal());
return map;
}
主要用的是PageHelper分页插件，很简单，只需要引入相应的jar就行，这样就可以在前台展示你查询的数据了，model类命名要和table里面的field相同，这样easyui才可以辨别，否则无法识别
贴一张效果图吧
2014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
