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,快来官网了解并下载它吧!