日期:2014-05-16  浏览次数:20719 次

模拟基于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:po