gridjs-spreadsheet 26.6.1 → 26.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{a08275ef8caf83cc1c2eae91f17663e8.svg → 1f345d060b26fa53bc9d78c36441afd6.svg} +106 -26
- package/angular.d.ts +67 -0
- package/angular.js +174 -0
- package/example/README.md +242 -41
- package/example/angular-gridjs/.nvmrc +1 -0
- package/example/angular-gridjs/angular.json +66 -0
- package/example/angular-gridjs/package.json +31 -0
- package/example/angular-gridjs/proxy.conf.json +12 -0
- package/example/angular-gridjs/src/app/api.ts +7 -0
- package/example/angular-gridjs/src/app/app.component.html +57 -0
- package/example/angular-gridjs/src/app/app.component.ts +153 -0
- package/example/angular-gridjs/src/app/routing.ts +52 -0
- package/example/angular-gridjs/src/favicon.ico +0 -0
- package/example/angular-gridjs/src/index.html +12 -0
- package/example/angular-gridjs/src/main.ts +7 -0
- package/example/angular-gridjs/src/styles.css +37 -0
- package/example/angular-gridjs/tsconfig.app.json +9 -0
- package/example/angular-gridjs/tsconfig.json +29 -0
- package/example/pom.xml +3 -3
- package/example/react-gridjs/index.html +12 -0
- package/example/react-gridjs/package.json +20 -0
- package/example/react-gridjs/src/App.jsx +188 -0
- package/example/react-gridjs/src/api.js +7 -0
- package/example/react-gridjs/src/main.jsx +9 -0
- package/example/react-gridjs/src/routing.js +51 -0
- package/example/react-gridjs/src/styles.css +37 -0
- package/example/react-gridjs/vite.config.js +16 -0
- package/example/src/main/java/com/aspose/gridjs/demo/controller/DataController.java +80 -2
- package/example/src/main/java/com/aspose/gridjs/demo/controller/GridJs2Controller.java +12 -0
- package/example/vanilla-gridjs/npm/index.html +29 -0
- package/example/vanilla-gridjs/npm/main.js +8 -0
- package/example/vanilla-gridjs/npm/package.json +16 -0
- package/example/vanilla-gridjs/npm/vite.config.js +11 -0
- package/example/vanilla-gridjs/script/index.html +32 -0
- package/example/vanilla-gridjs/script/main.js +9 -0
- package/example/vanilla-gridjs/script/package.json +12 -0
- package/example/vanilla-gridjs/script/vite.config.js +11 -0
- package/example/vanilla-gridjs/shared/demo-app.js +205 -0
- package/example/vanilla-gridjs/shared/styles.css +36 -0
- package/example/vue-gridjs/index.html +12 -0
- package/example/vue-gridjs/package.json +19 -0
- package/example/vue-gridjs/src/App.vue +199 -0
- package/example/vue-gridjs/src/api.js +7 -0
- package/example/vue-gridjs/src/main.js +9 -0
- package/example/vue-gridjs/src/routing.js +51 -0
- package/example/vue-gridjs/src/styles.css +37 -0
- package/example/vue-gridjs/vite.config.js +21 -0
- package/index.d.ts +528 -472
- package/index.js +1 -1
- package/package.json +143 -50
- package/react.d.ts +27 -0
- package/react.js +111 -0
- package/readme.md +183 -380
- package/shared.d.ts +66 -0
- package/shared.js +204 -0
- package/vue.d.ts +20 -0
- package/vue.js +125 -0
- package/xspreadsheet.css +365 -1
- package/xspreadsheet.js +5 -5
- package/example/.mvn/wrapper/maven-wrapper.properties +0 -18
- package/example/src/test/java/com/aspose/gridjs/demo/GridjsdemoApplicationTests.java +0 -1441
package/readme.md
CHANGED
|
@@ -1,439 +1,242 @@
|
|
|
1
|
-
# gridjs-spreadsheet
|
|
2
|
-
|
|
3
|
-
> **GridJs-Spreadsheet** is a high-performance, lightweight JavaScript library for building online Excel editors and web-based spreadsheet applications. It provides seamless Excel viewing, editing, and cross-platform deployment with an easy-to-use API.
|
|
1
|
+
# gridjs-spreadsheet
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
`gridjs-spreadsheet` is the browser-side spreadsheet UI for Aspose.Cells GridJs. The package includes the core GridJS runtime, TypeScript declarations, and adapters for React, Vue 3, and Angular.
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
Version 26.7.0 also publishes a complete Java example containing five independent frontend demos:
|
|
8
6
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
- [Support](#support)
|
|
15
|
-
- [License](#license)
|
|
7
|
+
- React
|
|
8
|
+
- Vue 3
|
|
9
|
+
- Angular
|
|
10
|
+
- Vanilla HTML using npm imports
|
|
11
|
+
- Vanilla HTML using CDN script tags
|
|
16
12
|
|
|
17
|
-
##
|
|
13
|
+
## Installation
|
|
18
14
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
Quick online demo: https://products.aspose.app/cells/editor
|
|
24
|
-
|
|
25
|
-
## Preview
|
|
26
|
-
|
|
27
|
-
<img alt='demo' src='https://unpkg.com/gridjs-spreadsheet@25.1.0/preview.gif' />
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## API
|
|
15
|
+
```bash
|
|
16
|
+
npm install gridjs-spreadsheet
|
|
17
|
+
```
|
|
31
18
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
## CDN
|
|
35
|
-
```html
|
|
36
|
-
<head>
|
|
37
|
-
<!-- other dependency start -->
|
|
38
|
-
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css">
|
|
39
|
-
<link rel="stylesheet" href="https://unpkg.com/jquery-ui@1.13.2/dist/themes/ui-lightness/jquery-ui.min.css">
|
|
40
|
-
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
41
|
-
<script src="https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
|
|
42
|
-
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
|
|
43
|
-
<!-- other dependency end -->
|
|
44
|
-
<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.css">
|
|
45
|
-
<script src="https://unpkg.com/gridjs-spreadsheet/xspreadsheet.js"></script>
|
|
19
|
+
The framework packages are optional peer dependencies. Install only the framework used by your application.
|
|
46
20
|
|
|
47
|
-
|
|
48
|
-
const option = {
|
|
49
|
-
updateMode: 'server',
|
|
50
|
-
updateUrl: '/GridJs2/UpdateCell',
|
|
51
|
-
showToolbar: true,
|
|
52
|
-
//mode: 'edit' or 'read'
|
|
53
|
-
mode: 'read',
|
|
54
|
-
//support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
|
|
55
|
-
local: 'en',
|
|
56
|
-
};
|
|
57
|
-
const sheetstr="[{\"name\":\"Sheet1\",\"sheetid\":\"s0\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"styles\":[{\"textwrap\":true,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}},{\"textwrap\":false,\"color\":\"#000000\",\"valign\":\"middle\",\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"italic\":false}}],\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":532},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"3\":{\"height\":122,\"cells\":{\"2\":{\"text\":\"FFF呜呜呜\\n呜我 我我我我\\nnice wwwwww\\nexample work 测的的的的的的的到\\n到手 一级 一季报 击败发发发发发发发发发发发\",\"style\":0,\"rtxt\":[{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"F\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"italic\":false},\"txt\":\"FF呜\"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#953735\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"single\",\"italic\":false},\"txt\":\"呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"\\n呜\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#0070C0\",\"italic\":false},\"txt\":\"我 我我\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"我我\\nni\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":true,\"color\":\"#C00000\",\"italic\":true},\"txt\":\"ce wwwwww\\nexample\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\" work \"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"italic\":false},\"txt\":\"测的的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#C0504D\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"underline\":\"double\",\"italic\":false},\"txt\":\"的\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"的到\\n到手 \"},{\"font\":{\"name\":\"arial\",\"size\":18,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"一级 一季\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"报 击败发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#9BBB59\",\"italic\":false},\"txt\":\"发发发发发发\"},{\"font\":{\"name\":\"arial\",\"size\":11,\"bold\":false,\"color\":\"#000000\",\"italic\":false},\"txt\":\"发发发发\"}],\"html\":\"<Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">F</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">FF呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #953735;\\\">呜</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"><Br>呜</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #0070c0;\\\">我 我我</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">我我<Br>ni</Font><Font Style=\\\"FONT-WEIGHT: bold;FONT-STYLE: italic;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c00000;\\\">ce wwwwww<Br>example</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\"> work </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">测的的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #c0504d;\\\">的的</Font><Font Style=\\\"TEXT-DECORATION: underline;FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">的到<Br>到手 </Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 18pt;COLOR: #000000;\\\">一级 一季</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">报 击败发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #9bbb59;\\\">发发发发发发</Font><Font Style=\\\"FONT-FAMILY: arial;FONT-SIZE: 11pt;COLOR: #000000;\\\">发发发发</Font>\"},\"4\":{\"text\":\"\",\"style\":1}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet2\",\"sheetid\":\"s1\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}},{\"name\":\"Sheet3\",\"sheetid\":\"s2\",\"showGrid\":true,\"sprotected\":false,\"canselectlocked\":true,\"displayRight2Left\":false,\"canselectunlocked\":true,\"cols\":{\"0\":{\"width\":72},\"1\":{\"width\":72},\"2\":{\"width\":72},\"3\":{\"width\":72},\"4\":{\"width\":72},\"5\":{\"width\":72},\"6\":{\"width\":72},\"7\":{\"width\":72},\"8\":{\"width\":72},\"9\":{\"width\":72},\"10\":{\"width\":72},\"11\":{\"width\":72},\"12\":{\"width\":72},\"13\":{\"width\":72},\"14\":{\"width\":72},\"15\":{\"width\":72},\"len\":16},\"rows\":{\"12\":{\"height\":19,\"cells\":{\"15\":{\"text\":\"\"}}},\"len\":13,\"height\":19}}]";
|
|
58
|
-
xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
|
|
59
|
-
console.log(cdata);
|
|
60
|
-
console.log(xs.validate());
|
|
61
|
-
}
|
|
62
|
-
</script>
|
|
63
|
-
</head>
|
|
64
|
-
<body>
|
|
65
|
-
<div id="gridjs-demo"></div>
|
|
66
|
-
</body>
|
|
67
|
-
```
|
|
21
|
+
## Package exports
|
|
68
22
|
|
|
69
|
-
|
|
23
|
+
| Usage | Import |
|
|
24
|
+
| --- | --- |
|
|
25
|
+
| Core runtime | `gridjs-spreadsheet` |
|
|
26
|
+
| Styles | `gridjs-spreadsheet/xspreadsheet.css` |
|
|
27
|
+
| React | `gridjs-spreadsheet/react` |
|
|
28
|
+
| Vue 3 | `gridjs-spreadsheet/vue` |
|
|
29
|
+
| Angular | `gridjs-spreadsheet/angular` |
|
|
30
|
+
| Shared adapter | `gridjs-spreadsheet/shared` |
|
|
70
31
|
|
|
71
|
-
|
|
72
|
-
npm install gridjs-spreadsheet
|
|
73
|
-
```
|
|
32
|
+
## Vanilla JavaScript with npm
|
|
74
33
|
|
|
75
34
|
```html
|
|
76
35
|
<div id="gridjs-demo"></div>
|
|
77
36
|
```
|
|
78
37
|
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
//Including jszip
|
|
38
|
+
```js
|
|
39
|
+
import Spreadsheet from 'gridjs-spreadsheet';
|
|
82
40
|
import JSZip from 'jszip';
|
|
83
|
-
window.JSZip = JSZip;
|
|
84
|
-
//Including jQuery
|
|
85
|
-
import $ from 'jquery';
|
|
86
|
-
window.$ = $;
|
|
87
|
-
//Including gridjs-spreadsheet
|
|
88
41
|
import 'gridjs-spreadsheet/xspreadsheet.css';
|
|
89
|
-
import Spreadsheet from "gridjs-spreadsheet";
|
|
90
|
-
|
|
91
|
-
// If you need to override the default options, you can set the override
|
|
92
|
-
// const options = {};
|
|
93
|
-
// new Spreadsheet('#gridjs-demo', options);
|
|
94
|
-
const s = new Spreadsheet("#gridjs-demo")
|
|
95
|
-
.loadData({}) // load data
|
|
96
|
-
.change(data => {
|
|
97
|
-
// save data to db
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
## simple usage
|
|
105
|
-
|
|
106
|
-
```javascript
|
|
107
|
-
|
|
108
|
-
// If you need to override the default options, you can set the override
|
|
109
|
-
const option = {
|
|
110
|
-
updateMode: 'server',
|
|
111
|
-
updateUrl: '/GridJs2/UpdateCell',
|
|
112
|
-
showToolbar: true,
|
|
113
|
-
//mode: 'edit' or 'read'
|
|
114
|
-
mode: 'read',
|
|
115
|
-
//support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
|
|
116
|
-
local: 'en',
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
xs = x_spreadsheet('#gridjs-demo', option).loadData(sheets).change((cdata) => {
|
|
120
|
-
console.log(cdata);
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
```javascript
|
|
128
|
-
// default options
|
|
129
|
-
{
|
|
130
|
-
mode: 'edit', // edit | read
|
|
131
|
-
showToolbar: true,
|
|
132
|
-
showGrid: true,
|
|
133
|
-
showContextmenu: true,
|
|
134
|
-
view: {
|
|
135
|
-
height: () => document.documentElement.clientHeight,
|
|
136
|
-
width: () => document.documentElement.clientWidth,
|
|
137
|
-
},
|
|
138
|
-
row: {
|
|
139
|
-
len: 100,
|
|
140
|
-
height: 25,
|
|
141
|
-
},
|
|
142
|
-
col: {
|
|
143
|
-
len: 26,
|
|
144
|
-
width: 100,
|
|
145
|
-
indexWidth: 60,
|
|
146
|
-
minWidth: 60,
|
|
147
|
-
},
|
|
148
|
-
style: {
|
|
149
|
-
bgcolor: '#ffffff',
|
|
150
|
-
align: 'left',
|
|
151
|
-
valign: 'middle',
|
|
152
|
-
textwrap: false,
|
|
153
|
-
strike: false,
|
|
154
|
-
underline: false,
|
|
155
|
-
color: '#0a0a0a',
|
|
156
|
-
font: {
|
|
157
|
-
name: 'Helvetica',
|
|
158
|
-
size: 10,
|
|
159
|
-
bold: false,
|
|
160
|
-
italic: false,
|
|
161
|
-
},
|
|
162
|
-
},
|
|
163
|
-
}
|
|
164
|
-
```
|
|
165
42
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
## Bind events
|
|
169
|
-
```javascript
|
|
170
|
-
// single selection
|
|
171
|
-
xs.on('cell-selected', (cell, ri, ci) => {});
|
|
172
|
-
// range selection
|
|
173
|
-
xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
|
|
174
|
-
// shape/image selection
|
|
175
|
-
xs.on('object-selected', (obj) => { console.log('obj id:', obj.id, ', type: ', obj.type); })
|
|
176
|
-
// edited on cell
|
|
177
|
-
xs.on('cell-edited', (text, ri, ci) => {});
|
|
178
|
-
// cells updated
|
|
179
|
-
xs.on('cells-updated', (name, cells) => {
|
|
180
|
-
console.log('cells updated for sheet name:', name);
|
|
181
|
-
cells.forEach((acell, index, array) => {
|
|
182
|
-
console.log('acell got updated:', acell);
|
|
183
|
-
})
|
|
184
|
-
})
|
|
185
|
-
// cells deleted
|
|
186
|
-
xs.on('cells-deleted', (range) => {
|
|
187
|
-
console.log('cells deleted :', range);
|
|
188
|
-
})
|
|
189
|
-
// rows deleted
|
|
190
|
-
xs.on('rows-deleted', (ri, n) => {
|
|
191
|
-
console.log('rows-deleted :', ri, ",size", n);
|
|
192
|
-
})
|
|
193
|
-
// columns deleted
|
|
194
|
-
xs.on('columns-deleted', (ci, n) => {
|
|
195
|
-
console.log('columns-deleted :', ci, ",size", n);
|
|
196
|
-
})
|
|
197
|
-
// rows inserted
|
|
198
|
-
xs.on('rows-inserted', (ri, n) => {
|
|
199
|
-
console.log('rows-inserted :', ri, ",size", n);
|
|
200
|
-
})
|
|
201
|
-
// columns inserted
|
|
202
|
-
xs.on('columns-inserted', (ci, n) => {
|
|
203
|
-
console.log('columns-inserted :', ci, ",size", n);
|
|
204
|
-
})
|
|
205
|
-
|
|
206
|
-
```
|
|
43
|
+
window.JSZip = JSZip;
|
|
207
44
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
45
|
+
const spreadsheet = new Spreadsheet('#gridjs-demo', {
|
|
46
|
+
updateMode: 'server',
|
|
47
|
+
updateUrl: '/GridJs2/UpdateCell',
|
|
48
|
+
mode: 'edit',
|
|
49
|
+
local: 'en',
|
|
50
|
+
});
|
|
214
51
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
// cell(ri, ci, sheetIndex = 0)
|
|
219
|
-
xs.cell(ri, ci);
|
|
220
|
-
// cellStyle(ri, ci, sheetIndex = 0)
|
|
221
|
-
xs.cellStyle(ri, ci);
|
|
52
|
+
spreadsheet.loadData(workbookJson.data, workbookJson.actname);
|
|
53
|
+
spreadsheet.setUniqueId(workbookJson.uniqueid);
|
|
54
|
+
spreadsheet.setFileName(workbookJson.filename);
|
|
222
55
|
```
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
## Features
|
|
226
|
-
|
|
227
|
-
### Rich Editing & Formatting
|
|
228
|
-
- Font/Font size/ bold/italic/Underline/Strike
|
|
229
|
-
- Text color/Align/wrapping
|
|
230
|
-
- Fill color / Highlight
|
|
231
|
-
- Number Format / RichText
|
|
232
|
-
- Borders / Condition Format
|
|
233
|
-
- Paint format / Clear format
|
|
234
|
-
|
|
235
|
-
### Data Management & Analysis
|
|
236
|
-
- Formula support
|
|
237
|
-
- Filter / Sort row and column
|
|
238
|
-
- Data validations
|
|
239
|
-
- Copy, Cut, Paste / Autofill
|
|
240
|
-
- Merge cells / Freeze cell
|
|
241
|
-
- Insert/Delete row, column
|
|
242
|
-
- Resize row-height, col-width
|
|
243
|
-
- Zoom in/out
|
|
244
|
-
- Search
|
|
245
|
-
|
|
246
|
-
### ️ Visuals & Objects
|
|
247
|
-
- Display chart/shapes
|
|
248
|
-
- Display condition icons
|
|
249
|
-
- Shape/Image resize/rotate/position adjustment
|
|
250
|
-
- Insert/Delete/Copy common shapes for autoshape
|
|
251
|
-
- Insert/Delete/Copy Image
|
|
252
|
-
- Display form controls / ActiveX controls
|
|
253
|
-
- Insert/Delete form controls
|
|
254
|
-
- Support display two colors gradient in fill effects
|
|
255
|
-
|
|
256
|
-
### ️ Security & Advanced Tools
|
|
257
|
-
- Redact sensitive data
|
|
258
|
-
- Add/delete Comment
|
|
259
|
-
- Add/delete Links
|
|
260
|
-
- Print
|
|
261
|
-
- Localization/Multiple language UI
|
|
262
|
-
- Mobile compatibility
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
## Github-Demos
|
|
266
|
-
|
|
267
|
-
Visit the GridJs demo to find more detail info:
|
|
268
|
-
|
|
269
|
-
https://github.com/aspose-cells/Aspose.Cells.Grid-for-.NET/tree/master/Examples_GridJs
|
|
270
|
-
|
|
271
|
-
https://github.com/aspose-cells/Aspose.Cells.Grid-for-Java/tree/master/Examples.GridJs
|
|
272
|
-
|
|
273
|
-
https://github.com/aspose-cells/Aspose.Cells.Grid-for-Python-via-.NET/tree/main/Examples.GridJs
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
## Documentation
|
|
278
|
-
|
|
279
|
-
Online documentation is available here:
|
|
280
|
-
|
|
281
|
-
- [Developer's Guide C#](https://docs.aspose.com/cells/net/aspose-cells-gridjs/)
|
|
282
|
-
- [API Reference C#](https://docs.aspose.com/cells/net/aspose-cells-gridjs/client/)
|
|
283
|
-
- [Developer's Guide Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/)
|
|
284
|
-
- [API Reference Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/client/)
|
|
285
|
-
- [Developer's Guide JAVA](https://docs.aspose.com/cells/java/aspose-cells-gridjs/)
|
|
286
|
-
- [API Reference JAVA](https://docs.aspose.com/cells/java/aspose-cells-gridjs/client/)
|
|
287
56
|
|
|
288
|
-
##
|
|
57
|
+
## Vanilla HTML with script tags
|
|
289
58
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
- Fix bug that fail to insert column in the new added worksheet
|
|
297
|
-
- Fix bug that fail to rename worksheet
|
|
298
|
-
- Support lazy loading
|
|
299
|
-
|
|
300
|
-
v24.10:
|
|
301
|
-
|
|
302
|
-
- Support a view option to show formulas
|
|
303
|
-
|
|
304
|
-
v24.11:
|
|
305
|
-
|
|
306
|
-
- improve the display of rich text cell values
|
|
307
|
-
|
|
308
|
-
v24.12:
|
|
309
|
-
|
|
310
|
-
- Support API to show HTML nodes and interact with HTML nodes at specified cell positions
|
|
311
|
-
- Support pre-check event for row/column delete/insert operations
|
|
312
|
-
- Support row/column insert/delete events for client APIs
|
|
313
|
-
- Support events for updating cells
|
|
314
|
-
- Support multiple instances on one page
|
|
315
|
-
|
|
316
|
-
v25.1:
|
|
317
|
-
|
|
318
|
-
- Support copy/paste from MS-Excel
|
|
319
|
-
|
|
320
|
-
v25.2:
|
|
321
|
-
|
|
322
|
-
- Support copy/paste from MS-Excel
|
|
323
|
-
- Enhancement for automatic operations for user’s convenience, such as extending blank row/column, page scrolling, …
|
|
324
|
-
|
|
325
|
-
v25.3:
|
|
326
|
-
|
|
327
|
-
- Support more shotcut keys
|
|
328
|
-
- Support pasting the content copied from excel to multiple target areas
|
|
329
|
-
|
|
330
|
-
v25.4:
|
|
331
|
-
|
|
332
|
-
- Support show statistics information in the lower right corner when cells are selected
|
|
333
|
-
|
|
334
|
-
v25.5:
|
|
335
|
-
|
|
336
|
-
- Add support for Polish menus.
|
|
337
|
-
- Support APIs for insert/delete rows/columns
|
|
338
|
-
|
|
339
|
-
v25.6:
|
|
340
|
-
|
|
341
|
-
- Support APIs for resize rows/columns
|
|
342
|
-
- Support APIs for hide/unhide rows/columns
|
|
343
|
-
|
|
344
|
-
v25.7:
|
|
345
|
-
|
|
346
|
-
- Support APIs to enable /disable editable range
|
|
347
|
-
- Support APIs to add/modify/delete worksheet
|
|
348
|
-
- Support APIs to add/modify/delete comment
|
|
349
|
-
- Support APIs to set attribute for range of cells
|
|
350
|
-
- Support APIs to delete for range of cells
|
|
351
|
-
|
|
352
|
-
v25.8:
|
|
353
|
-
|
|
354
|
-
- Support automatic text wrapping
|
|
355
|
-
- Support API to apply font setting in textbox control
|
|
356
|
-
|
|
357
|
-
v25.9:
|
|
59
|
+
```html
|
|
60
|
+
<link
|
|
61
|
+
rel="stylesheet"
|
|
62
|
+
href="https://unpkg.com/gridjs-spreadsheet@26.7.0/xspreadsheet.css"
|
|
63
|
+
>
|
|
358
64
|
|
|
359
|
-
|
|
65
|
+
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
|
|
66
|
+
<script src="https://unpkg.com/gridjs-spreadsheet@26.7.0/xspreadsheet.js"></script>
|
|
360
67
|
|
|
361
|
-
|
|
68
|
+
<div id="gridjs-demo"></div>
|
|
362
69
|
|
|
363
|
-
|
|
364
|
-
|
|
70
|
+
<script>
|
|
71
|
+
const spreadsheet = x_spreadsheet('#gridjs-demo', {
|
|
72
|
+
updateMode: 'server',
|
|
73
|
+
updateUrl: '/GridJs2/UpdateCell',
|
|
74
|
+
mode: 'edit',
|
|
75
|
+
local: 'en',
|
|
76
|
+
});
|
|
365
77
|
|
|
366
|
-
|
|
78
|
+
spreadsheet.loadData(workbookJson.data, workbookJson.actname);
|
|
79
|
+
</script>
|
|
80
|
+
```
|
|
367
81
|
|
|
368
|
-
|
|
369
|
-
- Support 'Fill Color ' and 'Font Color' button dropdown selection and click to fill
|
|
82
|
+
## React
|
|
370
83
|
|
|
371
|
-
|
|
84
|
+
```jsx
|
|
85
|
+
import { useState } from 'react';
|
|
86
|
+
import { GridJsSpreadsheet } from 'gridjs-spreadsheet/react';
|
|
87
|
+
import 'gridjs-spreadsheet/xspreadsheet.css';
|
|
372
88
|
|
|
373
|
-
|
|
374
|
-
|
|
89
|
+
export default function App() {
|
|
90
|
+
const [data] = useState(null);
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<GridJsSpreadsheet
|
|
94
|
+
data={data}
|
|
95
|
+
apiBase=""
|
|
96
|
+
mode="edit"
|
|
97
|
+
locale="en"
|
|
98
|
+
height="600px"
|
|
99
|
+
onReady={(instance, adapter) => console.log('ready', instance, adapter)}
|
|
100
|
+
onError={(error) => console.error(error)}
|
|
101
|
+
/>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
```
|
|
375
105
|
|
|
376
|
-
|
|
106
|
+
## Vue 3
|
|
107
|
+
|
|
108
|
+
```vue
|
|
109
|
+
<template>
|
|
110
|
+
<GridJsSpreadsheet
|
|
111
|
+
:data="sheetData"
|
|
112
|
+
mode="edit"
|
|
113
|
+
locale="en"
|
|
114
|
+
height="600px"
|
|
115
|
+
@ready="onReady"
|
|
116
|
+
@error="onError"
|
|
117
|
+
/>
|
|
118
|
+
</template>
|
|
119
|
+
|
|
120
|
+
<script setup>
|
|
121
|
+
import { ref } from 'vue';
|
|
122
|
+
import { GridJsSpreadsheet } from 'gridjs-spreadsheet/vue';
|
|
123
|
+
import 'gridjs-spreadsheet/xspreadsheet.css';
|
|
377
124
|
|
|
378
|
-
|
|
379
|
-
|
|
125
|
+
const sheetData = ref(null);
|
|
126
|
+
const onReady = (instance, adapter) => console.log('ready', instance, adapter);
|
|
127
|
+
const onError = error => console.error(error);
|
|
128
|
+
</script>
|
|
129
|
+
```
|
|
380
130
|
|
|
381
|
-
|
|
131
|
+
## Angular
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
import { Component } from '@angular/core';
|
|
135
|
+
import { GridJsSpreadsheetComponent } from 'gridjs-spreadsheet/angular';
|
|
136
|
+
|
|
137
|
+
@Component({
|
|
138
|
+
selector: 'app-root',
|
|
139
|
+
standalone: true,
|
|
140
|
+
imports: [GridJsSpreadsheetComponent],
|
|
141
|
+
template: `
|
|
142
|
+
<gridjs-spreadsheet
|
|
143
|
+
[data]="sheetData"
|
|
144
|
+
mode="edit"
|
|
145
|
+
locale="en"
|
|
146
|
+
height="600px"
|
|
147
|
+
(ready)="onReady($event)"
|
|
148
|
+
(error)="onError($event)"
|
|
149
|
+
/>
|
|
150
|
+
`,
|
|
151
|
+
})
|
|
152
|
+
export class AppComponent {
|
|
153
|
+
sheetData: any = null;
|
|
154
|
+
onReady(event: any) { console.log('ready', event); }
|
|
155
|
+
onError(error: any) { console.error(error); }
|
|
156
|
+
}
|
|
157
|
+
```
|
|
382
158
|
|
|
383
|
-
|
|
159
|
+
Add the GridJS stylesheet to `angular.json`:
|
|
384
160
|
|
|
385
|
-
|
|
161
|
+
```json
|
|
162
|
+
"styles": [
|
|
163
|
+
"node_modules/gridjs-spreadsheet/xspreadsheet.css",
|
|
164
|
+
"src/styles.css"
|
|
165
|
+
]
|
|
166
|
+
```
|
|
386
167
|
|
|
387
|
-
|
|
168
|
+
## Framework adapter inputs
|
|
388
169
|
|
|
389
|
-
|
|
170
|
+
The React, Vue, and Angular adapters share the same configuration model:
|
|
390
171
|
|
|
391
|
-
|
|
392
|
-
|
|
172
|
+
| Option | Description |
|
|
173
|
+
| --- | --- |
|
|
174
|
+
| `apiBase` | Optional prefix for GridJS backend endpoints |
|
|
175
|
+
| `data` | Workbook JSON returned by the GridJS backend |
|
|
176
|
+
| `loader` | Function that asynchronously returns workbook JSON |
|
|
177
|
+
| `mode` | `edit` or `read` |
|
|
178
|
+
| `locale` | GridJS UI locale |
|
|
179
|
+
| `token` | Optional authorization token |
|
|
180
|
+
| `height` | Component height |
|
|
181
|
+
| `showToolbar` | Show or hide the toolbar |
|
|
182
|
+
| `showContextmenu` | Show or hide the context menu |
|
|
393
183
|
|
|
394
|
-
|
|
184
|
+
The adapters expose ready, change, error, cell selection, cell editing, sheet selection, and sheet loading events using each framework's normal event conventions.
|
|
395
185
|
|
|
396
|
-
|
|
186
|
+
GridJS requires a browser DOM. Mount the adapters on the client when using an SSR framework.
|
|
397
187
|
|
|
398
|
-
|
|
188
|
+
## Java example included in the package
|
|
399
189
|
|
|
400
|
-
|
|
190
|
+
The published package contains `example/`, including a Spring Boot backend and all five frontend projects. Copy it to a writable directory before running it:
|
|
401
191
|
|
|
402
|
-
|
|
192
|
+
```bash
|
|
193
|
+
npm install gridjs-spreadsheet
|
|
194
|
+
cp -R node_modules/gridjs-spreadsheet/example ./gridjs-example
|
|
195
|
+
cd gridjs-example
|
|
196
|
+
```
|
|
403
197
|
|
|
404
|
-
|
|
198
|
+
Start the Java backend in the first terminal:
|
|
405
199
|
|
|
406
|
-
|
|
200
|
+
```bash
|
|
201
|
+
./mvnw spring-boot:run -Dmaven.test.skip=true
|
|
202
|
+
```
|
|
407
203
|
|
|
408
|
-
|
|
204
|
+
Start a frontend in a second terminal, for example React:
|
|
409
205
|
|
|
410
|
-
|
|
206
|
+
```bash
|
|
207
|
+
cd react-gridjs
|
|
208
|
+
npm install
|
|
209
|
+
npm run dev
|
|
210
|
+
```
|
|
411
211
|
|
|
412
|
-
|
|
212
|
+
See [`example/README.md`](example/README.md) for all framework commands, ports, backend configuration, and troubleshooting.
|
|
413
213
|
|
|
414
|
-
|
|
214
|
+
## Backend endpoints
|
|
415
215
|
|
|
416
|
-
|
|
417
|
-
- Improve print
|
|
216
|
+
The adapters use the standard Aspose.Cells GridJs endpoints, including:
|
|
418
217
|
|
|
419
|
-
|
|
218
|
+
- `/GridJs2/UpdateCell`
|
|
219
|
+
- `/GridJs2/ImageUrl`
|
|
220
|
+
- `/GridJs2/AddImage`
|
|
221
|
+
- `/GridJs2/AddImageByURL`
|
|
222
|
+
- `/GridJs2/CopyImage`
|
|
223
|
+
- `/GridJs2/Download`
|
|
224
|
+
- `/GridJs2/Ole`
|
|
225
|
+
- `/GridJs2/LazyLoadingStreamJson`
|
|
420
226
|
|
|
421
|
-
|
|
227
|
+
The example frontend development servers proxy `/GridJs2` and `/gridjsdemo` to the Java backend on port 8080.
|
|
422
228
|
|
|
423
|
-
|
|
229
|
+
## Preview
|
|
424
230
|
|
|
425
|
-
|
|
231
|
+
<img alt="GridJS spreadsheet preview" src="https://unpkg.com/gridjs-spreadsheet@26.7.0/preview.gif">
|
|
426
232
|
|
|
427
|
-
|
|
233
|
+
## Resources
|
|
428
234
|
|
|
429
|
-
-
|
|
235
|
+
- [Aspose.Cells product page](https://products.aspose.com/cells/java/)
|
|
236
|
+
- [Aspose.Cells GridJs documentation](https://docs.aspose.com/cells/java/aspose-cells-gridjs/)
|
|
237
|
+
- [API reference](https://reference.aspose.com/cells/java/com.aspose.gridjs/)
|
|
238
|
+
- [Free support forum](https://forum.aspose.com/c/cells)
|
|
430
239
|
|
|
431
240
|
## License
|
|
432
241
|
|
|
433
242
|
MIT
|
|
434
|
-
|
|
435
|
-
## Support
|
|
436
|
-
|
|
437
|
-
You can ask any question or request features or report bugs using the [Forum](https://forum.aspose.com/c/cells).
|
|
438
|
-
|
|
439
|
-
[Product Page](https://products.aspose.com/cells) | [Product Documentation](https://docs.aspose.com/cells/net/aspose-cells-gridjs/) | [Blog](https://blog.aspose.com/category/cells/) |[API Reference](https://reference.aspose.com/cells/net/aspose.cells.gridjs/) | [Source Code Samples](https://github.com/aspose-cells/Aspose.Cells.Grid-for-.NET/tree/main/Examples_GridJs) | [Free Support](https://forum.aspose.com/c/cells)
|