列幅の設定

width オプションを使用すると、個々の列幅を整数値として、またはパーセンテージとして設定できます。

列幅をコードから設定するには

Wijgrid ウィジェットでは、個々の列幅を整数値またはパーセンテージとして設定できます。

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

スクリプト	コードのコピー
<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', width: "40%"}, //sets the width of the first column in percentage. {headerText: "Nationality", 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());
            },
            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', width: "40%"}, //sets the width of the first column in percentage.
                {headerText: "Nationality", dataType:'string'},
                {headerText: "Player", dataType:'string'},
                {headerText: "Position", dataType:'string'},
      
            ]
        });
    });
    });
</script>

列幅を実行時に設定するには

Wijgrid ウィジェットでは、allowColMoving オプションを true に設定することで、実行時に列幅を変更できます。

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

スクリプト	コードのコピー
<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, allowColSizing: true,// allows user to change the column width 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'}, ] }); }); }); </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,                  
            allowColSizing: true,// allows user to change the column  width          
            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'},     
                    ]
        });
    });
    });
</script>