gridjs-spreadsheet 22.11.2 → 22.11.4

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 +50 -31
  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.4",
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.4/xspreadsheet.css">
23
+ <script src="https://unpkg.com/gridjs-spreadsheet@22.11.4/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
47
 
27
- ```shell
28
- npm install gridjs-spreadsheet
29
- ```
30
-
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
- });
45
-
46
- // data validation
47
- s.validate()
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
+ }
67
+
68
+
48
69
  ```
49
70
 
50
71
  ```javascript
@@ -90,28 +111,26 @@ s.validate()
90
111
 
91
112
  ## Bind events
92
113
  ```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 }) => {});
114
+ xs.on('cell-selected', (cell, ri, ci) => {});
115
+ xs.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
97
116
  // edited on cell
98
- s.on('cell-edited', (text, ri, ci) => {});
117
+ xs.on('cell-edited', (text, ri, ci) => {});
99
118
  ```
100
119
 
101
120
  ## update cell-text
102
121
  ```javascript
103
- const s = new Spreadsheet("#x-spreadsheet-demo")
122
+
104
123
  // cellText(ri, ci, text, sheetIndex = 0)
105
- s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
124
+ xs.cellText(5, 5, 'xxxx',0).cellText(6, 5, 'yyy',0).reRender();
106
125
  ```
107
126
 
108
127
  ## get cell and cell-style
109
128
  ```javascript
110
- const s = new Spreadsheet("#x-spreadsheet-demo")
129
+
111
130
  // cell(ri, ci, sheetIndex = 0)
112
- s.cell(ri, ci);
131
+ xs.cell(ri, ci);
113
132
  // cellStyle(ri, ci, sheetIndex = 0)
114
- s.cellStyle(ri, ci);
133
+ xs.cellStyle(ri, ci);
115
134
  ```
116
135
 
117
136
 
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%;