easyui高级控件02

easyui的crud（dialog，datagrid、form讲解）

1、datagrid布局
2、dialog布局
3、form布局
4、通用的JsonBaseDao增删改方法
5、dao层
6、web层
7、功能完善

陈旧的开发模式
美工（ui工程师：出一个项目模型）
java工程师：将原有的html转成jsp，动态展示数据
缺点：
客户需要调节前端的展示效果
解决：由美工去重新排版，重新选色。

比较

前后端分离
美工、java工程师都是独立工作的，彼此之间在开发过程中是没有任何交际。
在开发前约定数据交互的格式。
java工程师的工作：写方法返回数据如tree_data1.json
美工：只管展示tree_data1.json

学习datagrid：
1.进入API文档找到datagrid控件

找到toolbar:
2.找到dialog控件

找到button:

3.找到form控件:

实现easyUI的增删改查

操作步骤：
完善UserDao：

package com.cjq.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;import com.cjq.util.JsonBaseDao;
import com.cjq.util.JsonUtils;
import com.cjq.util.PageBean;
import com.cjq.util.StringUtils;public class UserDao extends JsonBaseDao {
 
 /**
  * 登录查询用户表       登录
  * @param pamap
  * @param pageBean
  * @return
  * @throws SQLException 
  * @throws IllegalAccessException 
  * @throws InstantiationException 
  */
 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 SQLException 
  * @throws IllegalAccessException 
  * @throws IllegalArgumentException 
  * @throws SecurityException 
  * @throws NoSuchFieldException 
  */
 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);
 }
 
 /**
  * 删除
  * @param paMap
  * @return
  * @throws SQLException 
  * @throws IllegalAccessException 
  * @throws IllegalArgumentException 
  * @throws SecurityException 
  * @throws NoSuchFieldException 
  */
 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);
 }
}

完善UserAction控制器：

package com.cjq.web;
import java.sql.SQLException;
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.cjq.dao.UserDao;
import com.cjq.framework.ActionSupport;
import com.cjq.util.PageBean;
import com.cjq.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) {
    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"));
     System.out.println(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(list));
  } 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());
   ObjectMapper om = new ObjectMapper();
   ResponseUtil.write(resp, om.writeValueAsString(add));
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
 }
 
 /**
  * 删除
  * @param req
  * @param resp
  * @return
  */
 public String del(HttpServletRequest req,HttpServletResponse resp) {
  try {
   int del = this.userDao.del(req.getParameterMap());
   ObjectMapper om = new ObjectMapper();
   ResponseUtil.write(resp, om.writeValueAsString(del));
  } catch (Exception e) {
   e.printStackTrace();
  }
  return null;
 }
}

userManage.js:

$(function(){
 $('#dg').datagrid({    
     url:$("#ctx").val()+'/userAction.action?methodName=list',
     fitColumns:true,      //填充列
     fit:true,         //填充行
     pagination:true,  //分页的快捷方式
     columns:[[    
         {field:'uid',title:'编号',width:100},    
         {field:'uname',title:'名称',width:100},    
         {field:'upwd',title:'密码',width:100,align:'right'}    
     ]],
     toolbar: [{        //显示图标
   iconCls: 'icon-edit',     //编辑
   handler: function(){
    var row = $('#dg').datagrid('getSelected');
    if(row){
     $('#cc').val('edit');
     $('#ff').form('load',row);
     $('#dd').dialog('open');
    }
   }
  },'-',{
   iconCls: 'icon-add',  //增加
   handler: function(){
    $('#cc').val('add');
    $('#ff').form('clear');
    $('#dd').dialog('open');
   }
  },'-',{ 
   iconCls: 'icon-remove',  //删除
   handler: function(){
    var row = $('#dg').datagrid('getSelected');
    if(row){     //判断是否选中
     $.messager.confirm('确认','您确认想要删除吗？',function(r){    //提示：点击OK就删除，
         if (r){    //判断是否点了OK
          $('#cc').val('del');
          $('#ff').form('load',row);
          alert('删除成功');
          ok();
         }    
     }); 
    }
   }
  }]
 }); 
})
function ok(){
 $('#ff').form('submit', {
     url:'../userAction.action?methodName='+$('#cc').val(), 
     success: function(param){    
      $("#dd").dialog('close');
      $("#dg").datagrid('reload');
      $('#ff').form('clear');
     }    
 }); 
}

运行结果：

增加：

结果如下：

删除：