如何使用 Jqgrid 进行服务器端验证？

Question

我正在使用 jqgrid 显示站点列表，并且我想在添加或编辑站点时进行一些服务器端验证。 （表单编辑而不是内联。由于各种原因，验证需要在服务器端进行。）

我认为最好的方法是在触发 beforeSubmit 事件时通过 ajax 请求检查数据。然而，这似乎只在我编辑网格中的现有行时才有效 - 当我添加新行时不会调用该函数。

我的 beforeSubmit 放错地方了吗？

感谢您的帮助。

    $("#sites-grid").jqGrid({
        url:'/json/sites',
        datatype: "json",
        mtype: 'GET',         
        colNames:['Code', 'Name', 'Area', 'Cluster', 'Date Live', 'Status', 'Lat', 'Lng'],
        colModel :[ 
          {name:'code', index:'code', width:80, align:'left', editable:true}, 
          {name:'name', index:'name', width:250, align:'left', editrules:{required:true}, editable:true}, 
          {name:'area', index:'area', width:60, align:'left', editable:true}, 
          {name:'cluster_id', index:'cluster_id', width:80, align:'right', editrules:{required:true, integer:true}, editable:true, edittype:"select", editoptions:{value:"<?php echo $cluster_options; ?>"}}, 
          {name:'estimated_live_date', index:'estimated_live_date', width:120, align:'left', editable:true, editrules:{required:true}, edittype:"select", editoptions:{value:"<?php echo $this->month_options; ?>"}}, 
          {name:'status', index:'status', width:80, align:'left', editable:true, edittype:"select", editoptions:{value:"Live:Live;Plan:Plan;"}}, 
          {name:'lat', index:'lat', width:140, align:'right', editrules:{required:true}, editable:true}, 
          {name:'lng', index:'lng', width:140, align:'right', editrules:{required:true}, editable:true}, 
        ],
        height: '300',
        pager: '#pager-sites',
        rowNum:30,
        rowList:[10,30,90],
        sortname: 'cluster_id',
        sortorder: 'desc',
        viewrecords: true,
        multiselect: false,
        caption: 'Sites',
        editurl: '/json/sites'
     });

    $("#sites-grid").jqGrid('navGrid','#pager-sites',{edit:true,add:true,del:true, beforeSubmit : function(postdata, formid) { 
        $.ajax({
            url      : 'json/validate-site/', 
            data     : postdata,
            dataType : 'json',
            type     : 'post',
            success  : function(data) { 
                alert(data.message);
                return[data.result, data.message];
            }
        });
    }});

Answer 1

如果你想使用beforeSubmit事件，你应该在其他地方使用它（见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator）：

$("#sites-grid").jqGrid('navGrid','#pager-sites',{/**/},
    {beforeSubmit : function(postdata, formid) { /**/ }} // edit parameters
    );

我和 Botondus 有同样的看法（见评论），你试图以错误的方式使用 beforeSubmit。收到编辑数据请求（保存修改数据的请求）的服务器不得保存。它可能会导致验证数据并以 HTTP 错误而不是 200 OK 回答。要解码错误响应并准备错误消息，可以使用errorTextFormat 事件（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#events）。