handsontable的简单使用
官网介绍：Handsontable是一个具有电子表格功能和外观的数据网格。Handsontable是用JavaScript编写的，适用于最流行的框架，如Angular，Vue和React。可以使用自定义插件轻松修改或扩展它。它使用JSON格式绑定到任何数据源并处理大量记录。它支持过滤，排序和CRUD （创建，读取，更新，删除）和高级操作（多列排序，创建自定义单元格类型和添加数据摘要）等操作。...
·
-
官网介绍：
Handsontable是一个具有电子表格功能和外观的数据网格。Handsontable是用JavaScript编写的，适用于最流行的框架，如Angular，Vue和React。可以使用自定义插件轻松修改或扩展它。它使用JSON格式绑定到任何数据源并处理大量记录。它支持过滤，排序和CRUD （创建，读取，更新，删除）和高级操作（多列排序，创建自定义单元格类型和添加数据摘要）等操作。 -
Handsontable有9种类型：
Numeric
Date
Time
Checkbox
Select
Dropdown
Autocomplete
Password
Handsontable -
官网也有非常全面的表格例子，按照自己的需求对其修改，两个小demo，稍微简单点：
demo1: 简单的，一般是numeric和text，加上一个date
<!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>handsontable</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="hot"></div>
<script>
var dataObject = [
{
id: 1,
flag: 'EUR',
currencyCode: 'EUR',
currency: 'Euro',
level: 0.9033,
units: 'EUR / USD',
asOf: '08/19/2019',
onedChng: 0.0026
},
{
id: 2,
flag: 'JPY',
currencyCode: 'JPY',
currency: 'Japanese Yen',
level: 124.3870,
units: 'JPY / USD',
asOf: '08/19/2019',
onedChng: 0.0001
},
{
id: 3,
flag: 'GBP',
currencyCode: 'GBP',
currency: 'Pound Sterling',
level: 0.6396,
units: 'GBP / USD',
asOf: '08/19/2019',
onedChng: 0.00
},
{
id: 4,
flag: 'CHF',
currencyCode: 'CHF',
currency: 'Swiss Franc',
level: 0.9775,
units: 'CHF / USD',
asOf: '08/19/2019',
onedChng: 0.0008
}
];
var currencyCodes = ['EUR', 'JPY', 'GBP', 'CHF', 'CAD', 'AUD', 'NZD', 'SEK', 'NOK',
'BRL', 'CNY', 'RUB', 'INR', 'TRY', 'THB', 'IDR', 'MYR', 'MXN', 'ARS', 'DKK', 'ILS', 'PHP'];
var flagRenderer = function (instance, td, row, col, value, cellProperties) {
var currencyCode = value;
while (td.firstChild) {
td.removeChild(td.firstChild);
}
if (currencyCodes.indexOf(currencyCode) > -1) {
var flagElement = document.createElement('DIV');
flagElement.className = 'flag ' + currencyCode.toLowerCase();
td.appendChild(flagElement);
} else {
var textNode = document.createTextNode(value === null ? '' : value);
td.appendChild(textNode);
}
};
var hotElement = document.querySelector('#hot');
var hotElementContainer = hotElement.parentNode;
var hotSettings = {
data: dataObject,
columns: [
{
data: 'id',
type: 'numeric',
width: 40
},
{
data: 'flag',
renderer: flagRenderer
},
{
data: 'currencyCode',
type: 'text'
},
{
data: 'currency',
type: 'text'
},
{
data: 'level',
type: 'numeric',
numericFormat: {
pattern: '0.0000'
}
},
{
data: 'units',
type: 'text'
},
{
data: 'asOf',
type: 'date',
dateFormat: 'MM/DD/YYYY'
},
{
data: 'onedChng',
type: 'numeric',
numericFormat: {
pattern: '0.00%'
}
}
],
stretchH: 'all',
width: 880,
autoWrapRow: true,
height: 487,
maxRows: 22,
manualRowResize: true,
manualColumnResize: true,
rowHeaders: true,
colHeaders: [
'ID',
'Country',
'Code',
'Currency',
'Level',
'Units',
'Date',
'Change'
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: false,
filters: true,
dropdownMenu: false
};
var hot = new Handsontable(hotElement, hotSettings);
</script>
</body>
</html>
demo2: 主要是dropdown的数据类型
<!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>Document</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
</head>
<body>
<div id="example"></div>
<script>
var data = [
{
id: 1,
flag: 'EUR',
currencyCode: 'EUR',
currency: 'Euro',
level: 0.9033,
units: 'EUR / USD',
asOf: '08/19/2019',
onedChng: 0.0026
},
{
id: 2,
flag: 'JPY',
currencyCode: 'JPY',
currency: 'Japanese Yen',
level: 124.3870,
units: 'JPY / USD',
asOf: '08/19/2019',
onedChng: 0.0001
},
{
id: 3,
flag: 'GBP',
currencyCode: 'GBP',
currency: 'Pound Sterling',
level: 0.6396,
units: 'GBP / USD',
date:'08/19/2019',
onedChng: 0.00
},
{
id: 4,
flag: 'CHF',
currencyCode: 'CHF',
currency: 'Swiss Franc',
level: 0.9775,
units: 'CHF / USD',
asOf: '08/19/2019',
onedChng: 0.0008
}
];
var currencyCodes = ['EUR', 'JPY', 'GBP', 'CHF', 'CAD', 'AUD', 'NZD', 'SEK', 'NOK',
'BRL', 'CNY', 'RUB', 'INR', 'TRY', 'THB', 'IDR', 'MYR', 'MXN', 'ARS', 'DKK', 'ILS', 'PHP'];
var flagRenderer = function (instance, td, row, col, value, cellProperties) {
var currencyCode = value;
};
const container = document.getElementById('example');
const hot = new Handsontable(container, {
data: data,
colHeaders: true,
dropdownMenu: true
});
</script>
</body>
</html>
- 我自己在项目中用的主要是autocomplete这个数据类型，并且数据源是通过发送请求获取到的，操作起来也比较简单，但是要注意，这个数据源是数组的形式，最后要转化成数组才能显示出来。
if (type === 'dropdown') {
column.source = ['1','2','3','4'];
} else if (type === 'autocomplete') {
column.width = 300;
column.source = [];
var params = {
key:value
}
$http({method:'GET',url:自己的请求地址,params:params})
.success(function(data,status,headers,config){
column.source = ['请求到的数据，自己处理处理变成数组'];
})
.error()
}
总结：这些是我的简单的使用，还有其他功能没有研究，自身积累。
重要参考：
handsontable官方文档：https://handsontable.com/docs/7.0.2/demo-autocomplete.html
大神博客：https://blog.csdn.net/qianqianyixiao1/article/details/80943906
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献16条内容
所有评论(0)