gridjs-spreadsheet 22.11.2 → 22.11.3

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 (6) hide show
  1. package/package.json +1 -1
  2. package/readme.md +41 -20
  3. package/xspreadsheet.css +14 -0
  4. package/xspreadsheet.js +1 -1
  5. package/xspreadsheet.css.map +0 -1
  6. package/xspreadsheet.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gridjs-spreadsheet",
3
- "version": "22.11.2",
3
+ "version": "22.11.3",
4
4
  "description": "A simple library allows you to view and edit spreadsheet documents with ease.",
5
5
  "main": "xspreadsheet.js",
6
6
  "scripts": {
package/readme.md CHANGED
@@ -8,43 +8,64 @@
8
8
  It allows you to view and edit spreadsheet documents with ease.
9
9
  this is developed based on https://github.com/myliang/x-spreadsheet
10
10
 
11
+
11
12
  ## CDN
12
13
  ```html
13
- <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@22.11.2/xspreadsheet.css">
14
- <script src="https://unpkg.com/gridjs-spreadsheet@22.11.2/xspreadsheet.js"></script>
14
+ <head>
15
+ <!-- other dependency start -->
16
+ <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.2.3/dist/css/bootstrap.min.css">
17
+ <link rel="stylesheet" href="https://unpkg.com/jquery-ui@1.13.2/dist/themes/ui-lightness/jquery-ui.min.css">
18
+ <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
19
+ <script src="https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
20
+ <script src="https://unpkg.com/jszip@3.10.1/dist/jszip.min.js"></script>
21
+ <!-- other dependency end -->
22
+ <link rel="stylesheet" href="https://unpkg.com/gridjs-spreadsheet@22.11.3/xspreadsheet.css">
23
+ <script src="https://unpkg.com/gridjs-spreadsheet@22.11.3/xspreadsheet.js"></script>
15
24
 
16
25
  <script>
26
+ const option = {
27
+ updateMode: 'server',
28
+ updateUrl: '/GridJs2/UpdateCell',
29
+ showToolbar: true,
30
+ //mode: 'edit' or 'read'
31
+ mode: 'read',
32
+ //support multiple language ,the locale is: en zh es pt de ru nl
33
+ local: 'en',
34
+ };
17
35
  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
36
  xs = x_spreadsheet('#gridjs-demo', option).loadData(JSON.parse(sheetstr)).change((cdata) => {
19
37
  console.log(cdata);
20
38
  console.log(xs.validate());
21
39
  }
22
40
  </script>
41
+ </head>
42
+ <body>
43
+ <div id="gridjs-demo"></div>
44
+ </body>
23
45
  ```
24
46
 
25
- ## NPM
26
-
27
- ```shell
28
- npm install gridjs-spreadsheet
29
- ```
30
47
 
31
- ```html
32
- <div id="x-spreadsheet-demo"></div>
33
- ```
48
+ ## simple usage
34
49
 
35
50
  ```javascript
36
- import Spreadsheet from "gridjs-spreadsheet";
51
+
37
52
  // 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
- });
53
+ const option = {
54
+ updateMode: 'server',
55
+ updateUrl: '/GridJs2/UpdateCell',
56
+ showToolbar: true,
57
+ //mode: 'edit' or 'read'
58
+ mode: 'read',
59
+ //support multiple language ,the locale is: en zh es pt de ru nl
60
+ local: 'en',
61
+ };
62
+
63
+ xs = x_spreadsheet('#gridjs-demo', option).loadData(sheets).change((cdata) => {
64
+ console.log(cdata);
65
+ console.log(xs.validate());
66
+ }
45
67
 
46
- // data validation
47
- s.validate()
68
+
48
69
  ```
49
70
 
50
71
  ```javascript
package/xspreadsheet.css CHANGED
@@ -103,6 +103,13 @@ body {
103
103
  width: 90%;
104
104
  flex-direction: column;
105
105
  }
106
+ .x-spreadsheet-banner-info-s {
107
+ display: flex;
108
+ height: 40px;
109
+ text-align: left;
110
+ width: 90%;
111
+ flex-direction: column;
112
+ }
106
113
  .x-spreadsheet-banner-icon {
107
114
  width: 60px;
108
115
  height: 60px;
@@ -110,6 +117,13 @@ body {
110
117
  background-repeat: no-repeat;
111
118
  background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
112
119
  }
120
+ .x-spreadsheet-banner-icon-s {
121
+ width: 30px;
122
+ height: 30px;
123
+ margin: 5px;
124
+ background-repeat: no-repeat;
125
+ background-image: url(555f60323063f2b68b6eac7ce9c45b19.svg);
126
+ }
113
127
  .x-spreadsheet-banner-filename {
114
128
  width: max-content;
115
129
  max-width: 90%;