forked from myliang/x-spreadsheet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (118 loc) · 3.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
lodash.js
</head>
<body onload="load()">
<textarea></textarea> <button id="btn">click</button>
<div id="x-spreadsheet-demo"></div>
<script>
function load(){
const rows10 = { len: 15 };
for (let i = 0; i < 15; i += 1) {
rows10[i] = {
__id__: i,
cells: {
// 0: { text: 'A-' + i },
// 1: { text: 'B-' + i },
// 2: { text: 'C-' + i },
// 3: { text: 'D-' + i },
// 4: { text: 'E-' + i },
// 5: { text: 'E-' + i },
}
};
for(let j = 0; j < 10; j++) {
rows10[i].cells[j] = {text:'AA' + j};
}
}
let copyRows = _.cloneDeep(rows10);
// console.log(JSON.stringify(rows10));
// x_spreadsheet.locale('zh-cn');
var xs = x_spreadsheet('#x-spreadsheet-demo', {showToolbar: false, showGrid: true, showBottomBar: false})
.loadData([{
// freeze: 'B3',
headers: ['AAA', 'BBB', 'CCC','DDD'],
// styles: [
// {
// bgcolor: '#f4f5f8',
// textwrap: true,
// color: '#900b09',
// border: {
// top: ['thin', '#0366d6'],
// bottom: ['thin', '#0366d6'],
// right: ['thin', '#0366d6'],
// left: ['thin', '#0366d6'],
// },
// },
// ],
// merges: [
// 'C3:D4',
// ],
cols: {
len: 10,
// 2: { width: 200 },
},
rows: rows10,
}]);
xs.on('cell-edited', (text, ri, ci) => {
console.log('text:', text, ', ri: ', ri, ', ci:', ci);
// var data = xs.getData();
// console.log(data);
});
document.querySelector("#btn").addEventListener('click', function() {
var sheets = xs.getData();
var sheet = sheets[0];
console.log(sheet);
var colLen = sheet.cols.len;
// console.log(JSON.stringify(sheet.rows));
// console.log(sheet.rows);
var arr = [];
_.forOwn(sheet.rows, (value, key) => {
let row = [];
if(typeof value == 'object' && value.cells) {
row[0] = value.__id__;
for(let i = 0 ; i < colLen; i++) {
if(value.cells[i]) {
row[i+1] = value.cells[i].text;
} else {
row[i+1] = null;
}
}
arr.push(row);
}
});
let origin = [];
_.forOwn(copyRows, (value, key) => {
let row = [];
if(typeof value == 'object' && value.cells) {
row[0] = value.__id__;
for(let i = 0 ; i < colLen; i++) {
if(value.cells[i]) {
row[i+1] = value.cells[i].text;
} else {
row[i+1] = null;
}
}
origin.push(row);
}
});
console.log(arr);
console.log(origin);
// var newChange = _.differenceWith(arr, origin, _.isEqual);
// var oldChange = _.differenceWith(origin, arr, _.isEqual);
// console.log('newChange', newChange);
// console.log('oldChange', oldChange);
})
// setTimeout(() => {
// // xs.loadData([{ rows }]);
// xs.cellText(14, 3, 'cell-text').reRender();
// }, 5000);
}
</script>
<!--script type="text/javascript" src="https://unpkg.com/[email protected]/dist/locale/zh-cn.js"></script-->
</body>
</html>