jquery easyui 实现增删改查功能

1、前端jsp中代码：增删改查功能用到了datagrid、window、form、message、combobox

<script type="text/javascript">
	var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null;
	 $(document).ready(function(){
  			//create datagrid
		 		$('#dg').datagrid({
                url:'<%=cp%>/role/getAllRole',
                title:'用户信息列表',
                pageSize:10,
    			pageList:[5,10,15,20],
    			pagination:true,//分页控件
    			rownumbers:true,//行号
    		    //width:1210,
                //width:document.body.clientWidth,
                height:document.body.clientHeight,
               // fitColumns: true, //自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
                nowrap: false,     //True 就会把数据显示在一行里
                striped: true,  //奇偶条显示不同的颜色
                collapsible:true,   //可折叠
                remoteSort: false,    //是否从服务器给数据排序
               // singleSelect:false,  //是否允许选中多行
          		//queryParams:{},
                idField:'id',  
                loadMsg:'正在加载....',
				        
			columns : [ [
			{field:'ck',checkbox:true,width:2}, //显示复选框

			{
				title : '用户名',
				field : 'username',
				width : 250,
				sortable : true,
				align : 'center'
			}, {
				title : '角色',
				field : 'comments',
				width : 300,
				sortable : false,
				align : 'center'
			}, {
				title : '电子邮箱',
				field : 'email',
				width : 300,
				sortable : false,
				align : 'center'
			}, 
			{title:'操作',field:'doaction',align:'center',width:300,
						formatter:function(value,row,index){
							var d='', e = '<a href="javascript:void(-1)" onclick="updateRole('+index+')">更新</a> ',f='';
							 f = ' <a href="javascript:void(-1)" onclick="deleterole('+index+')">删除</a>';
	
							return d+e+f;
						}
					}
			] ],
			
			toolbar:[{
						id:'btnadd',
						text:'新增用户',
						iconCls:'icon-add',
						handler:newAddRole
					},'-',{
						text:'显示全部',
						iconCls:'icon-reload',
						handler:displayAll
					},'-'
				]
		});
		
  		$('.searchbox').appendTo('.datagrid-toolbar table td:last');
		init_window();
		init_form();
		/* 更新   下拉列表查询 */
  		$('#role_comments').combobox({  //下拉列表
  			method:"post",
  			url:'<%=cp%>/role/getRoleComments',
			valueField:'id',   
		    textField:'text',
		    editable:true
		});
	});
	/* 初始化窗口控件 */
  	function init_window(){
  			var width = 400;
  			var height = 250;
  			var top = (document.body.clientHeight-height)/2;
  			var left = (document.body.clientWidth-width)/2;
  			win_add = $('#userform').window({
				closed:true,
				width: width,
				height: height,
				top: top,
  				left: left,
				modal: true,
				//iconCls:'icon-vcard'
			});
		    win_upt = $('#upt_role').window({
				closed:true,
				width: width,
				height: height,
				top: top,
  				left: left,
				modal: true,
				iconCls:'icon-vcard'
			});
		}
		/* 初始化表单控件 */
  		function init_form(){
  			form_add = win_add.find('form');
  			form_upt = win_upt.find('form');
  		}
		/* 新增用户 */
  		function newAddRole(){
  			win_add.window('setTitle','添加新用户');
  			win_add.window('open');
			//form_add.form('clear');
			form_add.url = '<%=cp%>/role/addRoole';
			form = form_add;
  		}
    	//数据保存
  		function saveData(){
  			form.form('submit', {
				url:form.url,
				success:function(data){
					//data = unescape(data);
					eval('data='+data);
					//win_add.window('close');
					 if (data.success){
						//grid.datagrid('reload');
						$.messager.alert('成功',data.msg);
						closeWindow();
					} else {
						$.messager.alert('错误',data.msg,'error');
					} 
				}
			});
  		}
  		/* 关闭表单窗口 */
  		function closeWindow(){
			if(win_add)
				win_add.window('close');
			if(win_upt)
				win_upt.window('close');
		}
	/* 执行常规查询 */
  		function normalQuery(value){
			 $('#dg').datagrid("reload",{
				 username: value
			 }); 
  		}
  	/* 显示全部记录 */
  		function displayAll(){
  			$('#dg').datagrid("reload",{username:''});
  		}
  	/* 更新用户 */
  		function updateRole(index){
  			var row =$('#dg').datagrid('getRows')[index];  //获取行
  			if (row){
  				win_upt.window('setTitle','更新用户资料');
				win_upt.window('open');
				form_upt.form('clear');
				form_upt.form('load', '<%=cp%>/role/getRole/'+row.id);
				form_upt.url = '<%=cp%>/role/updateRole?id='+row.id;
				form = form_upt;
				
				$('#span_username')[0].innerHTML = row.username;
				
				} else {
				$.messager.show({
					title:'警告', 
					msg:'请您先选择用户资料。'
				});
			}
  		}
  		
  //删除
  	function deleterole(index){
  		$.messager.confirm('提示','您是否确认执行删除操作？',function(r){  
  				if (r){
  					var row = $('#dg').datagrid('getRows')[index];
  	    			if(row && row.id!=null){
  	    				$.post('<%=cp%>/role/delRole/'+row.username,function(data){
  	    					eval("data="+data);   //字符串转换成json对象
  	    					if(data.success){
  	    						$.messager.alert('提示',data.msg);
  	    						//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
  	    					}else{
  	    						$.messager.alert('错误',data.msg,'error');
  	    					}
  	    				}); 
  	    			}
  				}
  			});
  		}
	</script>
