1

次のシナリオを実装しようとしていますが、正しい方法で取得できません。

これは私のシナリオです:

  1. 個人の電子メール、携帯電話番号、Twitter の URL のような 3 つの行があります。メール、電話番号、URL などの別の列のデータ型が必要です。
  2. 次に、電子メール形式や電話形式などの検証を実行する必要がある値を入力する各行を入力します。
  3. [追加] ボタンを押すと、新しい行を作成し、列の名前やデータ型など、各列の情報を尋ねる必要があります。
  4. 各行の値を入力すると、データ型列に基づいて検証する必要があります。
  5. [編集] ボタンを押すと、グリッド全体が編集可能である必要があり、編集イベントのトリガー後に各セルで検証を実行する必要があります。

私のコード:

    $(document).ready(function () {
        //debugger;
        var val;
        var lastsel2;
        jQuery("#list").jqGrid({
            datatype: "local",
            height: 250,
            width: 770,
            colNames: ['Mechanism', 'Data Type', 'Value', 'Active Flag', 'Created'],
            colModel: [
            { name: 'Mechanism', index: 'Mechanism', width: 175, editable: true },
            { name: 'DataType', index: 'Datatype', width: 175, editable: true },
        { name: 'Value', index: 'Value', width: 105, editable: true, editrules: { custom: true, custom_func: validate} },
        {name: 'ActiveFlag', width: 112, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
        { name: 'Created', index: 'Created', width: 124}]
        });
$('#save').live('click', function () {
            var ids = $("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var val = $("#list").jqGrid('getCell', ids[i], 'Value');
                var dataType = $("#list").jqGrid('getCell', ids[i], 'DataType');
                $('#colValue').html(val + dataType);
                var va = $('#colValue').find('input[name=value]').val();
                var daT = $('#colValue').find('input[name=Datatype]').attr('value');

                switch (daT) {
                    case "Phone":
                        if (!$.jgrid.isEmpty(va)) {

                        }
                        else
                            alert("Phone Number Field is required");
                        break;
                    case "Email":
                        if (!$.jgrid.isEmpty(va)) {

                        }
                        else
                            alert("Email Field is required");
                        break;
                    case "URL":
                        if (!$.jgrid.isEmpty(va)) {
                        }
                        else
                            alert("URL Field is required")
                        break;
                    case "":
                        alert("Fields are not null")
                }
            }
        });

        $('input[value=Edit]').click(function () {
            var ids = $('#list').jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                //$('#list').jqGrid('editRow', ids[i]);
                jQuery('#list').jqGrid('editRow', ids[i], true);
            }
        });
        var data = [{ Mechanism: "Mobile Phone", DataType: "Phone" }, { Mechanism: "Personal Email", DataType: "Email" }, { Mechanism: "Facebook URL", DataType: "URL"}];
        for (var i = 0; i <= data.length; i++)
            jQuery("#list").jqGrid('addRowData', i + 1, data[i]);
        val = i;
4

1 に答える 1

0

あなたの質問を理解できれば、これはすべて検証に要約されます。編集機能を追加してから、カスタム検証を呼び出すことができます。

元：

jQuery("#list").navGrid('#pager', {
    add: true,
    addtext: 'Add',
    edit: true,
    edittext: 'Edit',
    del: true,
    deltext: 'Del',
    search: true,
    searchtext: 'Find',
    refresh: true
}, //options
{
    reloadAfterSubmit: true,
    beforeSubmit: validate_edit
}, // edit options
{
    reloadAfterSubmit: true,
    beforeSubmit: validate_add
}, // add options
{}, //del options
{} //search options
);

検証 (ニーズに応じて異なる場合も同じ場合もあります)

function validate_add(posdata, obj) {//validation code}

function validate_edit(posdata, obj) {//validation code}

参照： 追加時と編集時のjqgridの異なる編集ルール

最終的には、検証のためにグリッドと対話しようとして作成した一連のコードを本当にクリーンアップします。

于 2012-12-20T12:50:50.547 に答える