gridjs-spreadsheet 23.10.4 → 23.12.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/package.json +1 -1
- package/package.json.bak +1 -1
- package/readme.md +8 -5
- package/readme.md.bak +236 -0
- package/xspreadsheet.js +13 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gridjs-spreadsheet",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.12.0",
|
|
4
4
|
"description": "A smart and simple to use Excel-like JavaScript Spreadsheet library allows you to view and edit spreadsheet file with ease and quick.",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"main": "xspreadsheet.js",
|
package/package.json.bak
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "gridjs-spreadsheet",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.11.0",
|
|
4
4
|
"description": "A smart and simple to use Excel-like JavaScript Spreadsheet library allows you to view and edit spreadsheet file with ease and quick.",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"main": "xspreadsheet.js",
|
package/readme.md
CHANGED
|
@@ -78,8 +78,7 @@ const s = new Spreadsheet("#gridjs-demo")
|
|
|
78
78
|
// save data to db
|
|
79
79
|
});
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
s.validate()
|
|
81
|
+
|
|
83
82
|
```
|
|
84
83
|
|
|
85
84
|
|
|
@@ -100,7 +99,7 @@ s.validate()
|
|
|
100
99
|
|
|
101
100
|
xs = x_spreadsheet('#gridjs-demo', option).loadData(sheets).change((cdata) => {
|
|
102
101
|
console.log(cdata);
|
|
103
|
-
|
|
102
|
+
|
|
104
103
|
}
|
|
105
104
|
|
|
106
105
|
|
|
@@ -202,12 +201,16 @@ xs.cellStyle(ri, ci);
|
|
|
202
201
|
- Switch/add/delete sheets
|
|
203
202
|
- Condition Format
|
|
204
203
|
- Comment
|
|
205
|
-
-
|
|
204
|
+
- Add/delete Links
|
|
206
205
|
- Print
|
|
207
206
|
- Data validations
|
|
208
207
|
- Insert picture from web page
|
|
209
208
|
- Display chart/shapes
|
|
210
|
-
- Display
|
|
209
|
+
- Display form controls /activeX controls
|
|
210
|
+
- Insert/Delete form controls
|
|
211
|
+
- Insert/Delete common shapes for autoshape
|
|
212
|
+
- Support display two colors gradient in fill effects
|
|
213
|
+
|
|
211
214
|
|
|
212
215
|
## Demo
|
|
213
216
|
Visit the GridJs demo to find more detail info
|
package/readme.md.bak
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
# gridjs-spreadsheet
|
|
2
|
+
|
|
3
|
+
> A smart and simple to use WYSIWYG Excel-like JavaScript Canvas based Spreadsheet library allows you to view and edit spreadsheet file with ease and quick
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Document
|
|
8
|
+
It allows you to view and edit spreadsheet documents with ease.
|
|
9
|
+
|
|
10
|
+
this is developed based on https://github.com/myliang/x-spreadsheet
|
|
11
|
+
|
|
12
|
+
Quick online demo: https://products.aspose.app/cells/editor
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## CDN
|
|
16
|
+
```html
|
|
17
|
+
<head>
|
|
18
|
+
<!-- other dependency start -->
|
|
19
|
+
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css">
|
|
20
|
+
<link rel="stylesheet" href="https://unpkg.com/jquery-ui@1.13.2/dist/themes/ui-lightness/jquery-ui.min.css">
|
|
21
|
+
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
22
|
+
<script src="https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
|
|
23
|
+
<script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
|
|
24
|
+
<!-- other dependency end -->
|
|
25
|
+
<link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@23.4.0/xspreadsheet.css">
|
|
26
|
+
<script src="https://unpkg.com/gridjs-spreadsheet@23.4.0/xspreadsheet.js"></script>
|
|
27
|
+
|
|
28
|
+
<script>
|
|
29
|
+
const option = {
|
|
30
|
+
updateMode: 'server',
|
|
31
|
+
updateUrl: '/GridJs2/UpdateCell',
|
|
32
|
+
showToolbar: true,
|
|
33
|
+
//mode: 'edit' or 'read'
|
|
34
|
+
mode: 'read',
|
|
35
|
+
//support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
|
|
36
|
+
local: 'en',
|
|
37
|
+
};
|
|
38
|
+
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}}]";
|
|
39
|
+
xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
|
|
40
|
+
console.log(cdata);
|
|
41
|
+
console.log(xs.validate());
|
|
42
|
+
}
|
|
43
|
+
</script>
|
|
44
|
+
</head>
|
|
45
|
+
<body>
|
|
46
|
+
<div id="gridjs-demo"></div>
|
|
47
|
+
</body>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## NPM
|
|
51
|
+
|
|
52
|
+
```shell
|
|
53
|
+
npm install gridjs-spreadsheet
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<div id="gridjs-demo"></div>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
//includ all the dependencies
|
|
62
|
+
//Including jszip
|
|
63
|
+
import JSZip from 'jszip';
|
|
64
|
+
window.JSZip = JSZip;
|
|
65
|
+
//Including jQuery
|
|
66
|
+
import $ from 'jquery';
|
|
67
|
+
window.$ = $;
|
|
68
|
+
//Including gridjs-spreadsheet
|
|
69
|
+
import 'gridjs-spreadsheet/xspreadsheet.css';
|
|
70
|
+
import Spreadsheet from "gridjs-spreadsheet";
|
|
71
|
+
|
|
72
|
+
// If you need to override the default options, you can set the override
|
|
73
|
+
// const options = {};
|
|
74
|
+
// new Spreadsheet('#gridjs-demo', options);
|
|
75
|
+
const s = new Spreadsheet("#gridjs-demo")
|
|
76
|
+
.loadData({}) // load data
|
|
77
|
+
.change(data => {
|
|
78
|
+
// save data to db
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
## simple usage
|
|
86
|
+
|
|
87
|
+
```javascript
|
|
88
|
+
|
|
89
|
+
// If you need to override the default options, you can set the override
|
|
90
|
+
const option = {
|
|
91
|
+
updateMode: 'server',
|
|
92
|
+
updateUrl: '/GridJs2/UpdateCell',
|
|
93
|
+
showToolbar: true,
|
|
94
|
+
//mode: 'edit' or 'read'
|
|
95
|
+
mode: 'read',
|
|
96
|
+
//support multiple language ,the locale is:en, cn, es, pt, de, ru, nl, ar, fr,id,it,ja, ko,th,tr,vi,cht
|
|
97
|
+
local: 'en',
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
xs = x_spreadsheet('#gridjs-demo', option).loadData(sheets).change((cdata) => {
|
|
101
|
+
console.log(cdata);
|
|
102
|
+
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```javascript
|
|
109
|
+
// default options
|
|
110
|
+
{
|
|
111
|
+
mode: 'edit', // edit | read
|
|
112
|
+
showToolbar: true,
|
|
113
|
+
showGrid: true,
|
|
114
|
+
showContextmenu: true,
|
|
115
|
+
view: {
|
|
116
|
+
height: () => document.documentElement.clientHeight,
|
|
117
|
+
width: () => document.documentElement.clientWidth,
|
|
118
|
+
},
|
|
119
|
+
row: {
|
|
120
|
+
len: 100,
|
|
121
|
+
height: 25,
|
|
122
|
+
},
|
|
123
|
+
col: {
|
|
124
|
+
len: 26,
|
|
125
|
+
width: 100,
|
|
126
|
+
indexWidth: 60,
|
|
127
|
+
minWidth: 60,
|
|
128
|
+
},
|
|
129
|
+
style: {
|
|
130
|
+
bgcolor: '#ffffff',
|
|
131
|
+
align: 'left',
|
|
132
|
+
valign: 'middle',
|
|
133
|
+
textwrap: false,
|
|
134
|
+
strike: false,
|
|
135
|
+
underline: false,
|
|
136
|
+
color: '#0a0a0a',
|
|
137
|
+
font: {
|
|
138
|
+
name: 'Helvetica',
|
|
139
|
+
size: 10,
|
|
140
|
+
bold: false,
|
|
141
|
+
italic: false,
|
|
142
|
+
},
|
|
143
|
+
},
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
## Bind events
|
|
150
|
+
```javascript
|
|
151
|
+
//single selection
|
|
152
|
+
xs.on('cell-selected', (cell, ri, ci) => {});
|
|
153
|
+
//range selection
|
|
154
|
+
xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
|
|
155
|
+
//shape/image selection
|
|
156
|
+
xs.on('object-selected', (obj) => { console.log('obj id:', obj.id, ', type: ', obj.type); })
|
|
157
|
+
// edited on cell
|
|
158
|
+
xs.on('cell-edited', (text, ri, ci) => {});
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## update cell-text
|
|
162
|
+
```javascript
|
|
163
|
+
|
|
164
|
+
// cellText(ri, ci, text, sheetIndex = 0)
|
|
165
|
+
xs.cellText(5, 5, 'xxxx',0).cellText(6, 5, 'yyy',0).reRender();
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## get cell and cell-style
|
|
169
|
+
```javascript
|
|
170
|
+
|
|
171
|
+
// cell(ri, ci, sheetIndex = 0)
|
|
172
|
+
xs.cell(ri, ci);
|
|
173
|
+
// cellStyle(ri, ci, sheetIndex = 0)
|
|
174
|
+
xs.cellStyle(ri, ci);
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
## Features
|
|
179
|
+
- Localization/Multiple language UI
|
|
180
|
+
- Paint format
|
|
181
|
+
- Clear format
|
|
182
|
+
- Format
|
|
183
|
+
- Font/Font size/ bold/italic/Underline/Strike
|
|
184
|
+
- Highlight
|
|
185
|
+
- Shape/Image resize/rotate/position ajustment
|
|
186
|
+
- Text color/Align/wrapping
|
|
187
|
+
- Fill color
|
|
188
|
+
- RichText
|
|
189
|
+
- Borders
|
|
190
|
+
- Merge cells
|
|
191
|
+
- Freeze cell
|
|
192
|
+
- Copy, Cut, Paste
|
|
193
|
+
- Autofill
|
|
194
|
+
- Insert/Delete row, column
|
|
195
|
+
- Filter row, column
|
|
196
|
+
- Zoom in/out
|
|
197
|
+
- Sort
|
|
198
|
+
- Search
|
|
199
|
+
- Formula
|
|
200
|
+
- Resize row-height, col-width
|
|
201
|
+
- Switch/add/delete sheets
|
|
202
|
+
- Condition Format
|
|
203
|
+
- Comment
|
|
204
|
+
- Add/delete Links
|
|
205
|
+
- Print
|
|
206
|
+
- Data validations
|
|
207
|
+
- Insert picture from web page
|
|
208
|
+
- Display chart/shapes
|
|
209
|
+
- Display form controls /activeX controls
|
|
210
|
+
- Insert/Delete form controls
|
|
211
|
+
- Insert/Delete common shapes for autoshape
|
|
212
|
+
- Display two colors gradient in fill effects
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
## Demo
|
|
216
|
+
Visit the GridJs demo to find more detail info
|
|
217
|
+
https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs
|
|
218
|
+
You can ask any question using the [Forum](https://forum.aspose.com/c/cells).
|
|
219
|
+
|
|
220
|
+
## Documentation
|
|
221
|
+
Online documentation is available here:
|
|
222
|
+
- [Developer's Guide](https://docs.aspose.com/cells/net/aspose-cells-gridjs/)
|
|
223
|
+
- [API Reference](https://docs.aspose.com/cells/net/aspose-cells-gridjs/client/)
|
|
224
|
+
|
|
225
|
+
## Browser Support
|
|
226
|
+
|
|
227
|
+
Modern browsers(chrome, firefox, Safari).
|
|
228
|
+
|
|
229
|
+
## LICENSE
|
|
230
|
+
|
|
231
|
+
MIT
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
## Server Side Support
|
|
235
|
+
|
|
236
|
+
[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-for-.NET/tree/master/Examples_GridJs) | [Free Support](https://forum.aspose.com/c/cells)
|