easyUI与springmvc+mybatis整合过程遇见的问题

@1 查询条件传参问题

通过form表单的序列化，将所有查询参数作为一个对象传送到后台

	function submitQuery(){
		doing();
		$('#list_data').datagrid({
			url : '<%=basePath%>/user/list.do?'+$('form').serialize()
		});
		
		//查询后的分页控件
	    var p = $('#list_data').datagrid('getPager'); 
	    $(p).pagination({
	       	showRefresh : false
	   	});
		return false;
	}

@2 分页控件的增删改

通过dialog控件加载对应字段输入框并展现

<div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
		   <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
		        <h3>用户基本信息</h3>
		       <!-- <input name="usr_usruuid"  class="easyui-textbox" type="hidden"  style="width:70%"> --> 
	
		        <div style="margin-bottom:10px">
		        	<label for="userid">登录账号:</label>
		            <input name="usr_id"  class="easyui-textbox" required="true"  style="width:70%">
		        </div>
		        <div style="margin-bottom:10px">
		        	<label for="name">用户名称:</label>
		            <input name="usr_name"  class="easyui-textbox" required="true"  style="width:70%">
		        </div>
		        <div style="margin-bottom:10px">
		        	<label for="status">状态:</label>
		            <input name="usr_status"  class="easyui-textbox"   style="width:70%">
		        </div>
		        <div style="margin-bottom:10px">
		        	<label for="type">类型:</label>
		            <input name="usr_type"  class="easyui-textbox"   style="width:70%">
		        </div>
		         <div style="margin-bottom:10px">
		        	<label for="mobile">手机号码:</label>
		            <input name="usr_mobile"  class="easyui-textbox"   style="width:70%;">
		        </div>
		        <div style="margin-bottom:10px">
		        	<label for="email">电邮:</label>
		            <input name="usr_email"  class="easyui-textbox"  validType="email"  style="width:70%">
		        </div>
		         <div style="margin-bottom:10px">
		        	<label for="employeeid">工号:</label>
		            <input name="usr_employeeid"  class="easyui-textbox"  style="width:70%">
		        </div>
		    </form>
		 </div>
		<div id="dlg-buttons">
		    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
		    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
		</div>

对应的js

 var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增用户信息');
        $('#fm').form('clear');
        
        url = '<%=basePath%>/user/add.do?';
    }

function editUser(rowIndex,rowData){
       $('#dlg').dialog('open').dialog('center').dialog('setTitle','修改用户信息');
        $('#fm').form('load',{
        	//usr_usruuid:rowData.usr_usruuid,
          	usr_id:rowData.usr_id,
          	usr_name:rowData.usr_name,
          	usr_status:rowData.usr_status,
          	usr_type:rowData.usr_type,
          	usr_mobile:rowData.usr_mobile,
          	usr_email:rowData.usr_email,
          	usr_employeeid:rowData.usr_employeeid		
        }); 
        
        url = '<%=basePath%>/user/edit.do?usruuid='+rowData.usr_usruuid+'&';
    }

function saveUser(){
        $('#fm').form({
            url: url+$(this).serialize(),
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
            	console.log(result);
            	var dataObj = JSON.parse(result);
            	console.log(dataObj);
            	if (dataObj.result){
            		alert(dataObj.success);
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                } else {
                	  $.messager.show({
                          title: 'Error',
                          msg: dataObj.error
                      });
                } 
         
            }
        });
        $('#fm').submit();
    }

其中批量删除对应的js

{
	text: '删除',
	iconCls: 'icon-remove',
	handler: function(){
	    var rowObj=$('#list_data').datagrid("getSelections");
		if(rowObj.length == 0){
			    $.messager.alert('提示框','请选择数据!');
		}else{
			  var uuids = "";
			  for(var i=0;i<rowObj.length;i++){
			    	uuids= uuids + rowObj[i].usr_usruuid + ",";
		}
		uuids = uuids.substr(0, uuids.length - 1);
		$.messager.confirm('提示框', '你确定要删除吗?',function(r){
			    if (r) {
			    	$.ajax({
			    			'url':'<%=basePath%>/user/batdel.do',
			    			'type':'post',
			    			'data':{'uuids':uuids},
			    			'dateType':'xml',
			    			'success':function(data){
			    			//doing();
			    			$.messager.alert('提示框','删除成功！');
			    									$('#list_data').datagrid("clearSelections");
			    		     $('#list_data').datagrid('reload');
			    				},error : function(data) {
			    			$.messager.alert('友情提示','请稍后再试');
			    		}
			    	});
			  }
		});
	}
}
}

@3 MySQL实现rownum，选择行号

<select id="findAllDapUsers" parameterType="com.axb.cheney.bean.DapUserDto" resultMap="BaseResultMap" >
	select * from (
		select * from (
			select @rownum:=@rownum+1 AS rownum,tt.* from (SELECT @rownum:=0) r,(
				select * from dap_user where 1=1 
				<include refid="whereSql"></include>
				<if test="dapUserSearchParameter.sort != null and dapUserSearchParameter.sort != ''">
					order by ${dapUserSearchParameter.sort} ${dapUserSearchParameter.order}
				</if>
					) tt
				) ttt
			where ttt.rownum &lt; ${dapUserSearchParameter.end}
		) tttt where 
		tttt.rownum &gt;= ${dapUserSearchParameter.start}
</select>

@4 MySQL生成唯一主键

replace(uuid(),'-','')，听说这种方式影响查询效率，可以参考其它方式实现

@5 ajax success返回数据

Ajax中是success参数返回的应该是一个json格式的数据，可以是一个对象，或字符串，尝试过多种方式，最终选择返回对象

使用JSON.parse（result）将结果转换成对象，如下：

success: function(result){
            	console.log(result);
            	var dataObj = JSON.parse(result);
            	console.log(dataObj);
            	if (dataObj.result){
            		alert(dataObj.success);
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                } else {
                	  $.messager.show({
                          title: 'Error',
                          msg: dataObj.error
                      });
                } 
         
            }

	@RequestMapping(value = "add")
	@ResponseBody
	public Map<String,Object> addUser(HttpServletRequest request,HttpServletResponse response,
			DapUser dapUser) {
		System.out.println("---------开始被调用啦------");
		System.out.println(dapUser.toString());
		
		Map<String,Object> resultMap = new HashMap<String, Object>();
		DapUser existDapUser = new DapUser();
		existDapUser = userService.findUserByUserId(dapUser.getUsr_id());
		if(existDapUser!=null){
			resultMap.put("result", false);
			resultMap.put("error", "系统已经存在该登录账号");
		}else{
			userService.addDapUser(dapUser);
			resultMap.put("result", true);
			resultMap.put("success", "新增用户成功");
		}
		return resultMap;	
	}

其中还有更多实现上的细节，需要在实践过程中慢慢发现，以下是最终实现简单CRUD的功能截图，

仅以此记录下国庆节自己呆宿舍发霉的第五天，谢谢。