データ検証

wijgrid ウィジェットでは、 beforeCellUpdate イベントを使用することでデータを検証できます。レコードを追加または更新する時点で、セルに入力されたデータを検証し、入力値が無効であればエラーメッセージをポップアップ表示できます。

次のサンプルスクリプトでは、editingMode をセルに、selectionMode を単一セルに設定します。グリッドの列内では、データを編集および更新できます。データ検証には switch case 文を使用します。ここでは、User_ID 列に検証関数を適用して、数値以外の値が入力された場合には javascript エラーをスローします。

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

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ { User_ID: '1', Name: 'John', Country: 'Japan' }, { User_ID: '2', Name: 'Tom', Country: 'US' }, { User_ID: '3', Name: 'Henry', Country: 'China' }, { User_ID: '4', Name: 'Lucy', Country: 'UK' }, { User_ID: '5', Name: 'Kim', Country: 'US' }, ], selectionMode: 'singleCell', editingMode: 'cell', //validate data beforeCellUpdate : function (e, args) { switch (args.cell.cellIndex()) { case 0: var editor = args.cell.container().find('input'); if (isNaN(editor[0].value)) { alert('Kindly enter a numeric value'); return false; } break; } } }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
            data: [
                { User_ID: '1', Name: 'John', Country: 'Japan' },
                { User_ID: '2', Name: 'Tom', Country: 'US' },
                { User_ID: '3', Name: 'Henry', Country: 'China' },
                { User_ID: '4', Name: 'Lucy', Country: 'UK' },
                { User_ID: '5', Name: 'Kim', Country: 'US' },
               
            ],
           
            selectionMode: 'singleCell',
            editingMode: 'cell',
            //validate data
            beforeCellUpdate : function (e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        var editor = args.cell.container().find('input');
                        if (isNaN(editor[0].value)) {
                            alert('Kindly enter a numeric value');
                            return false;
                        }
                        break;
                }
            }
        });
    });
</script>