引用
以下是我自己写的一个排序框架。
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();