You can get the row action options using the tableSheet.rowActionOptions()
method.
You can customize it using tableSheet.rowActionOptions(rowActionOptions), where rowActionOptions includes the following:
Operation
Type
Description
name
string
The name of the option
icons
(string | GC.Spread.Sheets.ButtonImageType)[]
An icon that indicates the different statuses
iconSelector
(item: any, index: number) => number | boolean
Select a icon according to different status
tooltip
string
the tooltip for the row action
command
string
the name of the command when clicking the row action
shortcutKey
GC.Spread.Sheets.TableSheet.IShortcutKey
the shortcut key of the command for the row action
Adding a row action for having a comment can be done with the following code:
Adding a row action for showing a comment can be done as follows:
Specify a command to the default first row action as follows:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="init">
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-vue";
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var ShowComment = "ShowComment";
var CheckRow = "CheckRow";
const spreadRef = ref(null);
const tablesheetRef = ref(null);
const checkMapRef = ref({});
function init(spread) {
//register self-defined row action command
registerCommands();
initSpread(spread);
}
function initSpread(spread) {
spreadRef.value = spread;
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
},
update: {
url: apiUrl,
method: 'PUT'
},
create: {
url: apiUrl
},
delete: {
url: apiUrl
}
},
autoSync: true
});
//init a table sheet
var sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet);
tablesheetRef.value = sheet;
var options = sheet.rowActionOptions();
// Specify a command to the default first row action
var defaultFirstRowAction = options[0];
defaultFirstRowAction.command = GC.Spread.Sheets.TableSheet.BuiltInRowActions.pinRow.command;
//add a action of check/uncheck
options.push({
name: 'check',
icons: ["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K", "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg=="],
tooltip: "Check/Uncheck",
iconSelector: function (item) {
return !!checkMapRef.value[item.Id];
},
command: CheckRow
});
//show the comment flag if the data has a comment
options.push({
name: 'comment',
icons: ["./image/comment.png"],
tooltip: "Show the comment",
iconSelector: function (item) {
return item.Notes ? item.Notes.length > 0 : false;
},
shortcutKey: { key: 65 /* A */, ctrl: true, alt: true },
command: ShowComment
});
//show the attachment flag if the data has a attachment
options.push({
name: 'attachment',
icons: ["./image/attachment.png"],
tooltip: "Attachment",
iconSelector: function (item) {
return item.PhotoPath ? item.PhotoPath.length > 0 : false;
}
});
sheet.rowActionOptions(options);
//bind a view to the table sheet
myTable.fetch().then(function () {
var view = myTable.addView("myView", [
{ value: "Id", width: 50, caption: "ID" },
{ value: "FirstName", width: 100, caption: "First Name" },
{ value: "LastName", width: 100, caption: "Last Name" },
{ value: "HomePhone", width: 150, caption: "Phone" },
{ value: "PhotoPath", width: 150, caption: "Attachment" },
{ value: "Notes", width: 400, caption: "Comments" },
]);
sheet.setDataView(view);
});
spread.resumePaint();
}
function registerCommands() {
var _this = this;
var Commands = GC.Spread.Sheets.Commands;
Commands[ShowComment] = {
canUndo: false,
execute: function (context, options) {
alert(options.item.Notes);
return true;
}
};
Commands[CheckRow] = {
canUndo: false,
execute: function (context, options) {
var id = options.item.Id;
checkMapRef.value[id] = !checkMapRef.value[id];
return true;
}
};
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
</script>
<style scoped>
#app {
height: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
