gridjs-spreadsheet 22.11.1

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.
Files changed (8) hide show
  1. package/05f087c9088a0b2278c09809fc7b57c7.svg +832 -0
  2. package/555f60323063f2b68b6eac7ce9c45b19.svg +88 -0
  3. package/package.json +37 -0
  4. package/readme.md +166 -0
  5. package/xspreadsheet.css +1373 -0
  6. package/xspreadsheet.css.map +1 -0
  7. package/xspreadsheet.js +12 -0
  8. package/xspreadsheet.js.map +1 -0
package/555f60323063f2b68b6eac7ce9c45b19.svg ADDED
@@ -0,0 +1,88 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:url(#SVGID_1_);}
7
+ .st1{fill:url(#SVGID_2_);}
8
+ .st2{fill:url(#SVGID_3_);}
9
+ .st3{fill:url(#SVGID_4_);}
10
+ .st4{opacity:0.6;}
11
+ .st5{opacity:0.38;fill:url(#SVGID_5_);enable-background:new ;}
12
+ .st6{opacity:0.38;fill:url(#SVGID_6_);enable-background:new ;}
13
+ .st7{opacity:0.38;fill:url(#SVGID_7_);enable-background:new ;}
14
+ .st8{opacity:0.38;fill:url(#SVGID_8_);enable-background:new ;}
15
+ </style>
16
+ <g>
17
+
18
+ <radialGradient id="SVGID_1_" cx="519.1851" cy="-127.3083" r="8.2454" gradientTransform="matrix(0 1 -0.9943 0 -113.4659 -506.377)" gradientUnits="userSpaceOnUse">
19
+ <stop offset="0.1429" style="stop-color:#D5EFFC"/>
20
+ <stop offset="0.8424" style="stop-color:#3C8EC6"/>
21
+ <stop offset="1" style="stop-color:#3399CC"/>
22
+ </radialGradient>
23
+ <path class="st0" d="M21,13.6c0-0.5,0.5-6.4-4.6-9.1C14.1,3.2,10.9,3.2,9.1,5C6,8.2,8.6,11.5,9.6,11.8c0,0,0,0,0-0.1
24
+ c-1.6-6.3,9.3-7.4,11.2,1.8C20.9,13.9,21,13.9,21,13.6z"/>
25
+
26
+ <radialGradient id="SVGID_2_" cx="446.2906" cy="702.4343" r="5.9862" gradientTransform="matrix(0.9943 0 0 1 -430.3552 -688)" gradientUnits="userSpaceOnUse">
27
+ <stop offset="0.1429" style="stop-color:#FEE588"/>
28
+ <stop offset="0.5636" style="stop-color:#F79B30"/>
29
+ <stop offset="0.6867" style="stop-color:#F58B2D"/>
30
+ <stop offset="0.8883" style="stop-color:#F3752A"/>
31
+ <stop offset="1" style="stop-color:#F36C29"/>
32
+ </radialGradient>
33
+ <path class="st1" d="M8.5,21.2c0.5,0,6.4,0.5,9.1-4.6c1.3-2.4,1.2-5.6-0.5-7.4c-3.1-3.1-6.4-0.5-6.8,0.5c0,0,0,0,0.1,0
34
+ c6.2-1.6,7.3,9.3-1.8,11.3C8.3,21,8.3,21.1,8.5,21.2z"/>
35
+
36
+ <radialGradient id="SVGID_3_" cx="-378.6884" cy="623.4329" r="8.246" gradientTransform="matrix(0 -1 0.9943 0 -610.95 -369.3066)" gradientUnits="userSpaceOnUse">
37
+ <stop offset="0" style="stop-color:#FCB116"/>
38
+ <stop offset="0.193" style="stop-color:#FBB318"/>
39
+ <stop offset="0.3352" style="stop-color:#F9B91C"/>
40
+ <stop offset="0.461" style="stop-color:#F6C323"/>
41
+ <stop offset="0.5767" style="stop-color:#F4D12D"/>
42
+ <stop offset="0.6727" style="stop-color:#F0E03A"/>
43
+ <stop offset="0.7439" style="stop-color:#E5D534"/>
44
+ <stop offset="0.8645" style="stop-color:#CFBD24"/>
45
+ <stop offset="1" style="stop-color:#B19E11"/>
46
+ </radialGradient>
47
+ <path class="st2" d="M1,8.6c0,0.5-0.5,6.4,4.6,9.1C8,19,11.2,18.9,13,17.2c3.1-3.2,0.5-6.5-0.5-6.8c0,0,0,0,0,0.1
48
+ c1.6,6.3-9.3,7.4-11.2-1.8C1.2,8.3,1.1,8.3,1,8.6z"/>
49
+
50
+ <radialGradient id="SVGID_4_" cx="445.619" cy="696.9989" r="8.2461" gradientTransform="matrix(0.9943 0 0 1 -430.3552 -688)" gradientUnits="userSpaceOnUse">
51
+ <stop offset="0" style="stop-color:#A1C43A"/>
52
+ <stop offset="0.4545" style="stop-color:#A0CC3A"/>
53
+ <stop offset="1" style="stop-color:#3C943A"/>
54
+ </radialGradient>
55
+ <path class="st3" d="M13.5,1C13,1,7.1,0.6,4.5,5.7C3.2,8.1,3.2,11.3,5,13c3.1,3.1,6.4,0.5,6.8-0.5c0,0,0,0-0.1,0
56
+ c-6.2,1.6-7.3-9.3,1.8-11.3C13.8,1.2,13.8,1.1,13.5,1z"/>
57
+ <g class="st4">
58
+
59
+ <radialGradient id="SVGID_5_" cx="413.168" cy="345.1736" r="9.5277" gradientTransform="matrix(1.0925 0 0 1.6216 -440.2973 -540.7683)" gradientUnits="userSpaceOnUse">
60
+ <stop offset="0" style="stop-color:#F9E788"/>
61
+ <stop offset="1" style="stop-color:#FFFFFF"/>
62
+ </radialGradient>
63
+ <path class="st5" d="M11,5.2c-0.9,0-1.7,0.2-2.4,0.5c-2.3,3,0.1,5.9,1,6.2c0,0,0,0,0-0.1C8.7,8,12.4,6,15.8,7.2
64
+ C14.7,6,12.9,5.2,11,5.2z"/>
65
+
66
+ <radialGradient id="SVGID_6_" cx="413.1686" cy="345.1745" r="9.5274" gradientTransform="matrix(1.0925 0 0 1.6216 -440.2973 -540.7683)" gradientUnits="userSpaceOnUse">
67
+ <stop offset="0" style="stop-color:#F9E788"/>
68
+ <stop offset="1" style="stop-color:#FFFFFF"/>
69
+ </radialGradient>
70
+ <path class="st6" d="M10.3,9.7C10.3,9.7,10.3,9.7,10.3,9.7c3.8-0.9,5.7,2.7,4.6,6.1c1.5-1.1,2.4-2.8,2.4-4.7
71
+ c0-0.7-0.1-1.4-0.4-2.1C13.8,6.1,10.6,8.7,10.3,9.7z"/>
72
+
73
+ <radialGradient id="SVGID_7_" cx="413.1689" cy="345.1732" r="9.526" gradientTransform="matrix(1.0925 0 0 1.6216 -440.2973 -540.7683)" gradientUnits="userSpaceOnUse">
74
+ <stop offset="0" style="stop-color:#F9E788"/>
75
+ <stop offset="1" style="stop-color:#FFFFFF"/>
76
+ </radialGradient>
77
+ <path class="st7" d="M12.5,10.4C12.4,10.3,12.4,10.4,12.5,10.4c0.9,3.9-2.7,5.8-6.2,4.6C7.4,16.2,9.1,17,11,17
78
+ c0.9,0,1.7-0.2,2.4-0.5C15.7,13.6,13.4,10.7,12.5,10.4z"/>
79
+
80
+ <radialGradient id="SVGID_8_" cx="413.168" cy="345.1736" r="9.5275" gradientTransform="matrix(1.0925 0 0 1.6216 -440.2973 -540.7683)" gradientUnits="userSpaceOnUse">
81
+ <stop offset="0" style="stop-color:#F9E788"/>
82
+ <stop offset="1" style="stop-color:#FFFFFF"/>
83
+ </radialGradient>
84
+ <path class="st8" d="M11.8,12.5C11.8,12.5,11.8,12.5,11.8,12.5C8,13.5,6.1,9.9,7.2,6.4c-1.5,1.1-2.4,2.8-2.4,4.7
85
+ c0,0.7,0.1,1.4,0.4,2.1C8.3,16.1,11.4,13.5,11.8,12.5z"/>
86
+ </g>
87
+ </g>
88
+ </svg>
package/package.json ADDED
@@ -0,0 +1,37 @@
1
+ {
2
+ "name": "gridjs-spreadsheet",
3
+ "version": "22.11.1",
4
+ "description": "A simple library allows you to view and edit spreadsheet documents with ease.",
5
+ "main": "xspreadsheet.js",
6
+ "scripts": {
7
+ "test": "echo \"Error: no test specified\" && exit 1"
8
+ },
9
+ "keywords": [
10
+ "Excel",
11
+ "XLS",
12
+ "XLSX",
13
+ "XLSB",
14
+ "CSV",
15
+ "to",
16
+ "convert",
17
+ "PDF",
18
+ "JPG",
19
+ "PNG",
20
+ "HTML",
21
+ "ODS",
22
+ "Numbers",
23
+ "XLSM",
24
+ "Spreadsheet",
25
+ "Markdown",
26
+ "XPS",
27
+ "DOCX",
28
+ "PPTX",
29
+ "MHTML",
30
+ "SVG",
31
+ "JSON",
32
+ "SQL",
33
+ "XML"
34
+ ],
35
+ "author": "Aspose",
36
+ "license": "MIT"
37
+ }
package/readme.md ADDED
@@ -0,0 +1,166 @@
1
+ # gridjs-spreadsheet
2
+
3
+ > A web-based JavaScript spreadsheet for GridJs client side
4
+
5
+
6
+
7
+ ## Document
8
+ It allows you to view and edit spreadsheet documents with ease.
9
+ this is developed based on https://github.com/myliang/x-spreadsheet
10
+
11
+ ## CDN
12
+ ```html
13
+ <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@22.11.0/xspreadsheet.css">
14
+ <script src="https://unpkg.com/gridjs-spreadsheet@22.11.0/xspreadsheet.js"></script>
15
+
16
+ <script>
17
+ 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;\\\">&nbsp;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}}]";
18
+ xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
19
+ console.log(cdata);
20
+ console.log(xs.validate());
21
+ }
22
+ </script>
23
+ ```
24
+
25
+ ## NPM
26
+
27
+ ```shell
28
+ npm install gridjs-spreadsheet
29
+ ```
30
+
31
+ ```html
32
+ <div id="x-spreadsheet-demo"></div>
33
+ ```
34
+
35
+ ```javascript
36
+ import Spreadsheet from "gridjs-spreadsheet";
37
+ // If you need to override the default options, you can set the override
38
+ // const options = {};
39
+ // new Spreadsheet('#x-spreadsheet-demo', options);
40
+ const s = new Spreadsheet("#x-spreadsheet-demo")
41
+ .loadData({}) // load data
42
+ .change(data => {
43
+ // save data to db
44
+ });
45
+
46
+ // data validation
47
+ s.validate()
48
+ ```
49
+
50
+ ```javascript
51
+ // default options
52
+ {
53
+ mode: 'edit', // edit | read
54
+ showToolbar: true,
55
+ showGrid: true,
56
+ showContextmenu: true,
57
+ view: {
58
+ height: () => document.documentElement.clientHeight,
59
+ width: () => document.documentElement.clientWidth,
60
+ },
61
+ row: {
62
+ len: 100,
63
+ height: 25,
64
+ },
65
+ col: {
66
+ len: 26,
67
+ width: 100,
68
+ indexWidth: 60,
69
+ minWidth: 60,
70
+ },
71
+ style: {
72
+ bgcolor: '#ffffff',
73
+ align: 'left',
74
+ valign: 'middle',
75
+ textwrap: false,
76
+ strike: false,
77
+ underline: false,
78
+ color: '#0a0a0a',
79
+ font: {
80
+ name: 'Helvetica',
81
+ size: 10,
82
+ bold: false,
83
+ italic: false,
84
+ },
85
+ },
86
+ }
87
+ ```
88
+
89
+
90
+
91
+ ## Bind events
92
+ ```javascript
93
+ const s = new Spreadsheet("#x-spreadsheet-demo")
94
+ // event of click on cell
95
+ s.on('cell-selected', (cell, ri, ci) => {});
96
+ s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
97
+ // edited on cell
98
+ s.on('cell-edited', (text, ri, ci) => {});
99
+ ```
100
+
101
+ ## update cell-text
102
+ ```javascript
103
+ const s = new Spreadsheet("#x-spreadsheet-demo")
104
+ // cellText(ri, ci, text, sheetIndex = 0)
105
+ s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
106
+ ```
107
+
108
+ ## get cell and cell-style
109
+ ```javascript
110
+ const s = new Spreadsheet("#x-spreadsheet-demo")
111
+ // cell(ri, ci, sheetIndex = 0)
112
+ s.cell(ri, ci);
113
+ // cellStyle(ri, ci, sheetIndex = 0)
114
+ s.cellStyle(ri, ci);
115
+ ```
116
+
117
+
118
+ ## Features
119
+ - Paint format
120
+ - Clear format
121
+ - Format
122
+ - Font
123
+ - Font size
124
+ - Font bold
125
+ - Font italic
126
+ - Underline
127
+ - Strike
128
+ - Highlight
129
+ - Shape/Image resize/rotate/position ajustment
130
+ - Text color
131
+ - Fill color
132
+ - Borders
133
+ - Merge cells
134
+ - Align
135
+ - Text wrapping
136
+ - Freeze cell
137
+ - Functions
138
+ - Resize row-height, col-width
139
+ - Copy, Cut, Paste
140
+ - Autofill
141
+ - Insert row, column
142
+ - Delete row, column
143
+ - hide row, column
144
+ - multiple sheets
145
+ - print
146
+ - Data validations
147
+
148
+ ## Demo
149
+ for more detail ,please check
150
+
151
+ https://github.com/aspose-cells/Aspose.Cells-for-.NET/tree/master/Examples_GridJs
152
+
153
+
154
+
155
+ ## Browser Support
156
+
157
+ Modern browsers(chrome, firefox, Safari).
158
+
159
+ ## LICENSE
160
+
161
+ MIT
162
+
163
+
164
+ ## Server Side Support
165
+
166
+ [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)