</head>
<body style="margin:0">
	 <input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按用户名查询'" style="width:200px; margin:5px;"></input>
	 <table id="dg" ></table>
	 <!-- data item form for insert -->
	<div id="userform" class="easyui-window" closed="true" modal="true">
	    <div style="text-align:center; padding:1px;">
	        <form id="userinfo_form" method="post">
	        
	            <table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
	                <tr>
	                   <td>用  户  名：</td>
	                    <td><input type="text" name="username" class="easyui-validatebox" required="true" missingMessage="请填写用户名" validType="remote['<%=cp%>/rbac/chkUserProperty?chkColumn=username&rnd='+Math.random(),'colname']" invalidMessage="该用户名已存在" /></td>
	                </tr>
	                
	                <tr>
	                    <td>电子邮件：</td>
	                    <td><input type="text" name="email" class="easyui-validatebox" validType="email" invalidMessage="邮箱格式错误" /></td>
	                </tr>
	                <tr>
	                    <td>住宅电话：</td>
	                    <td><input type="text" name="hometel" /></td>
	                </tr>
	                <tr>
	                    <td>手机号码：</td>
	                    <td><input type="text" name="mobileno" /></td>
	                </tr>
	                
	            </table>
	        </form>
	    </div>
	    <div style="text-align:center;padding:5px;">
	        <a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>  
	        <a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
	    </div>
	</div> 
		<!-- data item form for update -->
	<div id="upt_role" class="easyui-window" closed="true" modal="true">
	    <div style="text-align:center; padding:1px;">
	        <form id="upt_role" method="post">
	            <table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
	            	<tr>
	                    <td>用  户  名：</td>
	                    <td><span id="span_username"></span></td>
	                </tr>
	            	<tr>
	            		<td>分配角色：</td>
	            		<td><select id="role_comments" name="comments" style="width:150px;"></select></td>
	            	</tr> 
	                <tr> 
	                    <td>电子邮件：</td>
	                    <td><input type="text" name="email" class="easyui-validatebox" validType="email" invalidMessage="邮箱格式错误" /></td>
	                </tr>   
	            </table>
	        </form>
	    </div>
	    <div style="text-align:center;padding:5px;">
	        <a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>  
	        <a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>  
	    </div>
	</div>
