yii实现sort的ajax排序 教程

通过firebug我们发现每次点击由CSort生成的排序按钮会为links的URL附上两个排序的Class（desc asc），于是我们就可以利用这两个CLASS为排序实现AJAX刷新和添加不同指向的箭头，效果如下图

 

首先我们为CLSS添加DESC的CSS控制目的是控制箭头，图片自行添加

 

.sort .desc { padding: 0 10px 0px 10px; background: url(/images/sort_black.gif) no-repeat; background-position: 100% -20px;

ASC的CSS

 

.sort .asc { padding: 0 10px 0px 10px; background: url(/images/sort_black.gif) no-repeat; background-position: 100% 4px; }

OK，当我们点击的时候，箭头就会实现排序效果

以下对AJAX的处理

加载我写的扩展库，当然以下代码片断只是为本次实现而添加的，而且本扩展代码是可扩展的包括翻页

 

;(function($){ $.fn.ajaxUpdate = function(id,url){ var option = $.extend({ type:'GET', url:url, success:function(data){ $('#'+id).replaceWith($('#'+id,data)).serialize(); } },option || {}); $.ajax(option); } })(jQuery);

页面插入以下AJAX的提交事件

参数说明

1.ID是你要刷新的列表,列表需要这个DIV包含,包括翻页在内

2.url就是你的controller地址

 

$('.sort a').live('click',function(){ $.fn.ajaxUpdate('data', $(this).attr('href')); return false; });

OK这样就完成排序与刷新了

 

查看更多关于yii实现sort的ajax排序 教程的详细内容...