x spreadsheet

x-spreadsheet

Spreadsheet JavaScript berbasis web

Dokumen

• en
• zh-cn 中文

CDN

 < link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/xspreadsheet.css " >
< script src =" https://unpkg.com/[email protected]/dist/xspreadsheet.js " >  script >

< script >
   x_spreadsheet ( '#xspreadsheet' ) ;
 script > 

NPM

npm install x-data-spreadsheet

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

 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 ( ) 

 // default options
{
  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 ,
    } ,
  } ,
} 

impor | ekspor xlsx

https://github.com/SheetJS/sheetjs/tree/master/demos/xspreadsheet# saving-data

terima kasih https://github.com/SheetJS/sheetjs

Mengikat acara

 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 ) => { } ) ; 

perbarui teks sel

 const s = new Spreadsheet ( "#x-spreadsheet-demo" )
// cellText(ri, ci, text, sheetIndex = 0)
s . cellText ( 5 , 5 , 'xxxx' ) . cellText ( 6 , 5 , 'yyy' ) . reRender ( ) ; 

dapatkan gaya sel dan sel

 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 ) ; 

Internasionalisasi

 // 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' ) ) ; 

 
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/xspreadsheet.css " >
< script src =" https://unpkg.com/[email protected]/dist/xspreadsheet.js " >  script >
< script src =" https://unpkg.com/[email protected]/dist/locale/zh-cn.js " >  script >

< script >
  x_spreadsheet . locale ( 'zh-cn' ) ;
 script > 

Fitur

• Batalkan & Ulangi
• Format cat
• Hapus format
• Format
• huruf
• Ukuran huruf
• Font tebal
• Huruf miring
• Menggarisbawahi
• Memukul
• Warna teks
• Isi warna
• Perbatasan
• Gabungkan sel
• Meluruskan
• Pembungkusan teks
• Bekukan sel
• Fungsi
• Ubah ukuran tinggi baris, lebar kolom
• Salin, Potong, Tempel
• IsiOtomatis
• Sisipkan baris, kolom
• Hapus baris, kolom
• sembunyikan baris, kolom
• beberapa lembar
• mencetak
• Validasi data

Perkembangan

 git clone https://github.com/myliang/x-spreadsheet.git
cd x-spreadsheet
npm install
npm run dev

Buka browser Anda dan kunjungi http://127.0.0.1:8080.

Dukungan Peramban

Browser modern (chrome, firefox, Safari).

LISENSI

MIT