目前使用的Vue做的項目，就講下 Handsontable 在Vue中的使用吧
Installation
npm install @handsontable/vue handsontable
Basic usage
<template>
<hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table>
</template>
<script>
import { HotTable } from '@handsontable/vue';
export default {
data: function() {
return {
data: [
["", "Ford", "Volvo", "Toyota", "Honda"],
["2016", 10, 11, 12, 13],
["2017", 20, 11, 14, 13],
["2018", 30, 15, 12, 13]
],
};
},
components: {
HotTable
}
}
</script>
<style src="../node_modules/handsontable/dist/handsontable.full.css"></style>
Render Result
到這裏有些小夥伴會說，誒，我這裏沒有獲取到許可證，導致表格下面會有一行提示並且控制檯警告了，那麼我們就生成個 licenseKey 吧，（本文僅作爲技術測試範疇，商業用途請購買正版 https://handsontable.com/pricing）
// Warning!
The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-evaluation'. Read more about it in the documentation or contact us at [email protected].
Generate LicenseKey
<script>
function generateKey() {
function random(min, max) {
let n = max - min + 1
return Math.ceil((Math.random() * n)) - 1 + min
}
function randomString(length) {
let r = ''
for (let i = 0; i < length; i++) {
r += random(0, 15).toString(16)
}
return r
}
function calcFF(x) {
/*
計算所有可能 取一種 概率準 效率高
當 y ∈ [0, 100)
則 (100x + y) % 97 = 1
y % 97 = 97 - 100x % 97 + 1
y % 97 = 98 - 100x % 97
y = a * 97 + (98 - 100x % 97)
∵ y ∈ [0, 100) , 98 - 100x % 97 ∈ [2, 98]
∴ 當 98 - 100x % 97 <= 2 時 a ∈ [0, 1]
當 98 > 98 - 100x % 97 > 2 時 a = 0
當 98 - 100x % 97 = 98 時 a ∈ [-1, 0]
∵ y < 100
∴ 當 98 - 100x % 97 <= 2 的時候 y的最小值爲 98 - 100x % 97
當 98 > 98 - 100x % 97 > 2 的時候 y的最小值也爲 98 - 100x % 97
當 98 - 100x % 97 = 98 的時候 y的最小值爲 1
∴ 當 98 > 98 - 100x % 97 的時候 y的最小值爲 98 - 100x % 97
當 98 = 98 - 100x % 97 的時候 y的最小值爲 1
當 y ∈ [100, 255]
則 (1000x + y) % 97 = 1
y % 97 = 97 - 1000x % 97 + 1
y % 97 = 98 - 1000x % 97
y = a * 97 + (98 - 1000x % 97)
∵ y ∈ [100, 255] , 98 - 1000x % 97 ∈ [2, 98]
∴ 98 - 1000x % 97 < 3 時 a = 2
3 <= 98 - 1000x % 97 <= 61 時 a ∈ [1, 2]
∵ y 的最大值肯定 > 100
∴ 當 98 - 1000x % 97 < 3 時 y 的最大值爲 98 - 1000x % 97 + 97 * 2
當 98 - 1000x % 97 > 61 時 y 的最大值爲 98 - 1000x % 97 + 97 * 1
當 3 <= 98 - 1000x % 97 <= 61 時 y 的最大值爲 98 - 1000x % 97 + 97 * 2
∴ 當 98 - 1000x % 97 <= 61 時 y 的最大值爲 98 - 1000x % 97 + 97 * 2
當 98 - 1000x % 97 > 61 時 y 的最大值爲 98 - 1000x % 97 + 97 * 1
*/
let min, max, ys = [],
y
if (98 - 100 * x % 97 === 98) {
min = 1
} else {
min = 98 - 100 * x % 97
}
if (98 - 1000 * x % 97 > 61) {
max = 98 - 1000 * x % 97 + 97 * 1
} else {
max = 98 - 1000 * x % 97 + 97 * 2
}
let i = 0
do {
ys.push(max - i * 97)
i++
} while (max - i * 97 >= 100)
if (min + 97 < 100) {
ys.push(min + 97)
}
ys.push(min)
y = ys[random(0, ys.length - 1)]
return y.toString(16).padStart(2, '0')
}
function calcFF_2(x) {
/*
//這個方法概率不準 因爲只是簡單的假設y 並沒有由x推導 效率高
若要使 0 <= y < 100
則 (100x + y) % 97 = 1
y % 97 = 97 - 100x % 97 + 1
y % 97 = 98 - 100x % 97
y = a * 97 + (98 - 100x % 97)
∵ y ∈ [0, 100) , 98 - 100x % 97 ∈ [2, 98]
∴ 當 98 - 100x % 97 <= 2 時 a ∈ [0, 1]
當 98 > 98 - 100x % 97 > 2 時 a = 0
當 98 - 100x % 97 = 98 時 a ∈ [-1, 0]
若要使 100 <= y <= 255
則 (1000x + y) % 97 = 1
y % 97 = 97 - 1000x % 97 + 1
y % 97 = 98 - 1000x % 97
y = a * 97 + (98 - 1000x % 97)
∵ y ∈ [100, 255] , 98 - 1000x % 97 ∈ [2, 98]
∴ 98 - 1000x % 97 < 3 時 a = 2
3 <= 98 - 1000x % 97 <= 61 時 a ∈ [1, 2]
*/
let y = 0
if (random(0, 255) < 100) {
let z = 98 - 100 * x % 97
if (z <= 2) {
y = random(0, 1) * 97 + z
} else if (z == 98) {
y = random(-1, 0) * 97 + z
} else {
y = z
}
} else {
let z = 98 - 1000 * x % 97
if (z < 3) {
y = 2 * 97 + z
} else if (z > 61) {
y = 97 + z
} else {
y = random(1, 2) * 97 + z
}
}
return y.toString(16).padStart(2, '0')
}
function calcFF_3(x) {
/*
取所有可能一個個隨機試 效率最差 但是實現最簡單 效率低100倍
*/
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78,
79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103,
104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124,
125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145,
146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166,
167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187,
188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208,
209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229,
230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250,
251, 252, 253, 254, 255
]
let y
do {
let i = random(0, arr.length - 1)
y = arr.splice(i, 1)[0]
} while (((y > 100 ? (1000 * x) : (100 * x)) + y) % 97 !== 1)
return y.toString(16).padStart(2, '0')
}
function build(day = 365) {
//根據驗證需求 day需小於 45000
//隨機生成的 1-6 9-14 17-18 位 除了第二位爲時間因數 其他數字可自定義 成爲用戶信息標識符
for (let i = 0; i < 3; i++) {
if (i === 0) {
//第 1-6 位任意 第二位爲時間校驗碼的因數
v = randomString(6)
//第 1-6 位與第 7-8 位 各自轉成十進制再轉成字符串相連轉整數 需要能被97除餘1
//取 7-8 位
v += calcFF(parseInt(v.substr(0, 6), 16))
} else if (i === 1) {
//第 9-14 位隨機生成
v += randomString(6)
//第 7-14 位與第 15-16 位 各自轉成十進制再轉成字符串相連轉整數 需要能被97除餘1
//取 15-16 位
v += calcFF(parseInt(v.substr(6, 8), 16))
} else {
//第 17-18 位隨機生成
v += randomString(2)
//第 19-23 位時間校驗碼
//當前時間戳的天數 + 有效天數 乘以第2位校驗因數 如果爲0 就乘以9 轉16進制
let n = (parseInt((new Date()) / 8.64e7) + day) * (parseInt(v.substr(1, 1), 16) || 9)
if (n > parseInt('fffff', 16)) {
//如果時間校驗碼超過五位 爲錯誤
//理論上不可能 就算有效期至100年以後因數取最大都不會超過這個數
return ""
}
v += n.toString(16).padStart(5, '0')
//第 15-23 位與第 24-25 位各自轉成十進制再轉成字符串相連轉整數 需要能被97除餘1
//取 24-25 位
v += calcFF(parseInt(v.substr(14, 9), 16))
}
}
let r = []
for (let i = 0; i < 5; i++) {
r.push(v.substr(i * 5, 5))
}
return r.join('-')
}
function _checkKeySchema(v) {
//驗證有效性
let p = 0;
if (v.length !== 25) {
return false;
}
for (let item of [
[0, 6, 6],
[6, 8, 14],
[14, 9, 23]
]) {
if (parseInt(parseInt(v.substr(item[0], item[1]), 16) + String(parseInt(v.substr(item[2], 2), 16)).padStart(
2, '0')) % 97 !== 1) {
return false
}
}
return true
}
function _extractTime(v) {
//獲取有效期時間戳
return parseInt(v.substr(18, 5), 16) / (parseInt(v.substr(1, 1), 16) || 9)
}
function vaild(k) {
//驗證函數
let v = k.replace(/\-/g, '')
let keyGenTime = _extractTime(v)
if (keyGenTime > 45000 || keyGenTime !== parseInt(keyGenTime, 10)) {
return false
}
let releaseTime = Math.floor((new Date()) / 8.64e7)
if (releaseTime > keyGenTime + 1) {
return false
}
return _checkKeySchema(v)
}
return build()
}
for (let i = 0; i < 10; i++) {
console.log('licenseKey-' + (i + 1) + ': ', generateKey())
}
</script>
Demo
<template>
<div>
<hot-table
:data="dataObject"
:columns="columns"
:stretchH="stretchH"
:autoWrapRow="autoWrapRow"
:width="width"
:manualRowResize="manualRowResize"
:manualColumnResize="manualColumnResize"
:rowHeaders="rowHeaders"
:colHeaders="colHeaders"
:manualRowMove="manualRowMove"
:manualColumnMove="manualColumnMove"
:contextMenu="contextMenu"
:filters="filters"
:dropdownMenu="dropdownMenu"
:hiddenRows="hiddenRows"
:licenseKey="licenseKey"
></hot-table>
</div>
</template>
<script>
import { HotTable } from "@handsontable/vue";
export default {
data: function() {
return {
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.387,
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.0
},
{
id: 4,
flag: "CHF",
currencyCode: "CHF",
currency: "Swiss Franc",
level: 0.9775,
units: "CHF / USD",
asOf: "08/19/2019",
onedChng: 0.0008
},
{
id: 5,
flag: "CAD",
currencyCode: "CAD",
currency: "Canadian Dollar",
level: 1.3097,
units: "CAD / USD",
asOf: "08/19/2019",
onedChng: -0.0005
},
{
id: 6,
flag: "AUD",
currencyCode: "AUD",
currency: "Australian Dollar",
level: 1.3589,
units: "AUD / USD",
asOf: "08/19/2019",
onedChng: 0.002
},
{
id: 7,
flag: "NZD",
currencyCode: "NZD",
currency: "New Zealand Dollar",
level: 1.5218,
units: "NZD / USD",
asOf: "08/19/2019",
onedChng: -0.0036
},
{
id: 8,
flag: "SEK",
currencyCode: "SEK",
currency: "Swedish Krona",
level: 8.528,
units: "SEK / USD",
asOf: "08/19/2019",
onedChng: 0.0016
},
{
id: 9,
flag: "NOK",
currencyCode: "NOK",
currency: "Norwegian Krone",
level: 8.2433,
units: "NOK / USD",
asOf: "08/19/2019",
onedChng: 0.0008
},
{
id: 10,
flag: "BRL",
currencyCode: "BRL",
currency: "Brazilian Real",
level: 3.4806,
units: "BRL / USD",
asOf: "08/19/2019",
onedChng: -0.0009
},
{
id: 11,
flag: "CNY",
currencyCode: "CNY",
currency: "Chinese Yuan",
level: 6.3961,
units: "CNY / USD",
asOf: "08/19/2019",
onedChng: 0.0004
},
{
id: 12,
flag: "RUB",
currencyCode: "RUB",
currency: "Russian Rouble",
level: 65.598,
units: "RUB / USD",
asOf: "08/19/2019",
onedChng: 0.0059
},
{
id: 13,
flag: "INR",
currencyCode: "INR",
currency: "Indian Rupee",
level: 65.3724,
units: "INR / USD",
asOf: "08/19/2019",
onedChng: 0.0026
},
{
id: 14,
flag: "TRY",
currencyCode: "TRY",
currency: "New Turkish Lira",
level: 2.8689,
units: "TRY / USD",
asOf: "08/19/2019",
onedChng: 0.0092
},
{
id: 15,
flag: "THB",
currencyCode: "THB",
currency: "Thai Baht",
level: 35.5029,
units: "THB / USD",
asOf: "08/19/2019",
onedChng: 0.0044
},
{
id: 16,
flag: "IDR",
currencyCode: "IDR",
currency: "Indonesian Rupiah",
level: 13.83,
units: "IDR / USD",
asOf: "08/19/2019",
onedChng: -0.0009
},
{
id: 17,
flag: "MYR",
currencyCode: "MYR",
currency: "Malaysian Ringgit",
level: 4.0949,
units: "MYR / USD",
asOf: "08/19/2019",
onedChng: 0.001
},
{
id: 18,
flag: "MXN",
currencyCode: "MXN",
currency: "Mexican New Peso",
level: 16.4309,
units: "MXN / USD",
asOf: "08/19/2019",
onedChng: 0.0017
},
{
id: 19,
flag: "ARS",
currencyCode: "ARS",
currency: "Argentinian Peso",
level: 9.2534,
units: "ARS / USD",
asOf: "08/19/2019",
onedChng: 0.0011
},
{
id: 20,
flag: "DKK",
currencyCode: "DKK",
currency: "Danish Krone",
level: 6.7417,
units: "DKK / USD",
asOf: "08/19/2019",
onedChng: 0.0025
},
{
id: 21,
flag: "ILS",
currencyCode: "ILS",
currency: "Israeli New Sheqel",
level: 3.8262,
units: "ILS / USD",
asOf: "08/19/2019",
onedChng: 0.0084
},
{
id: 22,
flag: "PHP",
currencyCode: "PHP",
currency: "Philippine Peso",
level: 46.3108,
units: "PHP / USD",
asOf: "08/19/2019",
onedChng: 0.0012
}
],
currencyCodes: [
"EUR",
"JPY",
"GBP",
"CHF",
"CAD",
"AUD",
"NZD",
"SEK",
"NOK",
"BRL",
"CNY",
"RUB",
"INR",
"TRY",
"THB",
"IDR",
"MYR",
"MXN",
"ARS",
"DKK",
"ILS",
"PHP"
],
columns: [
{
data: "id",
type: "numeric",
width: 40
},
{
data: "flag",
renderer: this.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: 1366,
autoWrapRow: true,
height: 800,
manualRowResize: true,
manualColumnResize: true,
rowHeaders: true,
colHeaders: [
"ID",
"Country",
"Code",
"Currency",
"Level",
"Units",
"Date",
"Change"
],
manualRowMove: true,
manualColumnMove: true,
contextMenu: true,
filters: true,
dropdownMenu: true,
hiddenRows: {
},
licenseKey: "4d522-5237a-55f42-6653a-d1494"
};
},
components: {
HotTable
},
methods: {
flagRenderer(instance, td, row, col, prop, value, cellProperties) {
var currencyCode = value;
while (td.firstChild) {
td.removeChild(td.firstChild);
}
if (this.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);
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../../node_modules/handsontable/dist/handsontable.full.css";
</style>
Demo Render Result
文章引用
Handsontable官方網站
handsontable 授權碼生成 帶備註