jquery 列表賽選 和   列表排序

//基礎數據
  var RiverRiver2 = [
{ id: 1, pId: 1, name: "名稱", pname: "所屬", lenth: 8, Score: 87, tongB: -1, huanB: 1, user: "滕永新", usertell: "69555721" },
{ id: 1, pId: 2, name: "名稱", pname: "所屬", lenth: 8, Score: 87, tongB: -1, huanB: 1, user: "滕永新", usertell: "69555721" },
{ id: 2, pId: 1, name: "名稱", pname: "所屬", lenth: 4.5, Score: 82, tongB: -1, huanB: 1, user: "關  平", usertell: "69555721" }
];
//查詢   只顯示value.pId == "1"  的記錄
   var River2 = $.grep(RiverRiver2, function (value) {//查詢
        return value.pId == "1";//符合點擊的一級河流名稱的
    });
// 排序 再次點擊 正序和倒敘交替
 $(".dforder1").click(function () {
                    if ($(this).hasClass("asc")) {
                        $(".alllist").jSort({
                            sort_by: "i.df",
                            is_num: "true",
                            item: "li",
                            order: "desc"
                        });
                        $(this).removeClass("asc");
                    } else {
                        $(".alllist").jSort({
                            sort_by: "i.df",
                            is_num: "true",
                            item: "li",
                            //order: "desc"
                        });
                        $(this).addClass("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);


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章