本文主要介紹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));

效果截圖：

源碼下載：

文章轉自葡萄城

更多廠商產品信息請查看>>