jExcel 创建基于 Web 的电子表格应用
jExcel 是一个轻量级的vanilla javascript插件，用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格，可以创建可以交互的表格，兼容Excel，可以从 Js Array、JSON、CSV、XSLX文件创建表格。可以从Excel中直接复制，然后粘贴在jExcel表格中。而且可以定制化，还可以结合第三方的库使用，支持 React、Vue、JQuery等。
jexcel.gif
原文链接
安装
- 通过
npm安装
npm install jexcel
- 浏览器直接引用
基本使用
需要先创建一个div的容器，来显示表格
需要在 script中初始化表格，这样表格就会显示出来了
var data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
jexcel(document.getElementById('spreadsheet'), {
data:data,
columns: [
{ type: 'text', title:'Car', width:120 },
{ type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
{ type: 'calendar', title:'Available', width:200 },
{ type: 'image', title:'Photo', width:120 },
{ type: 'checkbox', title:'Stock', width:80 },
{ type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
{ type: 'color', width:100, render:'square', }
]
});
微信截图_20200907214625.png
在React中使用
class Jexcel extends React.Component {
constructor(props) {
super(props);
this.options = props.options;
this.wrapper = React.createRef();
}
componentDidMount = function() {
this.el = jexcel(this.wrapper.current, this.options);
}
addRow = function() {
this.el.insertRow();
}
render() {
return (
this.addRow()}>
);
}
}
var options = {
data:[[]],
minDimensions:[10,10],
};
ReactDOM.render(在 Vue中使用
import jexcel from 'jexcel'
import 'jexcel/dist/jexcel.css'
var data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777']
]
var options = {
data: data,
allowToolbar:true,
columns: [
{ type: 'text', title: 'Car', width: '120px' },
{ type: 'dropdown', title: 'Make', width: '250px', source: [ 'Alfa Romeo', 'Audi', 'Bmw' ] },
{ type: 'calendar', title: 'Available', width: '250px' },
{ type: 'image', title: 'Photo', width: '120px' },
{ type: 'checkbox', title: 'Stock', width: '80px' },
{ type: 'numeric', title: 'Price', width: '100px', mask: '$ #.##,00', decimal: ',' },
{ type: 'color', width: '100px', render: 'square' }
]
}
export default {
name: 'App',
mounted: function () {
let spreadsheet = jexcel(this.$el, options)
Object.assign(this, { spreadsheet })
}
}
加载数据
加载 javascript数组
加载 JSON文件
加载 CSV文件
销毁表
原文链接
支持的数据类型
原生支持以下数据类型
text
numeric
hidden
dropdown
autocomplete
checkbox
radio
calendar
image
color
html
如
image
可以定制其他的类型
如显示时间的控件
微信截图_20200907220335.png
- 定制时的重点
{ type: 'text', title:'Time', width:100, editor:customColumn },
openEditor: function(cell) {
// 通过原生方法创建新的控件
}，
closeEditor : function(cell, save) {
// 关闭时，获取对应的值信息
},
支持搜索和分页
image
通过程序动态设置表格内容
增加、删除行和列
支持的事件
完整的事件列表
原文链接
支持右键
支持嵌套表头
支持懒加载
支持冻结列
支持列排序
支持列过滤
支持定制化的工具栏
支持定制化样式
支持定制化公式
支持拖拽
...
更多新特性值得你继续探索
原文链接