</body>
</html>

2、后台实现：
2.1、controller层：

@Controller
@RequestMapping("/role")
public class roleController {

	@Autowired
	private LoginService loginservice;
	@Autowired
	private RoleService roleService;

	/* 分页查询角色 */
	@RequestMapping(value = "getAllRole", method = { RequestMethod.POST })
	@ResponseBody
	public JsonGrid<Role> getAllRole(
			@RequestParam(required = true) Integer page,
			@RequestParam(required = true) Integer rows, Role role) {
		PaginationSupport<Role> pager = roleService.getPagesRole(role.getUsername(), page, rows);
		return new JsonGrid<Role>(pager);
	}

	/* 增加用户 */
	@RequestMapping(value = "addRoole", method = { RequestMethod.POST })
	@ResponseBody
	public String addRole(Role role) {
		roleService.addRole(role);
		return "{success:true,msg:'添加成功'}";
	}
	/*获取用户信息*/
	@RequestMapping(value="getRole/{id}", method = { RequestMethod.GET })
	public @ResponseBody Role getUser(@PathVariable String id){
		Role role = roleService.findRoleById(id);
		if(role==null) return new Role();
		return role;
	}
	/*更新用户信息*/
	@RequestMapping(value="updateRole",method=RequestMethod.POST)
	public @ResponseBody String updateRole(Role role){
		if(role==null ){
			return "{success:false,msg:'"+Escape.escape("提供资料不全，请重试修改。")+"'}";
		}
		try {
			roleService.updateRole(role);
			return "{success:true,msg:'更新成功'}";
		} catch (Exception e) {
			return "{success:false,msg:'"+Escape.escape(e.getMessage())+"'}";
		}
	}
	/*获取用户角色*/
	@RequestMapping(value = "getRoleComments", method = { RequestMethod.POST })
	public @ResponseBody List<Role> getAllRolesList() {
		List<Role> users = roleService.findAllRoleComments();
		return users;
	}
	/*删除用户*/
	@RequestMapping(value="delRole/{uid}", method = { RequestMethod.POST })
	public @ResponseBody String delRole(@PathVariable String uid){
		
		try {
			
			roleService.delRole(uid);
			return "{success:true,msg:'删除成功'}";
		} catch (Exception e) {
			e.printStackTrace();
			return "{success:false,msg:'"+e.getMessage()+"'}";
		}
	}

}

2.2、service层：

@Service("roleService")
public class RoleServiceImpl implements RoleService{
	
	@Resource(name="genericDao")
	private IGenericDao genericDao;

	@Override
	public PaginationSupport<Role> getPagesRole(String username,
			int pageNumber, int pageSize) {
		String queryString = "select u.username,u.comments,u.email from t_user u where 1=1 ";
		if(StringUtils.isNotEmpty(username)){
			queryString += " and USERNAME like '%"+username+"%'";
		}
		return genericDao.queryListByRows(queryString , Role.class, pageNumber, pageSize);
	}

	@Override
	public Role getRole(String roleid) {
		return genericDao.find("select u.username,u.comments,u.email from t_user u where u.ID = ?", Role.class, roleid);
	}

	@Override
	public Role findRoleById(String roleid) {
		return genericDao.find("select u.username,u.comments,u.email from t_user u where u.ID = ?", Role.class, roleid);
	}

	@Override
	public void addRole(Role role) {
		System.out.println(role.getUsername());
		System.out.println(role.getEmail());
		System.out.println(role.getHometel());
		System.out.println(role.getMobileno());
		
	}

	@Override
	public void delRole(String uid) {
		System.out.println(uid);
		
	}

	@Override
	public void updateRole(Role role) {
		System.out.println(role.getUsername());
		System.out.println(role.getComments());
		System.out.println(role.getEmail());	
	}

	@Override
	public List<Role> findAllRoleComments() {
		// TODO Auto-generated method stub
		return genericDao.query("select * from t_role", Role.class);
	}
	
}