x-spreadsheet-Web端優(yōu)秀的Javas

x-spreadsheet-Web端優(yōu)秀的Javascript電子表格

言

x-spreadsheet是一款開源的基于Web的Javascript電子表格，在Github獲得6k+的star，它在功能上有點類似于google sheet,可以說是簡化版的web excel，雖然沒excel那么強大，但也能夠應付一些需求了。

Github和體驗地址

Github：https://github.com/myliang/x-spreadsheet
DEMO：https://myliang.github.io/x-spreadsheet/

安裝

提供兩種方式

直接引用（使用cdn或者下載到本地）

<link rel="stylesheet" >
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>

NPM安裝

npm install x-data-spreadsheet

使用方式

<div id="xspreadsheet"></div>
<script>
 x.spreadsheet('#xspreadsheet');
</script>

在瀏覽器運行結果如圖：

或者你也可以使用模塊化的方式使用

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

所有默認的配置

{
 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,
 },
 },
}

國際化

<!-- Import via CDN -->
<link rel="stylesheet" >
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/locale/zh-cn.js"></script>
<script>
 x.spreadsheet.locale('zh-cn');
</script>

或者

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

上圖是我測試中文的

功能

它包含了一些基本用得到的功能

撤銷和重做
背景色
格式清除
格式化
字型
字體大小
字體粗體
字體斜體
下劃線
刪除線
文本顏色
填充顏色
邊界
合并單元格
對齊
文本換行
固定單元格
函數(shù)
調(diào)整尺寸行高，寬
復制，剪切，粘貼
自動填充
插入行、列
刪除行、列
數(shù)據(jù)驗證

完整實例代碼，可直接運行

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>x-spreadsheet</title>
 <link rel="stylesheet" >
 <script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>
 <script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/locale/zh-cn.js"></script>
</head>

<body onload="load()">
 <div id="x-spreadsheet-demo"></div>
 <script>
 function load() {
 x.spreadsheet.locale('zh-cn');
 var table=x.spreadsheet('#x-spreadsheet-demo', {})
 .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',
 ],
 rows: {
 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
 },
 }
 }
 },
 });

 table.change((cdata)=> {
 // console.log(cdata);
 console.log(table.validate());
 console.log(table);
 });
 }
 </script>


</body>

</html>

兼容性

支持主流瀏覽器（chrome, firefox, Safari），Edge貌似有問題，本地測試未通過

總結

值得注意的是在Github提供的cdn中版本號較低，在國際化的時候會出現(xiàn)錯誤，因此在更改官網(wǎng)的cdn版本至1.0.21即可，可以直接使用我上面更改后的，已經(jīng)親自測試過，如果你覺得它對你有幫助，請麻煩點贊、轉(zhuǎn)發(fā)加關注喲！后續(xù)更多實用技巧和工具等著你！

件化寫法：

HTML：

</div>

</div>

css:

.wrap{height:500px;width:80%;margin:50px auto;box-shadow:5px #ccc;}.fl{float:left;}.clearfix:after{content:'';display:table;clear:both;}.tab .t-item{float:left;width:20%;text-align:center;border:1px solid #ccc;box-sizing:border-box;padding:10px 0;cursor:pointer;}.tab .t-item.cur{color:red;background:#efefef;}.page{position:relative;height:450px;}.page .p-item{display:none;line-height:100px;height:100px;text-align:center;position:absolute;top:0px;left:0;height:100%;width:100%;}.page .p-item.cur{display:block;}

效果預覽：

js:

天小編為大家介紹五種css樣式布局以及內(nèi)服源代碼作為介紹，采用的方式是行內(nèi)級樣式（就是將css樣式代碼與html寫在一起）

已知布局元素的高度，寫出三欄布局，要求左欄、右欄寬度各為300px，中間自適應。

一、浮動布局

<!DOCTYPE html>

<html>

<head>

.wrap1 div{

min-height: 200px;

}

.wrap1 .left{

float: left;

width: 300px;

background: red;

}

.wrap1 .right{

float: right;

width: 300px;

background: blue;

}

.wrap1 .center{

background: pink;

}

</style>

</head>

<body>

浮動布局

</div>

</body>

</html>

浮動布局的兼容性比較好，但是浮動帶來的影響比較多，頁面寬度不夠的時候會影響布局。

二、絕對定位布局

<!DOCTYPE html>

<html>

<head>

<title>絕對定位布局</title>

.wrap2 div{

position: absolute;

min-height: 200px;

}

.wrap2 .left{

left: 0;

width: 300px;

background: red;

}

.wrap2 .right{

right: 0;

width: 300px;

background: blue;

}

.wrap2 .center{

left: 300px;

right: 300px;

background: pink;

}

</style>

</head>

<body>

絕對定位布局

</div>

</div>

</body>

</html>

絕對定位布局快捷，但是有效性比較差，因為脫離了文檔流。

三、flex布局

<!DOCTYPE html>

<html>

<head>

<title>flex布局</title>

.wrap3{

display: flex;

min-height: 200px;

}

.wrap3 .left{

flex-basis: 300px;

background: red;

}

.wrap3 .right{

flex-basis: 300px;

background: blue;

}

.wrap3 .center{

flex: 1;

background: pink;

}

</style>

</head>

<body>

flex布局

</div>

</div>

</body>

</html>

自適應好，高度能夠自動撐開

四、table-cell表格布局

<!DOCTYPE html>

<html>

<head>

<title>table-cell表格布局</title>

.wrap4{

display: table;

width: 100%;

height: 200px;

}

.wrap4>div{

display: table-cell;

}

.wrap4 .left{

width: 300px;

background: red;

}

.wrap4 .right{

width: 300px;

background: blue;

}

.wrap4 .center{

background: pink;

}

</style>

</head>

<body>

表格布局

</div>

</div>

</body>

</html>

兼容性好，但是有時候不能固定高度，因為會被內(nèi)容撐高。

五、網(wǎng)格布局

<!DOCTYPE html>

<html>

<head>

.wrap5{

display: grid;

width: 100%;

grid-template-rows: 200px;

grid-template-columns: 300px auto 300px;

}

.wrap5 .left{

background: red;

}

.wrap5 .right{

background: blue;

}

.wrap5 .center{

background: pink;

}

</style>

</head>

<body>

網(wǎng)格布局

</div>

</div>

</body>

</html>

希望大家可以一直關注我，支持我！感謝！！！

在線咨詢

上一篇：使用css3的動畫模擬太陽系行星公轉(zhuǎn)！
下一篇：9款最常用的響應式網(wǎng)站開發(fā)框架

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

x-spreadsheet-Web端優(yōu)秀的Javas

言

Github和體驗地址

安裝

使用方式

所有默認的配置

國際化

功能

完整實例代碼，可直接運行

兼容性

總結

您的項目需求