狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

純JS開源在線電子表格X-Spreadsheet快速上手

admin
2024年6月11日 9:57 本文熱度 2020

簡述

作者:myliang

這是一個基于 Web(es6) canvas 構建的輕量級 Excel 開發庫,像這樣:

基礎功能:
  • 撤銷重做

  • 添加行列

  • 刪除行列

  • 隱藏行列

  • 動態調整行列功能

  • 凍結行列

  • 添加邊框/顏色/邊框線條樣式

  • 合并單元格

  • 復制

  • 粘貼

  • 打印

  • 公式

  • 篩選

  • 自動填充

  • 多表支持

  • 字體樣式

  • 自定義字體/大小/顏色

  • 填充前景色/背景色

  • 格式校驗

  • 對齊方式

  • 文字換行

或者查看 demo

#快速入門開發

#CDN

你可以直接在 html 靜態文件中引入

<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script>x_spreadsheet('#xspreadsheet');</script>
1
2
3
4
5
6

#NPM

你可以使用 npm 包的形式安裝

  # 基于項目構建
  npm install x-data-spreadsheet
1
2

在 html 中

<div id="x-spreadsheet-demo"></div>
1

在 js 中

import Spreadsheet from "x-data-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#x-spreadsheet-demo', options);
const s = new Spreadsheet("#x-spreadsheet-demo")  .loadData({}) // load data  .change(data => {    // save data to db  });
// data validation
s.validate()
1
2
3
4
5
6
7
8
9
10
11
12

#默認配置

{
  mode: 'edit', // edit | read
  showToolbar: true,
  showGrid: true,
  showContextmenu: true,
  view: {
    height: () => document.documentElement.clientHeight,
    width: () => document.documentElement.clientWidth,
  },
  row: {
    len: 100,
    height: 25,
  },
  col: {
    len: 26,
    width: 100,
    indexWidth: 60,
    minWidth: 60,
  },
  style: {
    bgcolor: '#ffffff',
    align: 'left',
    valign: 'middle',
    textwrap: false,
    strike: false,
    underline: false,
    color: '#0a0a0a',
    font: {
      name: 'Helvetica',
      size: 10,
      bold: false,
      italic: false,
    },
  },
}
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

#導入和導出

關于如何導出,請查看 如果需要自定義導出,可以使用 SheetJs 來完成導出,并且再次感謝

#綁定事件

簡單的事件綁定

  const s = new Spreadsheet("#x-spreadsheet-demo");
  // event of click on cell
  s.on('cell-selected', (cell, ri, ci) => {});
  s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
  // edited on cell
  s.on('cell-edited', (text, ri, ci) => {});
1
2
3
4
5
6

#快速設定單元格值

通過instance.cellText(ri,ci,text)來設定值,調用reRender()來刷新,你將會看到數據的變化

  const s = new Spreadsheet("#x-spreadsheet-demo")
  s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
1
2

#獲取選定表格中單元的樣式和值

const s = new Spreadsheet("#x-spreadsheet-demo")
// cell(ri, ci, sheetIndex = 0)
s.cell(ri, ci);
// cellStyle(ri, ci, sheetIndex = 0)
s.cellStyle(ri, ci);
1
2
3
4
5

#快速本地化

#如果是在 js 中引入

如果遇到更多問題,可以查看 issue #281

  // npm
  import Spreadsheet from 'x-data-spreadsheet';
  import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
  Spreadsheet.locale('zh-cn', zhCN);
  new Spreadsheet(document.getElementById('xss-demo'))
1
2
3
4
5
6

#可以使用 CDN

<!-- Import via CDN -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/locale/zh-cn.js"></script>
<script>x_spreadsheet.locale('zh-cn');</script>
1
2
3
4
5
6
7
8

#加入開發者

  # 拉取<repo>
  git clone https://github.com/myliang/x-spreadsheet.git  # 進入項目開發目錄
  cd x-spreadsheet  # 安裝相關依賴
  npm install
  # just do it
  npm run dev
1
2
3
4
5
6
7
8

#瀏覽器支持

chrome, firefox, Safari

#許可申明

MIT 協議

#聯系我們

聯系方式

QQ群(1已滿): 980597168

QQ群(2):904361146


該文章在 2024/6/11 10:03:15 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved