SpreadJS 9 新功能:表格切片器

本文主要介绍SpreadJS 9 新功能:表格切片器。SpreadJS提供通过类似Excel的表格切片器过滤和分析数据。

发布于 2015/11/21 00:00

SpreadJS

本文主要介绍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,快来官网了解并下载它吧!

SpreadJS | 下载试用

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

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

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

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

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