セルスタイルの設定

セルの外観をカスタマイズするには、 cellStyleFormatter メソッドを使用します。cellStyleFormatter を使用すると、選択したセルのフォントの色やスタイルを、セルの状態に応じて変更できます。

次のサンプルスクリプトでは、選択したセルのフォントスタイルを斜体に変更します。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number", dataType:'number'}, {headerText: "Nationality", dataType:'string'}, {headerText: "Player", dataType:'string'}, {headerText: "Position", dataType:'string'} ], highlightCurrentCell: true, cellStyleFormatter: function(args) { if ((args.row.type & wijmo.grid.rowType.data)) { if (args.state & wijmo.grid.renderState.current) { args.$cell.css("font-style", "italic"); } else { args.$cell.css("font-style", "normal"); } } } }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            $("#wijgrid").wijgrid({
        
                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                allowSorting: true,               
                data: [
                    [27, 'Canada', 'Adams, Craig', 'RW'],
                    [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                    [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                    [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                    [1, 'United States', 'Curry, John', 'G', 'L'],
                ],
                columns: [
                    {headerText: "Number", dataType:'number'},
                    {headerText: "Nationality", dataType:'string'},
                    {headerText: "Player", dataType:'string'},
                    {headerText: "Position", dataType:'string'}     
                ],          
                highlightCurrentCell: true,
            cellStyleFormatter: function(args) {
                if ((args.row.type & wijmo.grid.rowType.data)) {
                    if (args.state & wijmo.grid.renderState.current) {
                        args.$cell.css("font-style", "italic");
                    } else {
                        args.$cell.css("font-style", "normal");
                    }
                }
            }

        });
    });
    });
</script>