x-spreadsheet
/
index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title><%= htmlWebpackPlugin.options.title %></title>

</head>
<body onload="load()">
  <div style="position: fixed; right: 0; top: .3em;">
  <iframe src="https://ghbtns.com/github-btn.html?user=myliang&repo=x-spreadsheet&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
  </div>
  <div id="x-spreadsheet-demo"></div>
  <script>
    function load(){
      const rows10 = { len: 1000 };
      for (let i = 0; i < 1000; i += 1) {
        rows10[i] = {
          cells: {
            0: { text: 'A-' + i },
            1: { text: 'B-' + i },
            2: { text: 'C-' + i },
            3: { text: 'D-' + i },
            4: { text: 'E-' + i },
            5: { text: 'F-' + i },
          }
        };
      }
      const rows = {
        len: 80,
        1: {
          cells: {
            0: { text: 'testingtesttestetst' },
            2: { text: 'testing' },
          },
        },
        2: {
          cells: {
            0: { text: 'render', style: 0 },
            1: { text: 'Hello' },
            2: { text: 'haha', merge: [1, 1] },
          }
        },
        8: {
          cells: {
            8: { text: 'border test', style: 0 },
          }
        }
      };
      // x_spreadsheet.locale('zh-cn');
      var xs = x_spreadsheet('#x-spreadsheet-demo', {showToolbar: true, showGrid: true})
        .loadData([{
          freeze: 'B3',
          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,
        }, { name: 'sheet-test', rows: rows10 }]).change((cdata) => {
          // console.log(cdata);
          console.log('>>>', xs.getData());
        });

      xs.on('cell-selected', (cell, ri, ci) => {
          console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
        }).on('cell-edited', (text, ri, ci) => {
          console.log('text:', text, ', ri: ', ri, ', ci:', ci);
        });

      setTimeout(() => {
        // xs.loadData([{ rows }]);
        xs.cellText(14, 3, 'cell-text').reRender();
        console.log('cell(8, 8):', xs.cell(8, 8));
        console.log('cellStyle(8, 8):', xs.cellStyle(8, 8));
      }, 5000);
    }
  </script>
  <!--script type="text/javascript" src="https://unpkg.com/x-data-spreadsheet@1.0.20/dist/locale/zh-cn.js"></script-->
</body>
</html>