Easyui增删改查

转自：http://blog.csdn.net/liu1765686161/article/details/48010097

1.前台html

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>管理后台.................</title>
  5  
  6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  7 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8 <script type="text/JavaScript" src="/ck-bs/jQuery-easy-ui/jquery.min.js"></script>
  9 <script type="text/javascript" src="/ck-bs/jquery-easy-ui/jquery.cookie.js"></script>
 10 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="/ck-bs/jquery-easy-ui/themes/default/easyui.css"/>
 11 <script type="text/javascript" src="/ck-bs/jquery-easy-ui/changeEasyuiTheme.js"></script>
 12 <link rel="stylesheet" type="text/css" href="/ck-bs/jquery-easy-ui/themes/icon.css"/>
 13 <script type="text/javascript" src="/ck-bs/jquery-easy-ui/jquery.easyui.min.js"></script>
 14 <script type="text/javascript" src="/ck-bs/jquery-easy-ui/locale/easyui-lang-zh_CN.js"></script>
 15 <script type="text/javascript" src="/ck-bs/js/util.js"></script>
 16 <script type="text/javascript" src="/ck-bs/js/validatebox.js"></script>
 17 <script type="text/javascript" src="/ck-bs/js/common.js"></script>
 18 <script type="text/javascript" src="/ck-bs/jquery-easy-ui/Chart.js"></script>
 19 <style type="text/css">
 20 .datagrid-view{
 21     height: 500px;
 22 }
 23 </style>
 24 </head>
 25 <body>
 26     <div id="toolbar" style="padding:5px;height:auto">  
 27         <div>    
 28             <span>处理状态：</span>
 29                             <select id="regSource" class="easyui-combobox">   
 30                                 <option value="weixin">微信</option>   
 31                                 <option value="zfb">支付宝</option>    
 32                                 <option value="qq">QQ</option>    
 33                                 <option value="mobile">手机</option>    
 34                             </select>     
 35         <a href="javascript:search()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
 36         <a href="javascript:reset()" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">重置</a>    
 37         </div>     
 38         <div style="margin-bottom:5px">    
 39             <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addUserInfo()">添加</a>    
 40             <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUserInfo()">修改</a>   
 41             <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delUser()">删除</a>   
 42             <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRole()">分配角色</a> 
 43         </div>     
 44     </div>    
 45         <table id="users_tb" class="easyui-datagrid" style="width:100%;height:100%;font-size:15px">
 46         </table>
 47     
 48     <!-- 用户信息窗口 -->
 49     <div id="userInfoWin" class="easyui-window" title="用户信息"
 50         style="width: 500px; height: auto;" closed="true">
 51         <form id="userInfoForm" style="padding: 10px 20px 10px 40px;" method="post" enctype="multipart/form-data">
 52             <input type="hidden" name="userId"/>
 53             <table align="center">
 54                     <tr>
 55                         <td>用户头像:</td>
 56                         <td>
 57                             <input class="easyui-filebox"  data-options="prompt:'请选择...',buttonText:'上传图片',onChange:function(){checkUploadUserPic(this)}"
 58                              name="userIcon"  id="userIcon" style="width:310px"/> 
 59                          </td>
 60                     </tr>
 61                     <tr>
 62                         <td>注册来源:</td>
 63                         <td >
 64                             <select id="regSource" class="easyui-combobox" style="width:310px" name="regSource" style="width:200px;">   
 65                                 <option value="weixin">微信</option>   
 66                                 <option value="zfb">支付宝</option>    
 67                                 <option value="qq">QQ</option>    
 68                                 <option value="mobile">手机</option>    
 69                             </select> 
 70                         </td>
 71                     </tr>
 72                     <tr>
 73                         <td>用户类型:</td>
 74                         <td>
 75                             <select id="userType" class="easyui-combobox" style="width:310px" name="userType" style="width:200px;">   
 76                                 <option value="COMMON">普通用户</option> 
 77                                 <option value="SYS">管理员</option>      
 78                                 <option value="SUPPLIER">供应商</option>    
 79                             </select> 
 80                         </td>
 81                     </tr>
 82                     <tr>
 83                         <td>用户状态:</td>
 84                         <td>
 85                             <select id="userState" class="easyui-combobox" style="width:310px" name="userState" style="width:200px;">   
 86                                 <option value="1">有效</option>   
 87                                 <option value="0">冻结</option>    
 88                                 <option value="2">审核中</option>    
 89                             </select> 
 90                         </td>
 91                     </tr>
 92                     <tr>
 93                         <td>用户名:</td>
 94                         <td><input class="easyui-textbox" type="text" name="nickName" style="width:310px" data-options="required:true,validType:'length[0,100]'"/></td>
 95                     </tr>
 96                     <tr>
 97                         <td>密码:</td>
 98                         <td><input class="easyui-textbox" type="text" name="userPwd" style="width:310px"  data-options="required:true,validType:'length[0,100]'"/></td>
 99                     </tr>
