模拟基于jquery的js框架中grid的后台排序

引用

以下是我自己写的一个排序框架。
demo.js文件

/*
用法：
  $("#tableId").sorter({
	  url:url,
	  datatype:'json',
	  method:'post',
	  colmmn:[{'id':'col-en','text':'col-zh'}],
	  sortname:'sort1',
	  sorttype:'asc'
	  nosortname:['nosort']
  })
*/

Array.prototype.in_array = function(e)     
{     
for(i=0;i<this.length && this[i]!=e;i++);     
return !(i==this.length);     
}  

jQuery.fn.sorter=function(option){

       var tableid=$(this).attr('id');
	    $(this).addClass('sortable');
	    var cols=typeof(option.colmmn)!='undefined'?option.colmmn:new Array();
		var nosort=typeof(option.nosortname)!='undefined'?option.nosortname:new Array();
		var sort=typeof(option.sortname)!='undefined'?option.sortname:'';
		var sorttype=typeof(option.sorttype)!='undefined'?option.sorttype:'';
	
	   $.ajax({
	       url:option.url,
		   type:option.method,
		   datatype:option.datatype,
	        data:'&sort-name='+option.sortname+"&sort-type="+option.sortname,
		   success:function(datas){
			           
			           
						var thead=$("<thead></thead>");
						var tbody=$("<tbody></tbody>");
					
							var theadtr=$("<tr></tr>");
						
						     for(var j=0;j<cols.length;j++){
								var th=$("<th></th>");
							   var colid=  cols[j].id;
							   var coltext=  cols[j].text;
							   th.attr('id',colid);
							   th.append(coltext);
							   if(colid==sort){
							   th.addClass(sorttype==''||sorttype=='asc'?'asc':'desc');
							   }else if(nosort.in_array(colid)){
							      th.addClass("nosort");
							   }
						       //alert(nosort.in_array(colid));
							   // alert(colid+"---"+sort);
							   if(!nosort.in_array(colid)&&colid!=sort){
								 
							      th.addClass('head');
							   }
							   theadtr.append(th);
							  }
							  
                         thead.append(theadtr);
                         var edatas=eval("("+datas+")");
                     
		                for(var x=0;x<edatas.length;x++){		
							var tbodytr=$("<tr></tr>");
						
							for(var j=0;j<cols.length;j++){
							   var td=$("<td></td>");	
							   var colcontent=  $(edatas[x]).attr(cols[j].id);
							   td.append(colcontent);
                               tbodytr.append(td);
							}
							tbodytr.addClass((x%2==0)?'even':'odd');
                            tbody.append(tbodytr);   
						}
						
					  $("#"+tableid).append(thead).append(tbody);

		            },
			    error:function(){
					alert("error!!");
					}
	   
	   })
       var ths=$("table[id='"+tableid+"'] thead tr:first th");
	   ths.each(function(k){
		   if(!nosort.in_array($(this).attr('id'))){
		        $(this).click(function(){
		            var clazz=$(this).attr('class');
					var colname=$(this).attr('id');
					 option.sortname=colname;
					if(clazz=='head'){
					     option.sorttype='asc';
					}else if(clazz=='asc'){
					     option.sorttype='desc';
					}else if(clazz=='desc'){
					     option.sorttype='asc';
					}
				 $("#"+tableid).empty();
				 $("#"+tableid).sorter(option);
		   }); 
		   }
	       
	   });
	 
}

引用

以下是排序框架用到的css。
style.css文件

* {margin:0; padding:0}
body {font:10px Verdana,Arial}
#wrapper {width:825px; margin:50px auto}
.sortable {width:823px; border:1px solid #ccc; border-bottom:none}
.sortable th {padding:4px 6px 6px; background:#444; color:#fff; text-align:left; color:#ccc}
.sortable td {padding:2px 4px 4px; background:#fff; border-bottom:1px solid #ccc}
.sortable .head {background:#444 url(images/sort.gif) 6px center no-repeat; cursor:pointer; padding-left:18px}
.sortable .desc {background:#222 url(images/desc.gif) 6px center no-repeat; cursor:pointer; padding-left:18px}
.sortable .asc {background:#222 url(images/asc.gif) 6px  center no-repeat; cursor:pointer; padding-left:18px}
.sortable .head:hover, .sortable .desc:hover, .sortable .asc:hover {color:#fff}
.sortable .even td {background:#f2f2f2}
.sortable .odd td {background:#fff}

引用

css用到的图片
style.css文件

[img]

[/img]

引用

以下是一个测试用例用到的json数据
用json数据测试只能看出标头的变化而不能看到
数据的变换。这是因为本框架适用于后天排序的。对json中的数据
不起作用。

jsons.json文件

[{"name":"jack","age":23,"addr":"444"},{"name":"jack2","age":2333,"addr":"444"},{"name":"jack","age":23,"addr":"444"},{"name":"jack2","age":2333,"addr":"444"}]

引用

以下是一个测试用例
test.html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
   <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
   <script type="text/javascript" src="demo.js"></script>
  <script type="text/javascript">
       	        (function($){
			$(document).ready(function(){

	            $("#mm").sorter({
				  url:'jsons.json',
	              datatype:'json',
	              method:'post',
				  colmmn:[{'id':'name','text':'姓名'},{'id':'age','text':'年龄'},{'id':'addr','text':'地址'}],
				  sortname:'addr',
				  sorttype:'asc'
				  nosortname:['age']
				});
			 });
		})(jQuery);
  
  </script>


 </head>

 <body>
   <table id='mm'></table>
 </body>
</html>

引用

  备注：实现后台排序需要注意的；
   

在action中需要接受连个参数：
String sortName=request.getParameter("sort-name");
String sortType=request.getParameter("sort-type");

然后在基类中定义一个放方法是传递两个参数进去。以下是接口：
public List orderQuery(Class clazz,Object[] param,String soertName,String sortType);

实现代码如下：
String sqlhead="select en from "+clazz.getName();

if(sortName!=null&&!"".equals(sortName)&&sortType!=null&&!"".equals(sortType)){
  sqlhead+=" order by  en."+sortName+" sortType";
}

最后就可以执行这条sql了

Query query = session.createQuery(sqlhead);
query.list();