SpreadJS的排序

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

发布于 2015/08/28 00:00

SpreadJS

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

 

排序前:

2015-08-28_113904

 

排序后:

2015-08-28_114333

 

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

 

排序前:

2015-08-28_114503

排序后:

2015-08-28_114519

 

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

 

运行效果:

2015-08-28_114953

 

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

 

运行效果:

2015-08-28_115053

 

示例下载:

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

SpreadJS | 下载试用

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

如下资源列表,可以为您评估产品提供帮助:

相关产品
推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态