SpreadJS 是一款基于 HTML5 和 jQuery 技术的插件，支持多种方式的排序。本文主要介绍SpreadJS排序的四种方式。

1.升序或降序排序

    $(document).ready(function() {
        var spread = new GcSpread.Sheets.Spread($("#ss").get(0), {
            sheetCount: 3
        });
        var activeSheet = spread.getActiveSheet();
        activeSheet.setValue(0, 0, 10);
        activeSheet.setValue(1, 0, 100);
        activeSheet.setValue(2, 0, 50);
        activeSheet.setValue(3, 0, 40);
        activeSheet.setValue(4, 0, 80);
        activeSheet.setValue(5, 0, 1);
        activeSheet.setValue(6, 0, 65);
        activeSheet.setValue(7, 0, 20);
        activeSheet.setValue(8, 0, 30);
        activeSheet.setValue(9, 0, 35);
        $("#button1").click(function() {
            //Sort Column 1 in ascending order on button click.
            $("#ss").data("spread").getActiveSheet().sortRange(-1, 0, -1, 1, true, [{
                index: 0,
                ascending: true
            }]);
        });
        $("#button2").click(function() {
            //Sort Column 1 in descending order on button click.
            $("#ss").data("spread").getActiveSheet().sortRange(-1, 0, -1, 1, true, [{
                index: 0,
                ascending: false
            }]);
        });
    });

排序前：

排序后：

2.使用多个关键字进行排序

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread($("#ss").get(0),{sheetCount:3});
            var activeSheet = spread.getActiveSheet();
						activeSheet.setRowCount(6);
            activeSheet.setValue(0, 0, 10);
            activeSheet.setValue(1, 0, 100);
            activeSheet.setValue(2, 0, 100);
            activeSheet.setValue(3, 0, 10);
            activeSheet.setValue(4, 0, 5);
            activeSheet.setValue(5, 0, 10);
            activeSheet.setValue(0, 1, 10);
            activeSheet.setValue(1, 1, 40);
            activeSheet.setValue(2, 1, 10);
            activeSheet.setValue(3, 1, 20);
            activeSheet.setValue(4, 1, 10);
            activeSheet.setValue(5, 1, 40);
            
            $("#button1").click(function(){
                //Create a SortInfo object where 1st Key:Column1/2nd Key:Column2.
                var sortInfo = [
                {index:0, ascending:true},
                {index:1, ascending:true}];
                ///Execute sorting which targets all rows based on the created sorting conditions.
                $("#ss").data("spread").getActiveSheet().sortRange(0, -1, 6, -1, true, sortInfo);
            });
            
            $("#button2").click(function(){
                //Create a SortInfo object where 1st Key:Column1/2nd Key:Column2.
                var sortInfo = [
                {index:0, ascending:false},
                {index:1, ascending:false}];
                ///Execute sorting which targets all rows based on the created sorting conditions.
                $("#ss").data("spread").getActiveSheet().sortRange(0, -1, 6, -1, true, sortInfo);
            });
        });

排序前：

排序后：

3.使用Filter进行排序

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread($("#ss").get(0),{sheetCount:3});
            var activeSheet = spread.getActiveSheet();
						activeSheet.setValue(0, 0, 10);
            activeSheet.setValue(1, 0, 100);
            activeSheet.setValue(2, 0, 50);
            activeSheet.setValue(3, 0, 40);
            activeSheet.setValue(4, 0, 80);
            activeSheet.setValue(5, 0, 1);
            activeSheet.setValue(6, 0, 65);
            activeSheet.setValue(7, 0, 20);
            activeSheet.setValue(8, 0, 30);
            activeSheet.setValue(9, 0, 35);
            var cellrange =new GcSpread.Sheets.Range(0, 0, 10, 1);
            var hideRowFilter =new GcSpread.Sheets.HideRowFilter(cellrange);
            activeSheet.rowFilter(hideRowFilter);
				});

运行效果：

4.使用自定义Filter进行排序

    		function CustomFilter(){};
				CustomFilter.prototype = {
         	conditionType: "CustomFilter",
         	type:"CustomFilter",
         	evaluate: function (evaluator, row, col) {
         	    var value = evaluator.getValue(row, col);
         	
         	    if(value !== null && value >= 10 && value <= 50){
         	        //Return True only when the following conditions are satisfied.
         	        //　(1)Values are entered.
         	        //　(2)Values are not lower than 10.
         	        //　(3)Values are not greater than 50.
         	        return true;
         	    }else{
         	        return false;
         	    }
         	},
         	toJSON:function(){
         		var jsonData = {};
         		jsonData.conditionType = this.conditionType;
         		jsonData.type = "CustomFilter";
         		return jsonData;
         	},
         		fromJSON:function(data){
         			
         		}
				};
        $(document).ready(function () {
            spread = new GcSpread.Sheets.Spread($("#ss").get(0),{sheetCount:3});
            var activeSheet = spread.getActiveSheet();
            
            activeSheet.setValue(0, 0, 10);
            activeSheet.setValue(1, 0, 100);
            activeSheet.setValue(2, 0, 50);
            activeSheet.setValue(3, 0, 40);
            activeSheet.setValue(4, 0, 80);
            activeSheet.setValue(5, 0, 1);
            activeSheet.setValue(6, 0, 65);
            activeSheet.setValue(7, 0, 20);
            activeSheet.setValue(8, 0, 30);
            activeSheet.setValue(9, 0, 35);
            
            //Set a row Filter.
            var rowFilter = new GcSpread.Sheets.HideRowFilter(new GcSpread.Sheets.Range(0, 0, 7, 1));
            activeSheet.rowFilter(rowFilter);
            rowFilter.addFilterItem(0, new CustomFilter());
            rowFilter.filter(0);
				});

运行效果：

示例下载：

这就是你想要的SpreadJS，快来官网了解并下载它吧！