前言
jExcel gitub地址
本文包含Jexcel右键菜单自定义、变更\行列插入与删除、单元格合并与分解等的使用与基本说明。
1. 安装使用如果的两种方式：
- 安装：
npm install jspreadsheet-ce
- 引用CDN资源
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
2. 实例化及配置
模板语法：
<template>
<div>
<div id="app" ref="spreadsheet"></div>
</div>
</template>
导入：
import jexcel from 'jexcel'
import 'jexcel/dist/jexcel.css'
表格实例化与配置说明：
import {
defineComponent,
ref,
onMounted,
} from "vue";
export default defineComponent({
name: "jexcel",
setup() {
let currentCell = "", // A1 当前选中单元格名称
colspan = 0, // A1 当前选中单元格的列合并
rowspan = 0; // A1 当前选中单元格的行合并
const table = ref(null),
// 选中时间
selectionActive = (instance, x1, y1, x2, y2, origin) => {
currentCell = jexcel.getColumnNameFromId([x1, y1]);
colspan = x2 - x1 + 1;
rowspan = y2 - y1 + 1;
},
// 表格更新
updateTable = (el, cell, x, y, source, value, id) => {
cell.classList.add("readonly");
cell.classList.remove("highlight-top");
cell.style = "color:black;text-align: center;cursor: pointer;z-index:2;font-weight: 600;";
}
},
changed = (instance, cell, x, y, value) => {
// y: 行数，x: 列数 cell：单元格本身的DOM对象
// let body = document.getElementsByClassName("draggable")[0];
// console.log(body.innerHTML);
},
data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777']
],
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' } // 颜色
]
;
options = ref({
data: data,
lazyLoading: true, // 懒加载
minDimensions: [20,50000], // 最小[列,行]数
tableOverflow: true, // 表格超过滚动
// tableWidth: "600px", // 表格宽度
// defaultColWidth: 100, // 默认列宽
allowToolbar: false, // 控制是否使用工具栏
filters: true, // 是否使用列过滤
/********** 事件函数 ***********/
oninsertrow: function(instance){
}, // 行插入触发函数
oninsertcolumn: function(instance){
}, // 列插入触发函数
ondeleterow: function(instance){
}, // 行删除触发函数
ondeletecolumn: function(instance){
}, // 列删除触发函数
onselection: selectionActive, // 单元格选中
onchange: changed, // 单元格内容变化
beforeChange: function(instance, cell, x, y, value) {
var cellName = jexcel.getColumnNameFromId([x,y]); // 内容即将被修改的表格
),
updateTable: updateTable, // 表格内容更新
allowComments: true,
oncomments: function() {
console.log("====", arguments);
},
mergeCells: props.mergeCells,
/******** 单元格右键菜单 ****/
contextMenu: function(obj, x, y, e) {
var items = [];
console.log(obj.options);
console.log(obj.records);
// Sections that affect the selection
// 点击列头部x：null, 点击左侧侧边栏 y:null
if (x !== null && y !== null) {
if (!readOnlyEnable) {
// Cut
items.push({
title: T("Cut"),
icon: "content_cut",
shortcut: "Ctrl + X",
onclick: function() {
obj.cut();
},
});
// Copy
items.push({
title: "复制",
icon: "content_copy",
shortcut: "Ctrl + C",
onclick: function() {
obj.copy();
},
});
// Paste
if (
navigator &&
navigator.clipboard &&
navigator.clipboard.readText
) {
items.push({
title: "粘贴",
icon: "content_paste",
shortcut: "Ctrl + V",
onclick: function() {
if (obj.selectedCell) {
navigator.clipboard.readText().then(function(text) {
if (text) {
obj.paste(
obj.selectedCell[0],
obj.selectedCell[1],
text
);
}
});
}
},
});
}
items.push({
type: "line" });
// Insert new row
if (obj.options.allowInsertRow == true) {
items.push({
title: "在当前行前插入行",
onclick: function() {
obj.insertRow(1, parseInt(y), 1);
},
});
items.push({
title: "在当前行后插入行",
onclick: function() {
obj.insertRow(1, parseInt(y));
},
});
}
if (obj.options.allowDeleteRow == true) {
items.push({
title: "删除选中行",
onclick: function() {
obj.deleteRow(
obj.getSelectedRows().length ? undefined : parseInt(y)
);
},
});
}
items.push({
type: "line" });
// Insert a new column
if (addColEnable) {
if (obj.options.allowInsertColumn == true) {
items.push({
title: "在此列前插入列",
onclick: function() {
obj.insertColumn(1, parseInt(x), 1);
},
});
}
if (obj.options.allowInsertColumn == true) {
items.push({
title: "在此列后插入列",
onclick: function() {
obj.insertColumn(1, parseInt(x), 0);
},
});
}
// Delete a column
if (obj.options.allowDeleteColumn == true) {
items.push({
title: "删除选中列",
onclick: function() {
obj.deleteColumn(
obj.getSelectedColumns().length
? undefined
: parseInt(x)
);
},
});
}
items.push({
type: "line" });
}
items.push({
title: "合并",
onclick: function() {
obj.setMerge(currentCell, colspan, rowspan);
},
});
items.push({
title: "分解",
onclick: function() {
obj.removeMerge(currentCell);
},
});
if (obj.options.allowComments == true) {
items.push({
type: "line" });
var title = obj.getComments(currentCell) || "";
items.push({
title: title ? "Edit comments" : "Add comments",
icon: "notes",
onclick: function() {
// var cell = jexcel.getColumnNameFromId(x, y);
var comment = prompt("Comments", title);
alert(x);
alert(y);
// alert(cell)
if (comment) {
obj.setComments(currentCell, comment);
}
},
});
if (title) {
items.push({
title: "Clear comments",
onclick: function() {
// var currentCell =jexcel.getColumnNameFromId(x, y);
obj.setComments(currentCell, "");
},
});
}
}
// Line
items.push({
type: "line" });
}
}
// Save
if (obj.options.allowExport) {
items.push({
title: "Save as",
icon: "save",
shortcut: "Ctrl + S",
onclick: function() {
obj.download();
},
});
}
return items;
},
// 自定义 表格上方工具栏，未配置显示默认工具栏
toolbar: [],
});
let spreadsheet = ref(null);
onMounted(() => {
spreadsheet = jexcel(table.value, options.value);
});
return {
tbody,
spreadsheet,
table,
options,
};
},
});
效果
