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

蒋正平
2023-12-01

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);


 类似资料: