SpreadJS Overview--破解版网上轻松找到
SpreadJS is the most comprehensive spreadsheet solution for enterprise JavaScript development.

It combines grid capabilities and spreadsheet functionality to offer a complete Excel-like experience, including tables, charts, shapes, sparklines, high-speed calculation engine, conditional formatting, sorting and filtering along with extensive support for importing and exporting native Excel spreadsheets with no Excel dependencies. Some exclusive features like barcodes, rich text, cell buttons, cell dropdowns and range templates are also provided to assist developers in creating flawless JavaScript applications.

Use the SpreadJS widget to create and manage spreadsheets, advanced data grids, interactive dashboards, analytical charts, business intelligence reports, well-defined data entry forms and much more.

Microsoft and Excel are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Other brand and product names are trademarks or registered trademarks of their respective holders.

SpreadJS with Vue

SpreadJS supports Vue - a JavaScript framework that provides developers with distinct tools to help them build complex user interfaces and web applications.

Using Node Package Manager

Vue 3

Create a Vue Project

Open the command prompt window and type the following commands to create a simple Vue project.
```
npm install -g @vue/cli
vue create spreadjs-quickstart :: Here, select Vue 3.
cd spreadjs-quickstart
npm run serve
```
After you finish, the Vue project will be created at the specified location in the directory. For more information on how to create a Vue project, refer to Quick Start | Vue.js.
Import SpreadJS Vue Module in Project

Install SpreadJS Vue modules in your project using the following command:
```
npm install @grapecity/spread-sheets-vue
npm install @grapecity/spread-sheets
```

Use SpreadJS in Vue application

Modify the main.js file by using the sample code given below:

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue'let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount("#app");

Modify the App.vue file by using the sample code given below:

<template><div id="spread-host"><gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initSpread"><gc-worksheet><gc-column> </gc-column></gc-worksheet></gc-spread-sheets></div>
</template><script>import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";import * as GC from "@grapecity/spread-sheets";export default {name: "app",components: {},data() {return {};},methods: {initSpread: function (spread) {this.spread = spread;let sheet = this.spread.getActiveSheet();sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value("SpreadJS");},},};
</script><style>.spreadHost {width: 800px;height: 800px;}
</style>

Save and Run the Application
```
npm run serve
```

Vue 2

Create a Vue Project

Open the command prompt window and type the following commands to create a simple Vue project.
```
npm install -g @vue/cli
npm i -g @vue/cli-init
vue init webpack spreadjs-quickstart :: Here, select Vue 2.
cd spreadjs-quickstart
npm run dev 
```
After you finish, the Vue project will be created at the specified location in the directory. For more information on how to create a Vue project, refer to Installation — Vue.js.
Import SpreadJS Vue Module in Project

Install @grapecity/spread-sheets-vue in your project using the following command:
```
npm install @grapecity/spread-sheets-vue
```

Use SpreadJS in Vue application

Modify the App.vue file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:

<template><div><gc-spread-sheets:hostClass='hostClass'><gc-worksheet:dataSource="dataTable":autoGenerateColumns = 'autoGenerateColumns'><gc-column:width="width":dataField="'price'":visible = 'visible':formatter = 'formatter':resizable = 'resizable'></gc-column></gc-worksheet></gc-spread-sheets></div>
</template>
<script>import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'import  '@grapecity/spread-sheets-vue'export default {data(){return {hostClass:'spread-host',autoGenerateColumns:true,width:300,visible:true,resizable:true,formatter:"$ #.00"}},computed:{dataTable(){let dataTable = [];for (let i = 0; i < 42; i++) {dataTable.push({price: i + 0.56})}return dataTable}}}
</script>
<style scoped>
.spread-host {width: 500px;height: 600px;
}
</style>

Save and Run the Application
```
npm run dev
```

Using Traditional HTML

Vue 2

SpreadJS can be used with Vue 2 using traditional HTML. This method involves the following steps:

Create a HTML page

As the first step, you need to create an HTML page.
Add SpreadJS and Vue-SpreadJS to HTML template

