編集の有効化

wijgrid ウィジェットでは、editingMode オプションを「cell」または「row」に設定することで、グリッドの内容を編集できます。デフォルトでは、このオプションは「none」に設定されています。また、 beforeCellEdit イベントを使用すると、特定の列での編集を制限したり、条件付きの編集を有効にしたりできます。

次のサンプルスクリプトでは、第 3 列の editingMode オプションを「cell」に設定し、ユーザーが Quantity 列だけを編集できるように制限します。他の列は編集できません。このオプションは、特定の列を編集できないように制限したい場合に便利です。

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

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ ['Ipsum LLC', 63.57, 209, .11, '12-21-2014'], ['Lorem Inc', 74.85, 73, .19, '09-05-2014'], ['Dolor International', 29.86, 45, .20, '04-16-2014'], ['Blandit Enterprises', 81.68, 28, .25, '05-08-2014'], ['Vivamus Services', 76.30, 67, .12, '01-29-2014'] ], columns: [ { headerText: "Product Name", dataType: 'string' }, { headerText: "Unit Price", dataType: 'currency' }, { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' }, { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' }, { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'dd-MMM-yyyy' } ], editingMode: 'cell', //allow editing of a single cell. beforeCellEdit : function (e, args) { return (args.cell.cellIndex() == 2); //allow editing for the cells in third column only. } }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
                   data: [
        ['Ipsum LLC', 63.57, 209, .11, '12-21-2014'],
        ['Lorem Inc', 74.85, 73, .19, '09-05-2014'],
        ['Dolor International', 29.86, 45, .20, '04-16-2014'],
        ['Blandit Enterprises', 81.68, 28, .25, '05-08-2014'],
        ['Vivamus Services', 76.30, 67, .12, '01-29-2014']
            ],

            columns: [
        { headerText: "Product Name", dataType: 'string' },
        { headerText: "Unit Price", dataType: 'currency' },
        { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' },
        { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' },
        { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'dd-MMM-yyyy' }
            ],                 
            editingMode: 'cell', //allow editing of a single cell.
            beforeCellEdit : function (e, args) {
                return (args.cell.cellIndex() == 2);
                  //allow editing for the cells in third column only.
                
            }
        });
    });
</script>