整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

x-spreadsheet-Web端优秀的Javas

x-spreadsheet-Web端优秀的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" href="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.css">
<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" href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css">
<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'));

上图是我测试中文的

功能

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

  • 撤销和重做
  • 背景色
  • 格式清除
  • 格式化
  • 字型
  • 字体大小
  • 字体粗体
  • 字体斜体
  • 下划线
  • 删除线
  • 文本颜色
  • 填充颜色
  • 边界
  • 合并单元格
  • 对齐
  • 文本换行
  • 固定单元格
  • 函数
  • 调整尺寸行高，宽
  • 复制，剪切，粘贴
  • 自动填充
  • 插入行、列
  • 删除行、列
  • 数据验证

完整实例代码，可直接运行

<!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" href="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.css">
 <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中版本号较低，在国际化的时候会出现错误，因此在更改官网的cdn版本至1.0.21即可，可以直接使用我上面更改后的，已经亲自测试过，如果你觉得它对你有帮助，请麻烦点赞、转发加关注哟！后续更多实用技巧和工具等着你！

件化写法：

HTML：

<div class="wrape">

<div class="tab clearfix">

<div class="t-item">tab1</div>

<div class="t-item">tab2</div>

<div class="t-item cur">tab3</div>

<div class="t-item">tab4</div>

<div class="t-item">tab5</div>

</div>

<div class="page">

<div class="p-item cur">页面1</div>

<div class="p-item">页面2</div>

<div class="p-item">页面3</div>

<div class="p-item">页面4</div>

<div class="p-item">页面5</div>

</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样式布局以及内服源代码作为介绍，采用的方式是行内级样式（就是将css样式代码与html写在一起）

已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。

一、浮动布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>浮动布局</title>

<style type="text/css">

.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 class="wrap1">

<div class="left"></div>

<div class="right"></div>

<div class="center">

浮动布局

</div>

</div>

</body>

</html>

浮动布局的兼容性比较好，但是浮动带来的影响比较多，页面宽度不够的时候会影响布局。

二、绝对定位布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>绝对定位布局</title>

<style type="text/css">

.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 class="wrap2 wrap">

<div class="left"></div>

<div class="center">

绝对定位布局

</div>

<div class="right"></div>

</div>

</body>

</html>

绝对定位布局快捷，但是有效性比较差，因为脱离了文档流。

三、flex布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>flex布局</title>

<style type="text/css">

.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>

<div class="wrap3 wrap">

<div class="left"></div>

<div class="center">

flex布局

</div>

<div class="right"></div>

</div>

</body>

</html>

自适应好，高度能够自动撑开

四、table-cell表格布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

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

<style type="text/css">

.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 class="wrap4 wrap">

<div class="left"></div>

<div class="center">

表格布局

</div>

<div class="right"></div>

</div>

</body>

</html>

兼容性好，但是有时候不能固定高度，因为会被内容撑高。

五、网格布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>网格布局</title>

<style type="text/css">

.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>

<div class="wrap5 wrap">

<div class="left"></div>

<div class="center">

网格布局

</div>

<div class="right"></div>

</div>

</body>

</html>

希望大家可以一直关注我，支持我！感谢！！！


在线咨询
上一篇：使用css3的动画模拟太阳系行星公转！
下一篇：9款最常用的响应式网站开发框架

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 张家界 成都 晋州市 滨海县 房县 红桥区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服