本帖最后由 Joestar.Xu 于 2023-8-29 08:51 编辑
通过代码在设计器中增加了表格，表格行有选中功能，表头有全选功能。给表格的第一列设置单元格类型为checkbox，表格内的checkbox可以点击切换选中状态，但是表头的checkbox无法正常切换选中状态。如何才能让表头的checkbox可以正常选择。
<template>
<div id="app">
<gc-spread-sheets-designer
:styleInfo="styleInfo"
:config="config"
:spreadOptions="spreadOptions"
@designerInitialized="designerInitialized"
>
</gc-spread-sheets-designer>
</div>
</template>
<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-resources-zh";
GC.Spread.Common.CultureManager.culture("zh-cn");
import "@grapecity/spread-sheets-designer-resources-cn";
import "./custom.css";
import * as ExcelIO from "@grapecity/spread-excelio";
//Apply License
//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
//ExcelIO.LicenseKey = 'sjs-distribution-key';
//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';
import { Designer } from "@grapecity/spread-sheets-designer-vue";
export default {
name: "App",
data: function() {
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert("Welcome to new designer.");
}
}
};
config.ribbon[0].buttonGroups.unshift({
label: "NewDesigner",
thumbnailClass: "welcome",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["Welcome"]
}
// This is custom button ----------------end-------------
]
}
});
return {
styleInfo: { height: "98vh", width: "100%" },
config: config,
spreadOptions: {
sheetCount: 2
},
designer: null,
spread: null
};
},
methods: {
designerInitialized(value) {
this.designer = value;
this.spread = this.designer.getWorkbook();
this.registerCommand();
this.customContextMenu();
},
registerCommand() {
const myCmd = {
canUndo: true,
name: "myCmd",
execute: (context, options, isUndo) => {
const activeSheet = this.spread.getActiveSheet();
const table = activeSheet.tables.add(
"table1",
2,
2,
6,
6,
GC.Spread.Sheets.Tables.TableThemes.medium2
);
const cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.isThreeState(false);
activeSheet.setCellType(2, 2, cellType);
const tableColumn0 = new GC.Spread.Sheets.Tables.TableColumn(
0,
"check",
"check",
null,
cellType
);
const tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(
1,
"orderDate",
"Order Date",
"yyyy-mm-dd"
);
const tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(
2,
"item",
"Item"
);
const tableColumn3 = new GC.Spread.Sheets.Tables.TableColumn(
3,
"unit",
"units"
);
const tableColumn4 = new GC.Spread.Sheets.Tables.TableColumn(
4,
"cost",
"Cost"
);
const tableColumn5 = new GC.Spread.Sheets.Tables.TableColumn(
5,
"pkid",
"Pkid"
);
table.autoGenerateColumns(false);
table.bind(
[
tableColumn0,
tableColumn1,
tableColumn2,
tableColumn3,
tableColumn4,
tableColumn5
],
"null"
);
table.expandBoundRows(true);
table.filterButtonVisible(false);
}
};
this.spread.commandManager().register("myCmd", myCmd);
},
customContextMenu() {
let oldOpenMenu = this.spread.contextMenu.onOpenMenu;
this.spread.contextMenu.onOpenMenu = function(
menuData,
itemsDataForShown,
hitInfo,
spread
) {
oldOpenMenu.apply(this, arguments);
itemsDataForShown.push({
text: "添加表格",
name: "myCmd",
command: "myCmd",
workArea: "viewport"
});
};
}
}
};
</script>
<style></style>
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图