igSpreadsheet での条件付き書式

目的

このトピックは、igSpreadsheet コントロールで Worksheet に条件付き書式を構成して設定する方法を説明します。

前提条件

このトピックを理解するために Infragistics JavaScript Excel Library の概念とトピックが前提条件です。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 条件付き書式の構成の概要
• 条件付き書式の構成の概要表
• コード例
• 関連コンテンツ

条件付き書式の構成の概要

特定のワークシートの条件付き書式を構成するには、ワークシートの ConditionalFormats コレクションに公開される Add メソッドを使用できます。この Add メソッドの最初のパラメーターは条件付き書式に適用するワークシートの文字列領域です。

Worksheet に追加可能な条件付き書式にその条件が true の場合にワークシート セル要素の外観を決定する CellFormat メソッドがあります。たとえば、Fill および Font などのこの CellFormat メソッドにアタッチされるメソッドを使用してセルの背景およびフォント設定を決定できます。

条件付き書式が作成され、セルの書式設定が適用される場合、ワークシート セルにサポートされるプロパティのサブセットがあります。 現在サポートされる CellFormat メソッドのプロパティは Fill、Border プロパティ、FormatString、および Strikethrough、Underline、Italic、Bold、Color などの Font プロパティです。以下のコード スニペットに複数のプロパティが設定されます。

ワークシート セルの可視化の動作が異なるため、CellFormat メソッドがない条件付き書式もあります。この条件付き書式は DataBarConditionalFormat、ColorScaleConditionalFormat、および IconSetConditionalFormat です。

既存の Workbook を Excel から読み込む場合、Workbook が igSpreadsheet に読み込まれる際に書式設定は保持されます。Workbook を Excel ファイルに保存する場合にも保持されます。

条件付き書式の構成の概要表

以下の表は、ワークシートでサポートされる条件付き書式を説明し、その要素の ConditionalFormats コレクションに追加するメソッドにマップします。

コード例

以下は上記の条件付き書式を igSpreadsheet コントロールで使用するコード例です。

HTML の場合:

$(function () {

        var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
        var sheet = workbook.worksheets().add('Sheet1');

        var duplicateCondition = sheet.conditionalFormats().addDuplicateCondition("A2:A15");
        duplicateCondition.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo("red"));                               
        var blanksCondition = sheet.conditionalFormats().addBlanksCondition("B2:B15");
        blanksCondition.cellFormat().fill($.ig.excel.CellFill.createSolidFill("gray"));

        var textCondition = sheet.conditionalFormats().addTextCondition("C2:C15", "Bev");
        textCondition.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo("blue"));                                 
        var uniqueCondition = sheet.conditionalFormats().addUniqueCondition("D2:D15");      
        uniqueCondition.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo("orange"));

        var notBlankCondition = sheet.conditionalFormats().addNoBlanksCondition("E2:E15");
        notBlankCondition.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo("green"));

        sheet.conditionalFormats().addDataBarCondition("F2:F15");

        var avgCondition = sheet.conditionalFormats().addAverageCondition("G2:G15");
        avgCondition.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo("red"));

        $("#spreadsheet").igSpreadsheet({
            height: "100%",
            width: "100%",
            workbook: workbook
        });          
    });

ワークシート要素にサンプル データを読み込むと結果は以下のような igSpreadsheet になります。

関連コンテンツ

• igSpreadsheet の概要
• igSpreadsheet API