ext.js集成SpreadJS

收藏

本帖最后由 Winny 于 2023-11-9 13:46 编辑

Ext.JS基于MVC/MVVM架构，可用于桌面和移动应用程序，而不需要为不同平台提供不同的代码。目前SpreadJS官方文档中并没有关于集成ext.js的介绍，本文就集成方式做一个简单探索。
Ext.js也是商用付费控件，集成外部组件时，也可以多向其技术团队咨询，获得最佳集成方法。本文只做简单探索。

步骤一：项目中引入ext.js相关资源
首先，需要将ext.js的相关资源引入工程中。如果你熟悉ext.js，可以采用任何一种常用的集成方式。本文采用cdn的形式，引入ext.js资源。详细代码如下：

<link rel = "stylesheet" type ="text/css" href= "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
<script type ="text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js" > </script>

复制代码

步骤二：项目中引入SpreadJS相关资源
SpreadJS作为一款现代的表格控件，支持Vue、React、Angular三种主流框架，也可以在原生的js中集成。官网上，提供了相关的资源包。项目如果使用了npm，也可以通过npm来拉取资源。详细的集成方式可以SpreadJS产品文档。
本文为方便演示，采用葡萄城自己的cdn来引入spreadjs相关资源。但该链接可能并不稳定，实际项目中，需要替换成静态资源或者使用其它方式引入。详细代码如下所示：

<link type="text/css" rel="stylesheet" href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets/styles/gc.spread.sheets.excel2013white.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css" />
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-print/dist/gc.spread.sheets.print.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-excelio/dist/gc.spread.excelio.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-io/dist/gc.spread.sheets.io.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-designer-resources-cn/dist/gc.spread.sheets.designer.resource.cn.min.js"></script>
<script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/16.1.4/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js"></script>

复制代码

步骤三：在ext.js中初始化spreadjs
SpreadJS从组成上可以理解成两部分，分别是组件运行时和在线表格编辑器。组件运行时可以简单理解成项目中只需要引入格子区域，如下所示：
image.png452702330.png

这种多用于用户仅需要填报，不需要单独对填报模板做设计的阶段。详细的集成代码如下所示：

<script type="text/javascript">
Ext.application ({
launch: function() {
let spread = new GC.Spread.Sheets.Workbook('spread-container')
}
});
</script>
<title>Document</title>
----html部分----
<body>
<div id="spread-container" style="height: 90vh" />
</body>

复制代码

在线表格编辑器可以简单的理解成带工具栏的spreadjs，多用于需要对模版进行设计，或者填报过程中，用户可以更改表结构的场景。具体展示如下所示：
image.png970845031.png

此时，进需要替换ext.js中的launch方法中的初始化代码即可。详细代码如下：

<script type="text/javascript">
Ext.application ({
launch: function() {
let designer = new GC.Spread.Sheets.Designer.Designer("spread-container")
}
});
</script>
<title>Document</title>
----html部分----
<body>
<div id="spread-container" style="height: 90vh" />
</body>

复制代码

通过上边简单的步骤，即可完成在ext.js中集成spreadjs。完整的示例代码，可以参考附件html文件。直接打开html文件，即可看到如下的展示效果。
image.png955376281.png

以上是在application中使用的方式，如果需要在panel中注册spreadjs组件，可以采用如下方式：

<script type="text/javascript">
Ext.onReady(function () {
var childPanel1 = Ext.create('Ext.Panel', {
//html: '<div id="ss" style="height: 800px"></div>',
html: "<div>我是内容，我包含的html可以被执行！<div id='ss' style='height:700px'></div></div>",
height : 900,
onRender:function(){
let designer = new GC.Spread.Sheets.Designer.Designer("ss")
}
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 1200,
height : 1000,
border : true,
frame : true,
items: childPanel1
});
});
</script>

复制代码

		自动登录	找回密码
密码			立即注册

ext.js集成SpreadJS

0 个回复