jquery排序 jquery.jsort使用 个人记录

简介: JS中方法: //排序方法 function sortRefresh(){ $('#tableAttrEdit1 tbody').jSort({ sort_by: "td span.sort", is_num: "true", item: "tr", order: "asc" }); } jSort插件提供几个参数可配置: item

JS中方法:

	//排序方法
	function sortRefresh(){
		$('#tableAttrEdit1 tbody').jSort({
			sort_by: "td span.sort",
			is_num: "true",
			item: "tr",
			order: "asc"
		});
	}

jSort插件提供几个参数可配置:

item:指向需要排序的html内容元素,默认为div,本例中是排序div中的内容。

sort_by:指向item内需要排序的元素,默认为p,本例中要排序的是h3.title。

order:排序方式,asc-顺序,desc-倒序,默认为asc。

is_num:是否按按数字大小排序,默认是false。

sort_by_attr:是否按照html元素属性进行排序,默认为false。

attr_name:属性名称,如果sort_by_attr设置为true,则可以按照对应元素的属性进行排序。如果需要排序的是中文字符串,最好设置按照属性进行排序,属性的值可以是字母或者数字之类的。



插件:jquery.jsort.0.4.js

/*
 * jSort - jQury sorting plugin
 * http://do-web.com/jsort/overview
 *
 * Copyright 2011, Miriam Zusin
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://do-web.com/jsort/license
 */

(function($){
   $.fn.jSort = function(options){
	   
	var options = $.extend({
		sort_by: 'p',
		item: 'div',
		order: 'asc', //desc
		is_num: false,
		sort_by_attr: false,
		attr_name: ''
	},options);

	return this.each(function() {            
		var hndl = this;
		var titles = [];
		var i = 0;
		
		//init titles
		$(this).find(options.item).each(function(){
		
			var txt;
			var sort_by = $(this).find(options.sort_by);
			
			if(options.sort_by_attr){
				txt = sort_by.attr(options.attr_name).toLowerCase();	
			}
			else{
				txt = sort_by.text().toLowerCase();	
			}
						
			titles.push([txt, i]);
			
			$(this).attr("rel", "sort" + i);			
			i++;
		});
		
		this.sortNum = function(a, b){			
			return eval(a[0] -  b[0]);
		};
		
		this.sortABC = function(a, b){			
			return a[0] > b[0] ? 1 : -1;
		};
		
		if(options.is_num){
			titles.sort(hndl.sortNum);
		}
		else{
			titles.sort(hndl.sortABC);
		}	
		
		if(options.order == "desc"){
			if(options.is_num){
				titles.reverse(hndl.sortNum);
			}
			else{				
				titles.reverse(hndl.sortABC);
			}				
		}
		
		for (var t=0; t < titles.length; t++){
			var el = $(hndl).find(options.item + "[rel='sort" + titles[t][1] + "']");
			$(hndl).append(el);
		}
		
	});    
   };
})(jQuery);


目录
相关文章
|
7天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
19 2
|
JavaScript
JQuery重复校验导致出现双重提示的问题记录
最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。
111 0
JQuery重复校验导致出现双重提示的问题记录
|
JavaScript
jQuery图片列表拖拽排序布局
在线演示 本地下载
810 0
|
JavaScript