引用
以下是我自己写的一个排序框架。
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();
分享到:
相关推荐
基于Jquery网站框架,对ajax技术一个更好的框架体现
适合jsp / php / asp.net / asp 等 使用jquery前端技术的漂亮的后台框架 使用JS html技术 完全开源
一个非常漂亮的jquery后台框架后台模板 ,好不容易找到的,
"基于jquery的Ajax后台模板框架,只模拟出了一部分的操作,实现了Ajax操作,提供了一种实现Ajax后台管理操作的方法,更多的功能还需要自己去挖掘,仅供参考。
基于SSH jQuery框架的餐饮Web App的设计与实现.pdf
AKjs是一款基于jQuery的移动端前端框架。AKjs插件中含着移动端常用的功能效果,以及简单明亮的CSS样式库。该移动端前端框架对IOS和安卓系统的微站兼容性很完美。
漂亮的jquery后台框架
JQuery实现经典网站后台框架,可以运行,有源码,新人可以 过过赢
基于jquery的CMS后台管理系统网站模板是一款bootstrap网站模板
jquery后台管理框架jQuery.Easyui
基于jQuery实现的asp.net网站后台框架,在网站后台都会用到的.分上 左 右 三栏.轻松添加tab,菜单上有主菜单,左有明细菜单.
基于jQuery+bootstrap框架开发简约音乐播放器网站源码+sql数据库+登录API说明.zip基于jQuery+bootstrap框架开发简约音乐播放器网站源码+sql数据库+登录API说明.zip基于jQuery+bootstrap框架开发简约音乐播放器网站...
精通js脚本之jquery框架 jquery框架 精通js js 脚本 所有代码
基于JQuery框架的AJAX实例代码 $.ajax $.post $.get 三种方式传递参数
精美的JQUERY做的后台框架/后台界面模板
基于jquery的表单验证框架,基于jquery的表单验证框架,基于jquery的表单验证框架.
非常好用的基于Jquery的前台按表头排序
国产jQuery UI框架 (jUI) DWZ 前端框架 B-JUI jQuery UI 组件 SimpleUI 国产 jQueryUI 框架 XUI_
根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的...
基于Jquery的前台按表头排序table tr th