gridjs-spreadsheet 24.11.0 → 24.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.
Files changed (7) hide show
  1. package/{a3b683289420fd8ec937908397907279.svg → 2922578eabb1a88d1974da56c65189ba.svg} +907 -907
  2. package/{555f60323063f2b68b6eac7ce9c45b19.svg → 9ab1b217edd126e8925e88cc8f25a154.svg} +88 -88
  3. package/package.json +1 -1
  4. package/package.json.bak +52 -0
  5. package/readme.md.bak +246 -0
  6. package/xspreadsheet.css +3 -3
  7. package/xspreadsheet.js +5 -5
package/{555f60323063f2b68b6eac7ce9c45b19.svg → 9ab1b217edd126e8925e88cc8f25a154.svg} RENAMED
@@ -1,88 +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>
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gridjs-spreadsheet",
3
- "version": "24.11.0",
3
+ "version": "24.12.0",
4
4
  "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
5
5
  "types": "index.d.ts",
6
6
  "main": "xspreadsheet.js",
package/package.json.bak ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "name": "gridjs-spreadsheet",
3
+ "version": "24.10",
4
+ "description": "this is the client side script for GridJs which is a lightweight, scalable, and customizable toolkit that provides cross-platform web applications, enables convenient development for editing or viewing Excel/Spreadsheet files, offers simple deployment, and provides easy-to-use APIs based on JSON format.",
5
+ "types": "index.d.ts",
6
+ "main": "xspreadsheet.js",
7
+ "scripts": {
8
+ "test": "echo \"Error: no test specified\" && exit 1"
9
+ },
10
+ "keywords": [
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
+ "CHM",
32
+ "JSON",
33
+ "SQL",
34
+ "XML",
35
+ "Online excel",
36
+ "spread-sheets",
37
+ "javascript spreadsheet",
38
+ "javascript excel",
39
+ "excel io",
40
+ "sheets",
41
+ "sheet",
42
+ "javascript",
43
+ "excel"
44
+ ],
45
+ "author": "Aspose Cells Team",
46
+ "dependencies": {
47
+ "jquery": "~ 3.6.0",
48
+ "jquery-ui": "~ 1.13.2",
49
+ "jszip": "~ 3.10.1"
50
+ },
51
+ "license": "MIT"
52
+ }
package/readme.md.bak ADDED
@@ -0,0 +1,246 @@
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@24.9.0/xspreadsheet.css">
26
+ <script src="https://unpkg.com/gridjs-spreadsheet@24.9.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;\\\">&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}}]";
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
+ - Support 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 C#](https://docs.aspose.com/cells/net/aspose-cells-gridjs/)
223
+ - [API Reference C#](https://docs.aspose.com/cells/net/aspose-cells-gridjs/client/)
224
+ - [Developer's Guide Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/)
225
+ - [API Reference Python](https://docs.aspose.com/cells/python-net/aspose-cells-gridjs/client/)
226
+ - [Developer's Guide JAVA](https://docs.aspose.com/cells/java/aspose-cells-gridjs/)
227
+ - [API Reference JAVA](https://docs.aspose.com/cells/java/aspose-cells-gridjs/client/)
228
+
229
+ ## Browser Support
230
+
231
+ Modern browsers(chrome, firefox, Safari).
232
+
233
+ ## Version Info
234
+ v24.9.1:
235
+ fix bug that fail to insert column in the new added worksheet
236
+ fix bug that fail to rename worksheet
237
+ support lazy loading
238
+
239
+ ## LICENSE
240
+
241
+ MIT
242
+
243
+
244
+ ## Server Side Support
245
+
246
+ [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)
package/xspreadsheet.css CHANGED
@@ -141,14 +141,14 @@ body {
141
141
  height: 60px;
142
142
  margin: 10px;
143
143
  background-repeat: no-repeat;
144
- background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
144
+ background-image: url(9ab1b217edd126e8925e88cc8f25a154.svg);
145
145
  }
146
146
  .x-spreadsheet-banner-icon-s {
147
147
  width: 30px;
148
148
  height: 30px;
149
149
  margin: 5px;
150
150
  background-repeat: no-repeat;
151
- background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
151
+ background-image: url(9ab1b217edd126e8925e88cc8f25a154.svg);
152
152
  }
153
153
  .x-spreadsheet-banner-filename {
154
154
  width: max-content;
@@ -1250,7 +1250,7 @@ form fieldset select {
1250
1250
  display: inline-block;
1251
1251
  }
1252
1252
  .x-spreadsheet-icon .x-spreadsheet-icon-img {
1253
- background-image: url(a3b683289420fd8ec937908397907279.svg);
1253
+ background-image: url(2922578eabb1a88d1974da56c65189ba.svg);
1254
1254
  position: absolute;
1255
1255
  width: 262px;
1256
1256
  height: 444px;