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



 



效果截图：



2015-11-20_173328



2015-11-20_173337



2015-11-20_173348



源码下载：





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