100                 </table>
101                 
102             <div style="padding: 5px; text-align: center;">
103                 <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="javascript:saveUsers()">确定</a> <a
104                     href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="javascript:$('#win').window('close')">取消</a>
105             </div>
106         </form>
107     </div>
108 
109     <!-- 权限编辑窗口 -->
110     <div id="win" class="easyui-window" title="分配角色"
111         style="width: 500px; height: auto;" closed="true">
112         <form id="userrole" style="padding: 10px 20px 10px 40px;">
113             <input type="hidden" name="userId" id="edituserId"/>
114             <div style="padding: 5px; text-align: center;">
115                 角色（可多选）：<select class="easyui-combobox" id="editrolesIds" name="rolesIds" data-options="multiple:true" style="width:200px;"></select>
116             </div>
117             <div style="padding: 5px; text-align: center;">
118                 <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="javascript:saveUserRole()">确定</a> <a
119                     href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="javascript:$('#win').window('close')">取消</a>
120             </div>
121         </form>
122     </div>
123 <script type="text/javascript" src="../../js/user/users.js"></script>
124 </body>
125 </html>

2.前台js

  1 /**图片上传格式验证*/
  2 function checkUploadUserPic(obj){
  3     var filepath =$(obj).filebox('getValue');
  4     if(filepath==""){
  5        //alert("请选择上传的文件！");
  6        return false;
  7     }
  8     var extname = filepath.substring(filepath.lastIndexOf(".")+1,filepath.length);
  9    extname = extname.toLowerCase();//处理了大小写
 10     if(extname!= "bmp"&&extname!= "jpg"&&extname!= "gif"&&extname!= "png"){
 11      alert("只能上传bmp,jpg,gif,png格式的图片！");
 12      $(obj).filebox('setValue','');
 13      return false;
 14     }
 15    }
 16 
 17 
 18 /**
 19  * 初始化界面
 20  */
 21 var dataGrid;
 22 var rowEditor = undefined;
 23 var editRow = undefined;
 24 $(function() {
 25     dataGrid = $('#users_tb').datagrid(
 26                     {
 27                         url : "../../service/Users/all",// 加载的URL
 28                         isField : "userId",
 29                         method : "POST",
 30                         pagination : false,// 显示分页
 31                         fit : true,// 自动补全
 32                         fitColumns : true,
 33                         pagination:true,
 34                         rownumbers:true,
 35                         singleSelect : true,
 36                         iconCls : "icon-save",// 图标
 37                         columns : [ [ // 每个列具体内容
 38                                       
 39                                       {
 40                                             field:"userId",
 41                                             title:"ID",
 42                                             width:40
 43                                          },
 44                                          {
 45                                                 field:"rolesIds",
 46                                                 title:"用户角色",
 47                                                 hidden:true
 48                                              },
 49                                          {
 50                                               field:"userIcon",
 51                                               title:"用户头像",
 52                                               width:80,
 53                                               formatter : function(value, row, index) {
 54                                                     return '<img class="easyui-img" style="width: 40px;height: 40px;" src="../../upload/users/'+value+'"></img>';
 55                                             }
 56                                           },
 57                                           {
 58                                               field:"regSource",
 59                                               title:"注册来源",
 60                                               width:80,
 61                                               formatter : function(value, row, index) {
 62                                                     if (value == 'weixin') {
 63                                                         return '<span>微信</span>';
 64                                                     } else if (value == 'zfb') {
 65                                                         return '<span>支付宝</span>';
 66                                                     } else if (value == 'qq') {
 67                                                         return '<span>QQ</span>';
 68                                                     } else {
 69                                                         return '<span>手机</span>';
 70                                                     }
 71                                                 }
 72                                           },
 73                                           {
 74                                               field:"userType",
 75                                               title:"用户类型",
 76                                               width:80,
 77                                                 formatter : function(value, row, index) {
 78                                                     if (value == 'SYS') {
 79                                                         return '<span>管理员</span>';
 80                                                     } else if (value == 'COMMON') {
 81                                                         return '<span>普通用户</span>';
 82                                                     } else {
 83                                                         return '<span>供应商</span>';
 84                                                     }
 85                                                 }
 86                                           },
 87                                           {
 88                                                 field:"userState",
 89                                                 title:"用户状态",
 90                                                 width:80,
 91                                                 formatter : function(value, row, index) {
 92                                                     if (value == '1') {
 93                                                         return '<span>有效</span>';
 94                                                     } else if (value == '0') {
 95                                                         return '<span>冻结</span>';
 96                                                     } else {
 97                                                         return '<span>审核中</span>';
 98                                                     }
 99                                                 }
100                                           },
101                                           {
102                                                  field:"userPwd",
103                                                 title:"用户密码",
104                                                 width:80
105                                           },
106                                           {
107                                                 field:"nickName",
108                                                 title:"用户名",
109                                                 width:80
110                                           },
111                                           {
112                                                 field:"regTm",
113                                                 title:"创建时间",
114                                                 width:80
115                                                 
116                                           }
117                                 
118                                  ] ],
119                         toolbar : "#toolbar" // 工具条
120                     });
121 
122     var pager = $("#users_tb").datagrid('getPager');
123     $(pager).pagination({
124         pageSize:10,
125         pageList:[5,10,15,20],
126         beforePageText: '第',//页数文本框前显示的汉字 
127         afterPageText: '页    共 {pages} 页',
128         displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
129         onBeforeRefresh:function(){ 
130             $(this).pagination('loading');//正在加载数据中...
131             //alert('正在加载数据中...');
132             $(this).pagination('loaded'); //数据加载完毕
133         }
134     });
135 });
136 
137 function reset(){
138     $("#regSource").combobox('setValue','');
139 }
140 //获取参数       
141 function getQueryParams(queryParams) {  
142     var regSource = $("#regSource").combobox('getValue');
143     queryParams.regSource = regSource;  
144     return queryParams;  
145 }  
146 
147 //增加查询参数，重新加载表格  
148 function search() {  
149        //查询参数直接添加在queryParams中      
150        var queryParams = $('#users_tb').datagrid('options').queryParams;  
151        getQueryParams(queryParams);  
152        $('#users_tb').datagrid('options').queryParams = queryParams;  
153        $("#users_tb").datagrid('reload');  
154 } 
155 
156 function editUserInfo(){
157     var rows = dataGrid.datagrid('getSelections');
158     if (rows.length == 1) {
159         var row =rows[0];
160         $("#userInfoWin").window('open');
161         $("#userInfoForm").form("load", row);
162     }else{
163         alert("请选择一条记录！");
164         return;
165     }
166 }
167 
168 function addUserInfo(){
169     $("#userInfoWin").window('open');
170     $("#userInfoForm").form("clear");
171 }
172 
173 
174 function editRole(){
175     var rows = dataGrid.datagrid('getSelections');
176     if (rows.length == 1) {
177         var row =rows[0];
178         $('#editrolesIds').combobox({  
179             url : '../../service/role/all', 
180             valueField:'id',    
181             textField:'roleName'   
182         }); 
183         $("#win").window('open');
184         if(row[0].rolesIds!=null&&row[0].rolesIds!="undefined"&&row[0].rolesIds!=""){
185             $("#editrolesIds").val(row[0].rolesIds);
186         }
187         $("#edituserId").val(row[0].userId);
188     }else{
189         alert("请选择一条记录！");
190         return;
191     }
192 }
193 
194 function delUser(){
195     var rows = dataGrid
196     .datagrid('getSelections');
197 
198 if (rows.length <= 0) {
199 $.messager.alert('警告', '您没有选择',
200         'error');
201 } else if (rows.length > 1) {
202 $.messager.alert('警告', '不支持批量删除',
203         'error');
204 } else {
205 $.messager.confirm('确定','您确定要删除吗',
206         function(t) {
207             if (t) {
208                 $.ajax({
209                     url : '../../service/Users/del',
210                     method : 'POST',
211                     data : rows[0],
212                     dataType : 'json',
213                     success : function(r) {
214                         if (r.code=="1") {
215                             dataGrid.datagrid('acceptChanges');
216                             $.messager.show({msg : r.msg,title : '成功'});
217                             editRow = undefined;
218                             dataGrid.datagrid('reload');
219                         } else {
220                             dataGrid.datagrid('beginEdit',editRow);
221                             $.messager.alert('错误',r.msg,'error');
222                         }
223                         dataGrid.datagrid('unselectAll');
224                     }
225                     });
226                     }
227                 });
228 }
229 }
230 
231 function saveUserRole(){
232     $('#userrole').form('submit',{
233         url : '../../service/UsersRoles/update',
234         method:'post',
235         success:function(data){
236             var r = JSON.parse(data);
237             if(r.code=="1"){
238                 $.messager.alert({
239                     msg : "角色分配成功",
240                     title : '成功'
241                 });
242                 $('#win').window('close');
243                 $("#users_tb").datagrid('reload');
244             }else{
245                 $.messager.alert(
246                         '错误',
247                         "角色分配失败",
248                         'error');
249             }
250             $('#win').window('close');
251             $("#users_tb").datagrid('reload');
252         }
253     });
254 }
255 
256 function saveUsers(){
257     $('#userInfoForm').form('submit',{
258         url: '../../service/Users/save',
259         method:'post',
260         enctype : "multipart/form-data",
261         success:function(data){
262             var r = JSON.parse(data);
263             if(r.code=="1"){
264                 $.messager.alert({
265                     msg : "操作用户成功",
266                     title : '成功'
267                 });
268                 $('#userInfoWin').window('close');
269                 $("#users_tb").datagrid('reload');
270             }else{
271                 $.messager.alert(
272                         '错误',
273                         "操作用户失败",
274                         'error');
275             }
276             $('#userInfoWin').window('close');
277             $("#users_tb").datagrid('reload');
278         }
279     });
280 }