Add references to the gc.spread.sheets.all.*.*.*.min.js, gc.SpreadJS.*.*.*.css and gc.spread.sheets.vue.*.*.*.js files in the HTML template (i.e. your index.html file).

Use SpreadJS in Vue application

Now, you can use SpreadJS in your Vue application. As an example, you can use the sample code given below:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello SpreadJS Vue</title><link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/><style>#app{width: 100%;height:100%;}.vue-demo{width: 800px;height:400px;margin: 0 auto;}</style>
</head>
<body>
<div id="app"><app></app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
<script src="lib/gc.spread.sheets.vue.js"></script>
<script type="text/x-template" id="app-template"><div><gc-spread-sheetsv-bind:hostClass='hostClass'@workbookInitialized='spreadInitHandle'><gc-worksheet  ></gc-worksheet></gc-spread-sheets></div>
</script>
<script type="text/javascript">window.onload = function () {Vue.component('app', {template: '#app-template',data:function () {return {hostClass: "vue-demo"}},methods: {spreadInitHandle: function (spread) {window.mySpread = spread;console.log('now you can also get spread from window');}}});new Vue({el:"#app",})}
</script>
</body>
</html>

The SpreadSheets, Worksheet, and Column are the basic elements of tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

<gc-spread-sheets>
<gc-worksheet>
<gc-column></gc-column>...
</gc-worksheet>...
</gc-spread-sheets>

SpreadJS 15.2.3 黄金十月美好版相关推荐

《系统玩家自强不息十月增强版》ISO下载
<系统玩家自强不息十月增强版>ISO下载 2009年10月21日星期三 17:01 <系统玩家自强不息十月增强版> +++++++++++++++++++++++++++++ ...
SpreadJS 15.0 vs SpreadJS 14.0 Patch
SpreadJS 15 Adds new data-bound table view that includes a relational data manager. 使用 SpreadJS 的在线表 ...
IDPhotoStudio(证件照打印软件) v2.15.6.65中文绿色便携版
点击下载来源:IDPhotoStudio(证件照打印软件) v2.15.6.65中文绿色便携版 IDPhotoStudio是一款功能强大.简单易用的证件照打印软件,可用于创建和打印文档照片.IDPho ...
管理类联考——英语二——技巧篇——写作——A节——书信——九类书信黄金句型(背诵版)
九类书信黄金句型(背诵版) 1．询问信询问信开头常用句式 l would be grateful if you could send me information about. . . l am w ...
Visual Studio “15”第三个预览版发布
微软发布了Visual Studio 2015后继版本Visual Studio "15" (VS15)的第三个预览版本.目前为止,VS15延续了开发过程的迭代特性,升级了IDE的 ...
全功能版SEO动态寄生虫-15项功能霸屏排名版
2019全功能版SEO动态寄生虫泛目录,那么值得一说的,寄生虫同样有Shell站群功能,通过不同的Shell生成,客户端会返回URL数据到服务器端,服务器端记录下此次的繁殖数据,在下次不同的Shell ...
iOS / iPadOS 15.7.4发布安全更新旧版iPhone和ipad无法升级系统解决方法
苹果于昨日面向无法升级到 iOS / iPadOS 16 的旧款 iPhone 和 iPad,发布了 iOS / iPadOS 15.7.4 更新.本次更新并未引入新的功能,而是重点修复了存在于 We ...
4.15早盘黄金行情平平，白银TD纸白银行情分析
消息面: 昨晚(4月13日)公布的美国3月份CPI(消费者物价指数)同比上涨2.6%,好于预期(2.5%),并远高于2月份的1.7%:除去食品.能源的核心消费者物价指数同比上涨1.6%,好于预期的1. ...
15个SaaS问答（图文并茂版）
2017.3.15 审查（黄金）思考记录
这个题由于满足递归的性质,所以可以用 ac自动机 + 栈处理然并卵,莫名T了一个点. #include<iostream> #include<cstdio> using n ...

SpreadJS 15.2.3 黄金十月美好版

SpreadJS with Vue

Using Node Package Manager

Vue 3

Vue 2

Using Traditional HTML

Vue 2

SpreadJS 15.2.3 黄金十月美好版相关推荐

最新文章

热门文章