gridjs-spreadsheet 26.6.2 → 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/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 +58 -1
- 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 -384
- 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 +7 -0
- package/xspreadsheet.js +3 -3
- 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,443 +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
|
-
|
|
15
|
+
```bash
|
|
16
|
+
npm install gridjs-spreadsheet
|
|
17
|
+
```
|
|
22
18
|
|
|
23
|
-
|
|
19
|
+
The framework packages are optional peer dependencies. Install only the framework used by your application.
|
|
24
20
|
|
|
25
|
-
##
|
|
21
|
+
## Package exports
|
|
26
22
|
|
|
27
|
-
|
|
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` |
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
## API
|
|
31
|
-
|
|
32
|
-
APIs are available on the [API page](https://docs.aspose.com/cells/net/aspose-cells-gridjs/how-to-use-gridjs-client-api/).
|
|
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>
|
|
46
|
-
|
|
47
|
-
<script>
|
|
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
|
-
```
|
|
68
|
-
|
|
69
|
-
## NPM
|
|
70
|
-
|
|
71
|
-
```shell
|
|
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
42
|
|
|
104
|
-
|
|
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
|
-
|
|
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
|
-
|
|
288
|
-
## Browser Support
|
|
289
56
|
|
|
290
|
-
|
|
57
|
+
## Vanilla HTML with script tags
|
|
291
58
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
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:
|
|
358
|
-
|
|
359
|
-
- Support to render pattern style for cell
|
|
360
|
-
|
|
361
|
-
v25.10:
|
|
59
|
+
```html
|
|
60
|
+
<link
|
|
61
|
+
rel="stylesheet"
|
|
62
|
+
href="https://unpkg.com/gridjs-spreadsheet@26.7.0/xspreadsheet.css"
|
|
63
|
+
>
|
|
362
64
|
|
|
363
|
-
|
|
364
|
-
-
|
|
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>
|
|
365
67
|
|
|
366
|
-
|
|
68
|
+
<div id="gridjs-demo"></div>
|
|
367
69
|
|
|
368
|
-
|
|
369
|
-
|
|
70
|
+
<script>
|
|
71
|
+
const spreadsheet = x_spreadsheet('#gridjs-demo', {
|
|
72
|
+
updateMode: 'server',
|
|
73
|
+
updateUrl: '/GridJs2/UpdateCell',
|
|
74
|
+
mode: 'edit',
|
|
75
|
+
local: 'en',
|
|
76
|
+
});
|
|
370
77
|
|
|
371
|
-
|
|
78
|
+
spreadsheet.loadData(workbookJson.data, workbookJson.actname);
|
|
79
|
+
</script>
|
|
80
|
+
```
|
|
372
81
|
|
|
373
|
-
|
|
374
|
-
- Support add multiple selection validation list
|
|
82
|
+
## React
|
|
375
83
|
|
|
376
|
-
|
|
84
|
+
```jsx
|
|
85
|
+
import { useState } from 'react';
|
|
86
|
+
import { GridJsSpreadsheet } from 'gridjs-spreadsheet/react';
|
|
87
|
+
import 'gridjs-spreadsheet/xspreadsheet.css';
|
|
377
88
|
|
|
378
|
-
|
|
379
|
-
|
|
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
|
+
```
|
|
380
105
|
|
|
381
|
-
|
|
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';
|
|
382
124
|
|
|
383
|
-
|
|
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
|
+
```
|
|
384
130
|
|
|
385
|
-
|
|
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
|
+
```
|
|
386
158
|
|
|
387
|
-
|
|
159
|
+
Add the GridJS stylesheet to `angular.json`:
|
|
388
160
|
|
|
389
|
-
|
|
161
|
+
```json
|
|
162
|
+
"styles": [
|
|
163
|
+
"node_modules/gridjs-spreadsheet/xspreadsheet.css",
|
|
164
|
+
"src/styles.css"
|
|
165
|
+
]
|
|
166
|
+
```
|
|
390
167
|
|
|
391
|
-
|
|
392
|
-
- Fix paste scroll issue
|
|
168
|
+
## Framework adapter inputs
|
|
393
169
|
|
|
394
|
-
|
|
170
|
+
The React, Vue, and Angular adapters share the same configuration model:
|
|
395
171
|
|
|
396
|
-
|
|
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 |
|
|
397
183
|
|
|
398
|
-
|
|
184
|
+
The adapters expose ready, change, error, cell selection, cell editing, sheet selection, and sheet loading events using each framework's normal event conventions.
|
|
399
185
|
|
|
400
|
-
|
|
186
|
+
GridJS requires a browser DOM. Mount the adapters on the client when using an SSR framework.
|
|
401
187
|
|
|
402
|
-
|
|
188
|
+
## Java example included in the package
|
|
403
189
|
|
|
404
|
-
|
|
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:
|
|
405
191
|
|
|
406
|
-
|
|
192
|
+
```bash
|
|
193
|
+
npm install gridjs-spreadsheet
|
|
194
|
+
cp -R node_modules/gridjs-spreadsheet/example ./gridjs-example
|
|
195
|
+
cd gridjs-example
|
|
196
|
+
```
|
|
407
197
|
|
|
408
|
-
|
|
198
|
+
Start the Java backend in the first terminal:
|
|
409
199
|
|
|
410
|
-
|
|
200
|
+
```bash
|
|
201
|
+
./mvnw spring-boot:run -Dmaven.test.skip=true
|
|
202
|
+
```
|
|
411
203
|
|
|
412
|
-
|
|
204
|
+
Start a frontend in a second terminal, for example React:
|
|
413
205
|
|
|
414
|
-
|
|
206
|
+
```bash
|
|
207
|
+
cd react-gridjs
|
|
208
|
+
npm install
|
|
209
|
+
npm run dev
|
|
210
|
+
```
|
|
415
211
|
|
|
416
|
-
|
|
417
|
-
- Improve print
|
|
212
|
+
See [`example/README.md`](example/README.md) for all framework commands, ports, backend configuration, and troubleshooting.
|
|
418
213
|
|
|
419
|
-
|
|
214
|
+
## Backend endpoints
|
|
420
215
|
|
|
421
|
-
|
|
216
|
+
The adapters use the standard Aspose.Cells GridJs endpoints, including:
|
|
422
217
|
|
|
423
|
-
|
|
218
|
+
- `/GridJs2/UpdateCell`
|
|
219
|
+
- `/GridJs2/ImageUrl`
|
|
220
|
+
- `/GridJs2/AddImage`
|
|
221
|
+
- `/GridJs2/AddImageByURL`
|
|
222
|
+
- `/GridJs2/CopyImage`
|
|
223
|
+
- `/GridJs2/Download`
|
|
224
|
+
- `/GridJs2/Ole`
|
|
225
|
+
- `/GridJs2/LazyLoadingStreamJson`
|
|
424
226
|
|
|
425
|
-
|
|
227
|
+
The example frontend development servers proxy `/GridJs2` and `/gridjsdemo` to the Java backend on port 8080.
|
|
426
228
|
|
|
427
|
-
|
|
229
|
+
## Preview
|
|
428
230
|
|
|
429
|
-
|
|
231
|
+
<img alt="GridJS spreadsheet preview" src="https://unpkg.com/gridjs-spreadsheet@26.7.0/preview.gif">
|
|
430
232
|
|
|
431
|
-
|
|
233
|
+
## Resources
|
|
432
234
|
|
|
433
|
-
-
|
|
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)
|
|
434
239
|
|
|
435
240
|
## License
|
|
436
241
|
|
|
437
242
|
MIT
|
|
438
|
-
|
|
439
|
-
## Support
|
|
440
|
-
|
|
441
|
-
You can ask any question or request features or report bugs using the [Forum](https://forum.aspose.com/c/cells).
|
|
442
|
-
|
|
443
|
-
[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)
|