データグリッド - セルごとのスタイル設定

この例ではセル、行、列のスタイルをCSSを使用して変更する方法をお見せしています。 セルのスタイルをCSSで変更するには、データグリッドオブジェクトの特定のセルに対して、 setCellStyleコマンドを実行します。

    シンタックス: myGrid.setCellStyle(rowNum, colNum, cssName);

この例では、rgbdemo.cssに7つのCSSスタイルが定義されています。これらのスタイルはドロップダウンリストから選択できます。

    .dax_datagrid .style1 {
        background-color: #ffff00;
    }
    .dax_datagrid .style2 {
        background-color: #ffc0cb;
    }
    .dax_datagrid .style3 {
        background-color: #00ff00;
    }
    .dax_datagrid .style4 {
        background-color: #ffa500;
    }
    .dax_datagrid .style5 {
        background-color: #0000ff;
    }
    .dax_datagrid .style6 {
        background-color: #a020f0;
    }
    .dax_datagrid .style7 {
        background-color: #ff0000;
    }

例: セルに適用

"セルに適用"ボタンをクリックすると、setCSStoCell関数が呼ばれます。これはドロップダウンから 選択された値 (CSSスタイル名) を取り出し、現在選択されているセル (行と列番号で決定) に適用します。

    function setCSStoCell (aObj){
        var cssname = aObj.options[aObj.selectedIndex].value;
        myGrid.setCellStyle(parseInt(targetrow.value), parseInt(targetcol.value), cssname);
    }

例: 行に適用

"行に適用"ボタンをクリックすると、setCSStoRow関数が呼ばれます。これはドロップダウンから 選択された値 (CSSスタイル名) を取り出し、ユーザが選択している行のすべてのセルに適用します。

    function setCSStoRow (aObj) {
        var cssname = aObj.options[aObj.selectedIndex].value;
        for(var i=1;i<=7;i++){
            myGrid.setCellStyle(parseInt(targetrow.value), i, cssname);
        }
    }

例: 列に適用

"列に適用"ボタンをクリックすると、setCSStoCol関数が呼ばれます。これはドロップダウンから 選択された値 (CSSスタイル名) を取り出し、ユーザが選択している列のすべてのセルに適用します。

    function setCSStoCol (aObj) {
        var cssname = aObj.options[aObj.selectedIndex].value;
        var rownum = myGrid.getParsedDataRecordCount();
        for(var i=1;i<=rownum;i++){
            myGrid.setCellStyle(i, parseInt(targetcol.value), cssname);
        }
    }