改行の追加

wijgrid ウィジェットでは、編集可能なモードのセルにおいて、テキストの自動折り返しが設定されている場合に、セル内に改行を追加できます。これには、セルが編集可能なモードに切り替わった時点で、セル内にテキスト領域を追加します。

次のサンプルスクリプトでは、beforeCellEdit および afterCellEdit イベントを使用して、column0 のセル内にテキスト領域を追加します。

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

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ { Column1: '1', Column2: 'John', Column3: 'US' }, { Column1: '2', Column2: 'Tom', Column3: 'Japan' }, { Column1: '3', Column2: 'Henry', Column3: 'China' } ], columns: [ { dataKey: 'Column1', headerText: 'Allow Line Break' }, { dataKey: 'Column2', headerText: 'Name' }, { dataKey: 'Column3', headerText: 'Country' } ], selectionMode: 'singleCell', editingMode: 'cell', beforeCellEdit: function (e, args) { switch (args.cell.cellIndex()) { case 0: //add text area to the cell $('<textarea />') .width('100%') .val(args.cell.value().replace(/<br>/g, '\n')) .appendTo(args.cell.container().empty()) .focus(); args.handled = true; break; } }, afterCellEdit: function (e, args) { switch (args.cell.cellIndex()) { case 0: // replace the new line character args.cell.value(args.cell.value().replace(/\n/g, '<br>')); args.cell.container().find('input').wijcombobox('destroy'); break; } } }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
            data: [
                { Column1: '1', Column2: 'John', Column3: 'US' },
                { Column1: '2', Column2: 'Tom', Column3: 'Japan' },
                { Column1: '3', Column2: 'Henry', Column3: 'China' }
            ],
            columns: [
                { dataKey: 'Column1', headerText: 'Allow Line Break' },
                { dataKey: 'Column2', headerText: 'Name' },
                { dataKey: 'Column3', headerText: 'Country' }
            ],
            selectionMode: 'singleCell',
            editingMode: 'cell',
            beforeCellEdit: function (e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        //add text area to the cell
                        $('<textarea />')
                            .width('100%')
                            .val(args.cell.value().replace(/<br>/g, '\n'))
                            .appendTo(args.cell.container().empty())
                            .focus();
                        args.handled = true;
                        break;
                }
            },
            afterCellEdit: function (e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        // replace the new line character
                        args.cell.value(args.cell.value().replace(/\n/g, '<br>'));
                        args.cell.container().find('input').wijcombobox('destroy');
                        break;
                }
            }
        });
    });
</script>