本文主要介绍SpreadJS 9 新功能:表格切片器。SpreadJS提供通过类似Excel的表格切片器过滤和分析数据的功能。
1.引用相关资源
<meta name="spreadjs culture" content="zh-CN" /><title>SpreadJS Pluggable Sample</title><link href="gcspread.sheets.excel2016darkGray.9.40.20153.0.css" rel="stylesheet" type="text/css" /><script src="jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript" src="gcspread.sheets.all.9.40.20153.0.min.js"></script><script type="text/javascript" src="gcspread.sheets.resources.zh.9.40.20153.0.min.js"></script>
2.初始化Spread和Table
注意:切片器建立在Table之上
var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));spread.isPaintSuspended(true);
var sheet = spread.getActiveSheet();
dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];data = [["bob", "NewYork", "1968/6/8", "man", "80", "180"],["Betty", "NewYork", "1972/7/3", "woman", "72", "168"],["Gary", "NewYork", "1964/3/2", "man", "71", "179"],["Hunk", "Washington", "1972/8/8", "man", "80", "171"],["Cherry", "Washington", "1986/2/2", "woman", "58", "161"],["Eva", "Washington", "1993/2/15", "woman", "71", "180"]];sheet.addTableByDataSource("table1", 1, 1, data);
var table = sheet.findTableByName("table1");table.setColumnName(0, dataColumns[0]);table.setColumnName(1, dataColumns[1]);table.setColumnName(2, dataColumns[2]);table.setColumnName(3, dataColumns[3]);table.setColumnName(4, dataColumns[4]);table.setColumnName(5, dataColumns[5]);
3.增加两个切片器
var slicer0 = sheet.addSlicer("slicer1", "table1", "Name");slicer0.position(new GcSpread.Sheets.Point(230, 120));
var slicer1 = sheet.addSlicer("slicer2", "table1", "City");slicer1.position(new GcSpread.Sheets.Point(440, 120));
效果截图:
源码下载:
这就是你想要的SpreadJS,快来官网了解并下载它吧!