struts2+spring+mybatis datagrid 分页，查询，数据回显等详解

这篇位文章主要针对上一篇博客进行具体功能的操作说明。

一：分页

1.纯前端分页

//前段分页
		function pagerFilter(data){
       if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
           data = {
               total: data.length,
               rows: data
           }
       }
       var dg = $(this);
       var opts = dg.datagrid('options');
       var pager = dg.datagrid('getPager');
       pager.pagination({
           onSelectPage:function(pageNum, pageSize){
               opts.pageNumber = pageNum;
               opts.pageSize = pageSize;
               pager.pagination('refresh',{
                   pageNumber:pageNum,
                   pageSize:pageSize
               });
               dg.datagrid('loadData',data);
           }
       });
       if (!data.originalRows){
           data.originalRows = (data.rows);
       }
       var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
       var end = start + parseInt(opts.pageSize);
       data.rows = (data.originalRows.slice(start, end));
       return data;
   }

   $(function(){//加载数据
       $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('reload');
   });

你只要把这段代码考到你的页面之中，在页面可以正常显示虽有后台数据的情况下分页就完成了。easyUI本来就是为我们开发提供方便的框架，自然对分页的是实现也会有自己的方法，具体如何实现的，就不做过多解释。

2.来自后台的分页(mySql)

msSql分页的语句： select * from （表面）order by （列名）desc(asc) limt  m,n

最关键的后面两个数字m,n：m代表查询的数据从第几行开始查询，n代表一次查询几个，光说的话比较抽象，我来演示一下：

查询所有数据：

第一页(0,5),注意要从0开始

第二页（5,5）

这就是mySql分页的基本原理。

而datagrid的后台分页是怎么实现的呢？通过看官方的一些文档，你会发现他会传给后台两个关键字：page和rows，也就是页数和每页显示数据的行数。通过在action中设置对应的setter、getter方法，就能得到，如图：

size就是存放数据list集合的大小，这样也印证了分页查询的原理。通过传入前台datagrid传到action的两个关键字，作为sql语句的参数进行查询

int pages = Integer.parseInt(page) ;
		int rowss = Integer.parseInt(rows) ;		
        List<JobModel> pageList = jobService.listWithPage((pages-1)*rowss ,rowss ) ;

这里打一个关键字一定要改为 (pages-1)*rowss，这样后台分页就基本完成功能了。

二：数据查询

当时我做数据查询这个功能时遇到的主要问题是不知道到toolBar中如何添加输入框，后来才发现，很简单

<div id="toolbar">   	 
            职位:<input id="userAccount" class="easyui-validatebox" style="width:80px" οnblur="myFunction()"/>    
            <a id="btnQuery" href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="reloadgrid()">查询</a>       	
 </div> 

前台添加的方法：

	 //查询参数直接添加在url中         
 	      	var url =$('#dg').datagrid('options').url;
 	      	var queryWord = $('#userAccount').val() ;      
 	      		 url = "jobAction_listByJob.action" ;  //重新赋值url 属性
 	        	$('#dg').datagrid('options').url=url; 
 	        	//查询参数直接添加在queryParams中    
 	        	var queryParams = $('#dg').datagrid('options').queryParams;          
 	       		var queryType = "job_name" ;
 	         	queryParams.queryWord = queryWord;  
 			 	queryParams.queryType = queryType; 
 	         	$('#dg').datagrid('options').queryParams=queryParams;   
 	         	$('#dg').datagrid('reload');            
 		}

那么问题来了，查询的条件怎么传到后台？和分页一样，datagrid制定了三个关键字： queryParams    queryWord：查询的条件(具体的值)  queryType：查询关键字（就是表中字段，列），后台action中设置相应的getter、setter方法，就可以得到。

这样把条件写入sql语句就能够查询出来了。

三：编辑数据时数据回显：

数据回显完全是前台的js代码：

<span style="white-space:pre">		</span>   $('#update').dialog('open').dialog('setTitle','更新用户');
	     <span style="white-space:pre">	</span>   $('#update-fm').form('clear');	   
		    $('#id').val(rows.id);
		    $('#name').val(rows.name);
		    $('#job_name').val(rows.job_name);
		    $('#salary').val(rows.salary);
		    $('#start_date').val(rows.start_date);	

四：总结

我感觉刚开始学比较麻烦的问题就这些，如果我再发现还会继续补充的。那个地方不足或者错误，欢迎指正。T-T