3.后台代码

/**
 * 
 */
package com.aiw.ck.controller.user;

import Java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import com.aiw.ck.controller.BaseController;
import com.aiw.ck.data.Res;
import com.aiw.ck.data.WebConstants;
import com.aiw.ck.model.user.User;
import com.aiw.ck.util.FileUploadUtil;
import com.aiw.ck.util.StrUtil;
import com.google.gson.Gson;



/**
 * 用户管理
 * @author sfit0512
 *
 */
@RestController
public class UsersController extends BaseController {
    
    Logger log = Logger.getLogger(UsersController.class);
    
    @Autowired
    private com.aiw.ck.service.user.UserService userService;

    private Gson gson = new Gson();
    /**
     * 分页查询用户
     * @return
     */
    @RequestMapping("/Users/all")
    public String getUserssQueryPage(HttpServletRequest request,
            HttpServletResponse response) {
        try {
            String regSource = request.getParameter("regSource");
            String pageString = request.getParameter("page");
            String rowsString = request.getParameter("rows");
            log.info("parameter: regSource:"+regSource+" page:"+pageString+" rows:"+rowsString);
            int pages = 1;
            int rows = 20;

            if(StrUtil.notBlank(pageString)){
                pages = Integer.parseInt(pageString);
            }
            if(StrUtil.notBlank(rowsString)){
                rows = Integer.parseInt(rowsString);
            }
            List<User> list = userService.getUsers(regSource,pages, rows);
            if (list.size()>0) {
                long total = userService.getTotalCount(regSource);
                Map<String, Object> ret = new HashMap<String, Object>();
                ret.put("total", total);
                ret.put("rows", list);
                return gson.toJson(ret);
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("",e);
            return FAIL;
        }
        return FAIL;
    }
    
    
    /**
     * 添加用户
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/Users/add", method = RequestMethod.POST)
    @ResponseBody
    public Res addUsers(HttpServletRequest request,
            HttpServletResponse response,User user) throws Exception {
        try {
            int ret = userService.addUser(user);
            if(ret>0){
                return success();
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("UsersController 的方法 addUsers 执行出错，原因：" + e, e);
        }
        return fail();
    }
    
    /**
     * 修改用户
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/Users/update", method = RequestMethod.POST)
    @ResponseBody
    public Res updateUsers(HttpServletRequest request,
            HttpServletResponse response ,User user) throws Exception {
        try {
            int ret = userService.updateUser(user);
            if(ret>0){
                return success();
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("UsersController 的方法 updateUsers 执行出错，原因：" + e, e);
        }
        return fail();
    }
    
    /**
     * 保存用户
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/Users/save", method = RequestMethod.POST)
    @ResponseBody
    public Res saveUsers(@RequestParam("userIcon") CommonsMultipartFile userIcon,
            HttpServletRequest request,HttpServletResponse response) throws Exception {
        try {

            String regSource = request.getParameter("regSource");
            String userId = request.getParameter("userId");
            String userType =  request.getParameter("userType");
            String nickName = request.getParameter("nickName");
            String userPwd = request.getParameter("userPwd");
            String userState = request.getParameter("userState");
            String uString = "";
            User user = new User();
            //文件存储路径
            String path =request.getSession().getServletContext().getRealPath("/")+WebConstants.FILE_UPLOAD_USERS;
            if (userIcon.getSize()>0) {
                 uString = userIcon.getFileItem().getName();
                //上传图片
                 FileUploadUtil.fileUpload(userIcon, path,uString);
                 user.setUserIcon(uString);
            }
            user.setNickName(nickName);
            user.setUserPwd(userPwd);
            user.setRegSource(regSource);
            user.setUserType(userType);
            user.setUserState(userState.charAt(0));
            int ret = 0;
            if (StrUtil.notBlank(userId)) {
                //修改用户信息
                user.setUserId(Long.parseLong(userId));
                ret = userService.updateUser(user);
            } else {
                ret = userService.addUser(user);
            }
            if(ret>0){
                return success();
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("UsersController 的方法 updateUsers 执行出错，原因：" + e, e);
        }
        return fail();
    }
    
    
    
    /**
     * 删除用户
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/Users/del", method = RequestMethod.POST)
    @ResponseBody
    public Res deleteUsers(HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        try {
            String id = request.getParameter("userId");
            int ret = userService.delUser(Long.parseLong(id));
            if(ret>0){
                return success();
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("UsersController 的方法 deleteUsers 执行出错，原因：" + e, e);
        }
        return fail();
    }
    
    
    /**
     * 添加用户角色关系
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/UsersRoles/add", method = RequestMethod.POST)
    @ResponseBody
    public Res addUsersRoles(HttpServletRequest request,
            HttpServletResponse response,User user) throws Exception {
        try {
            int ret = userService.addUserRoles(user);
            if(ret>0){
                return success();
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("UsersController 的方法 addUsersRoles 执行出错，原因：" + e, e);
        }
        return fail();
    }
    
    /**
     * 修改用户角色关系
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/UsersRoles/update", method = RequestMethod.GET)
    @ResponseBody
    public Res updateUsersRoles(HttpServletRequest request,
            HttpServletResponse response ,User user) throws Exception {
        try {
            int ret = userService.updateUserRoles(user);
            if(ret>0){
                return success();
            }
        } catch (Exception e) {
            // TODO: handle exception
            log.error("UsersController 的方法 updateUsersRoles 执行出错，原因：" + e, e);
        }
        return fail();
    }
    

}

posted @ 2017-08-02 15:23 像艳遇一样忧伤c 阅读(535) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

像艳遇一样忧伤c

Easyui增删改查

公告