タブにボタンの追加

SpreadJSリボンコンテナでは、リボンにボタンまたはチェックボックスを追加できます。

[データの保存]ボタンの追加

リボンの［ホーム］タブに［データの保存］ボタンを追加するには、次の手段を実行します。

デフォルト構成を取得します。

JavaScript	コードのコピー
// ワークブックとワークシートを構成します。 var spread = new GC.Spread.Sheets.Workbook("ss"); var activeSheet = spread.getActiveSheet(); // デフォルトconfigを取得します。 var config = GC.Spread.Sheets.Designer.DefaultConfig;

JavaScript

コードのコピー

// ワークブックとワークシートを構成します。
var spread = new GC.Spread.Sheets.Workbook("ss");
var activeSheet = spread.getActiveSheet();

// デフォルトconfigを取得します。
var config = GC.Spread.Sheets.Designer.DefaultConfig;

「データの保存」ボタンのレイアウト構造を作成し、「ホーム」リボンの「buttonGroups」フィールドに追加します。

JavaScript	コードのコピー
// 新しいボタンのレイアウト var saveData = { "label": "データの保存", "thumbnailClass": "", "commandGroup": { "children": [ { "direction": "vertical", "commands": [ "cmdSaveData" ] } ] } } // configのリボンタブに新しいボタンを追加します。 config.ribbon[0].buttonGroups.unshift(saveData);

JavaScript

コードのコピー

// 新しいボタンのレイアウト
var saveData = {
    "label": "データの保存",
    "thumbnailClass": "",
    "commandGroup": {
        "children": [
            {
                "direction": "vertical",
                "commands": [
                    "cmdSaveData"
                ]
            }
        ]
    }
}

// configのリボンタブに新しいボタンを追加します。
config.ribbon[0].buttonGroups.unshift(saveData);

プロジェクトで上記のコマンドをcommandMapに設定します。

JavaScript	コードのコピー
// 新しいボタンのコマンドを作成します。 config.commandMap = { cmdSaveData: { title: "サーバーにデータを保存します", text: "保存", iconClass: "cmdSaveData", bigButton: "true", commandName: "cmdSaveData", execute: async (context, propertyName, fontItalicChecked) => { // 演算子をカスタマイズします。 alert('データを正常に保存します。'); } } }

JavaScript

コードのコピー

// 新しいボタンのコマンドを作成します。
config.commandMap = {
    cmdSaveData: {
    title: "サーバーにデータを保存します",
    text: "保存",
    iconClass: "cmdSaveData",
    bigButton: "true",
    commandName: "cmdSaveData",
    execute: async (context, propertyName, fontItalicChecked) => {
    // 演算子をカスタマイズします。
    alert('データを正常に保存します。');
        }
    }
}

「cmdSaveData」ボタンのCSSスタイルを設定します。

HTML	コードのコピー
<!-- 新しいボタンのCSSスタイル設定。 --> <style>.cmdSaveData { background-image: url('./saveData.png'); background-size: 35px 35px; } </style>

カスタマイズ可能な構成のために「config」パラメータを渡すデザイナのインスタンスを初期化します。

JavaScript	コードのコピー
// デザイナのインスタンスを初期化します。 var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);

The below output will be generated:

メモ:config.jsまたはプロジェクトにcommandMapを定義することで、ボタンまたはコマンドのデフォルトの動作をオーバーライドできます。

リボンにチェックボックスの追加

リボンにチェックボックスを追加し、チェックボックスのチェック状態を管理できます。上記の手順1に従って、チェックボックスのラベル名を追加し、「MyCheckbox」コマンドを作成します。また、次のように、プロジェクトで「MyCheckbox」コマンドをcommandMapに設定します。

JavaScript	コードのコピー
config.commandMap = { MyCheckbox: { title: "カスタムのチェックボックス", text: "MyCheckbox", type: 'checkbox', commandName: "MyCheckbox", execute: async (context, propertyName) => { let state = context.getData("myCheckState"); context.setData("myCheckState", !state); }, getState: (context) => { return context.getData("myCheckState"); } } }

JavaScript

コードのコピー

config.commandMap = {
    MyCheckbox: {
            title: "カスタムのチェックボックス",
            text: "MyCheckbox",
            type: 'checkbox',
            commandName: "MyCheckbox",
            execute: async (context, propertyName) => {
            let state = context.getData("myCheckState");
            context.setData("myCheckState", !state);
            },
            getState: (context) => {
                return context.getData("myCheckState");
            }
    }
}

上記の手順4に従うと、以下の出力が生成されます。