模拟基于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();