在JSP页面中使用SpreadJS

SpreadJS是一个JavaScript的电子表格和网格功能控件。用于显示和管理类似Excel的数据,包含公式引擎、排序、过滤、输入控件、数据可视化、Excel导入/导出等能力。本文主要介绍 SpreadJS在JSP中的使用方法。

发布于 2015/09/02 00:00

SpreadJS

SpreadJS是一个JavaScript的电子表格和网格功能控件。用于显示和管理类似Excel的数据,包含公式引擎、排序、过滤、输入控件、数据可视化、Excel导入/导出等能力。本文主要介绍 SpreadJS在JSP中的使用方法。

1.新建一个JSP页面

	<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:580px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <input type="button" style="width: 100px" value="Add Sheet" id="btnAddSheet" />
                <input type="button" style="width: 100px" value="Remove Sheet" id="btnRemoveSheet" />
                <input type="button" style="width: 100px" value="Clear Sheets" id="btnClearSheets" />
            </div>
            <div class="option-row">
                <label>ActiveSheetIndex:</label>
                <input type="text" id="activeSheetIndex" value="0"/>
                <input type="button" id="btnSetActiveSheetIndex" value="Set" />
            </div>
        </div>
    </div>
	</body>

 

2.初始化SpreadJS

        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
        var spreadNS = GcSpread.Sheets;
        spread.setSheetCount(3);

 

3.添加相应的功能

        spread.bind(spreadNS.Events.ActiveSheetChanged, function(e,args) {
            $("#activeSheetIndex").val(spread.getActiveSheetIndex());
        });
    
        $("#btnAddSheet").click(function () {
            spread.addSheet(spread.getSheetCount());
        });
        $("#btnRemoveSheet").click(function () {
            var activeIndex = spread.getActiveSheetIndex();
            if (activeIndex >= 0) {
                spread.removeSheet(activeIndex);
            }
        });
        $("#btnClearSheets").click(function () {
            spread.clearSheets();
        });
        $("#btnSetActiveSheetIndex").click(function () {
            var index = $("#activeSheetIndex").val();
            if (!isNaN(index)) {
                index = parseInt(index);
                if (0 <= index && index < spread.getSheetCount()) {
                    spread.setActiveSheetIndex(index);
                }
            }
        });

4.部署到Tomcat

gcspread.sheets.8.40.20151.0.css

jquery-1.8.2.min.js

gcspread.sheets.all.8.40.20151.0.min.js

运行效果:

2015-09-01_171634

实例下载:

 

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

SpreadJS | 下载试用

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

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

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

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

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