今天写了一个案例easyui高级控件
1、优势就是前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json
前后端分离可以节省时间提高效率。
案例：增删查改
思路：
1、datagrid布局
$(function(){
$('#dg').datagrid({
url:$("#ctx").val()+'/userAction.action?methodName=list',
fitColumns:true,
fit:true,
pagination:true,
columns:[[
{field:'uid',title:'代码',width:100,align:'center'},
{field:'uname',title:'名称',width:100,align:'center'},
{field:'upwd',title:'价格',width:100,align:'center'}
]] ,
toolbar: [{
iconCls: 'icon-edit',
handler: function(){
var row = $('#dg').datagrid('getSelected');
if(row!=null){
$("#tt").val('edit');
$('#ff').form('load',row);
$('#dd').dialog('open');
}
}
},'-',{
iconCls: 'icon-add',
handler: function(){
$("#tt").val('add');
$('#ff').form('clear');
$('#dd').dialog('open');
}
},'-',{
iconCls: 'icon-remove',
handler: function(){
var row = $('#dg').datagrid('getSelected');
if(row!=null){
$('#ff').form('load',row);
$("#tt").val('del');
ok();
}
}
}]
});
})
function ok(){
$('#ff').form('submit', {
url:$("#ctx").val()+'/userAction.action?methodName='+$("#tt").val(),
success: function(param){
$('#dd').dialog('close');
$('#dg').datagrid('reload');
$('#ff').form('clear');
alert(param);
}
});
}
2、dialog布局
通过已存在的DOM节点元素标签创建。下面的例子显示了一个可变大小的模式窗口。
代码如下：
<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
</div>
3、form布局
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
<form id="ff" method="post">
<input type="hidden" name="SerialNo"> <!-- 修改的是应该传一个唯一的标识 -->
<div>
<label for="uid">uid: </label>
<input class="easyui-validatebox" type="text" name="uid" data-options="required:true" />
</div> <br>
<div>
<label for="uname">uname: </label>
<input class="easyui-validatebox" type="text" name="uname" data-options="required:true" />
</div> <br>
<div>
<label for="upwd">upwd: </label>
<input class="easyui-validatebox" type="text" name="upwd" data-options="required:true" />
</div>
</form>
4、通用的JsonBaseDao增删改方法
package com.zrh.util;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class JsonBaseDao extends BaseDao<Map<String,Object>> {
public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
@Override
public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
/*
* 1、创建一个实体类的实例
* 2、给创建的实例属性赋值
* 3、将添加完类容的实体类添加到list集合中
*/
// list.add(new Book(rs.getInt("bid"), rs.getString("bname"), rs.getFloat("price")));
List<Map<String,Object>> list = new ArrayList<>();
// 获取源数据
ResultSetMetaData md = rs.getMetaData();
int count = md.getColumnCount();
Map<String,Object> map = null;
while(rs.next()) {
map = new HashMap<>();
for (int i = 1; i <= count; i++) {
map.put(md.getColumnName(i), rs.getObject(i));
}
list.add(map);
}
return list;
}
});
}
/**
*
* @param sql
* @param attrs map中的key
* @param paMap jsp向后台传递的参数集合
* @return
* @throws SQLException
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
*/
public int executeUpdate(String sql, String[] attrs, Map<String,String[]> paMap) throws SQLException, NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
Connection con = DBAccess.getConnection();
PreparedStatement pst = con.prepareStatement(sql);
for (int i = 0; i < attrs.length; i++) {
pst.setObject(i+1, JsonUtils.getParamVal(paMap, attrs[i]));
}
return pst.executeUpdate();
}
}
5、dao层（UserDao ），写了我们需要的方法
package com.zrh.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zrh.util.JsonBaseDao;
import com.zrh.util.JsonUtils;
import com.zrh.util.PageBean;
import com.zrh.util.StringUtils;
public class UserDao extends JsonBaseDao {
public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_user_version2 where true";
String uid = JsonUtils.getParamVal(paMap, "uid");
String upwd = JsonUtils.getParamVal(paMap, "upwd");
if(StringUtils.isNotBlank(uid)) {
sql = sql + " and uid = "+uid;
}
if(StringUtils.isNotBlank(upwd)) {
sql = sql + " and upwd = "+upwd;
}
return super.executeQuery(sql, pageBean);
}
/**
* 通过中间表查询登录用户所对应的权限
* @param paMap
* @param pageBean
* @return
* @throws InstantiationException
* @throws IllegalAccessException
* @throws SQLException
*/
public List<Map<String, Object>> listMenu(String uid,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select * from t_easyui_usermenu where true";
if(StringUtils.isNotBlank(uid)) {
sql = sql + " and uid = "+uid;
}
return super.executeQuery(sql, pageBean);
}
/**
* 修改
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql = "update t_easyui_user_version2 set uid=?,uname=?,upwd=? where serialno=?";
return super.executeUpdate(sql, new String[] {"uid","uname","upwd","SerialNo"}, paMap);
}
/**
* 增加方法
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int add(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql = "insert into t_easyui_user_version2 (uid,uname,upwd) values(?,?,?)";
return super.executeUpdate(sql, new String[] {"uid","uname","upwd"}, paMap);
}
public int del(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql = "delete from t_easyui_user_version2 where serialno=?";
return super.executeUpdate(sql, new String[] {"SerialNo"}, paMap);
}
}
6、接下来就是web层（UserAction ），也是程序员的部分了
package com.zrh.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.util.ObjectIdMap;
import com.zking.framework.ActionSupport;
import com.zrh.dao.UserDao;
import com.zrh.util.PageBean;
import com.zrh.util.ResponseUtil;
public class UserAction extends ActionSupport {
private UserDao userDao = new UserDao();
public String login(HttpServletRequest req,HttpServletResponse resp) {
try {
List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), null);
if(list != null && list.size() > 0) {
//listMenu查出来的是中间表对应的所有权限
List<Map<String, Object>> listMenu = this.userDao.listMenu(req.getParameter("uid"), null);
StringBuilder sb = new StringBuilder();
for (Map<String, Object> map : listMenu) {
sb.append(","+map.get("menuId"));
}
req.setAttribute("menuHid", sb.substring(1));
}else {
return "login";
}
} catch (Exception e) {
e.printStackTrace();
}
return "index";
}
/**
* datagrid所需数据后端程序员开发完毕
* @param req
* @param resp
* @return
*/
public String list(HttpServletRequest req,HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> list = this.userDao.list(req.getParameterMap(), pageBean);
ObjectMapper om = new ObjectMapper();
Map<String, Object> map = new HashMap<>();
map.put("total", pageBean.getTotal());
map.put("rows", list);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* form组件提交所需数据后端程序员处理完毕
* @param req
* @param resp
* @return
*/
public String edit(HttpServletRequest req,HttpServletResponse resp) {
try {
int edit = this.userDao.edit(req.getParameterMap());
ObjectMapper om = new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(edit));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 增加
* @param req
* @param resp
* @return
*/
public String add(HttpServletRequest req,HttpServletResponse resp) {
try {
int add = this.userDao.add(req.getParameterMap());
if(add>0) {
System.out.println("成功");
}else {
System.out.println("失败");
}
ObjectMapper om = new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(add));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public String del(HttpServletRequest req,HttpServletResponse resp) {
try {
int del = this.userDao.del(req.getParameterMap());
if(del>0) {
System.out.println("删除成功");
}else {
System.out.println("删除失败");
}
ObjectMapper om = new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(del));
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
案例就完成了下面是我们的案例截图
这是修改界面：
这是安静弹框：
EasyUI中DataGrid控件的一些使用方法总结
1，通过JavaScript将一个空白的div美化成一个空白的Datagrid模板
2，Datagrid模板通过制定的Url发送请求，获取数据
3，Datagrid通过后台返回的Json将对应的数据按照Filed的名字进行匹配并显示
