行番号の表示

cellFormatter オプションを使用すると、wijgrid 内の行番号を表示できます。次のサンプルスクリプトでは、showRowHeader オプションを true に設定し、dataRowIndex の値を 5 に、allowSorting オプションを true に設定します。cellFormatter 関数により、非連結の列内に、# 記号に続けて行番号が表示されます。

この関数は、allowVirtualScrolling オプションが true に設定されている場合には、レンダリングが部分的に行われるため、正しく動作しません。

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, showRowHeader: true, dataRowIndex : 5, 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: "#", cellFormatter: function(args) { if (args.row.type & wijmo.grid.rowType.data) { args.$container.html("#" + args.row.dataItemIndex); return true; } } }, {headerText: "Number",dataType:'number'}, {headerText: " Country",dataType:'string'}, {headerText: "Player", dataType:'string'}, {headerText: " Position", dataType:'string'} ] }); }); }) </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            $("#wijgrid").wijgrid({
                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                showRowHeader: true,
                dataRowIndex : 5,
                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: "#",
                         cellFormatter: function(args) {
                          if (args.row.type & wijmo.grid.rowType.data) {
                              args.$container.html("#" + args.row.dataItemIndex);
                              return true;
                                 }
                             }
                         },
                        {headerText: "Number",dataType:'number'}, 
                        {headerText: " Country",dataType:'string'},
                        {headerText:  "Player", dataType:'string'},
                        {headerText: " Position", dataType:'string'}
                        ]
                    });
                 });
             })
</script>