Jqgrid使用afterSubmit事件来获取新添加记录的ID

时间:2012-04-09 16:57:11

标签: javascript jquery jqgrid

我使用以下代码添加新记录。

jQuery("#list").jqGrid('editGridRow',"new",{height:545, width:425,recreateForm:true,reloadAfterSubmit:false,addedrow:'first',closeAfterAdd:true,top:110,left:350,modal:true});

我正在使用reloadAfterSubmit:false,这意味着当新记录添加到网格时,我所拥有的ID字段为空白。

有人可以解释如何获取新记录的ID并将其放入网格中的ID字段。

我找到了之前的答案here,这似乎是我正在寻找的但我无法理解如何让它发挥作用。文档说afterSubmit: function (response,postdata) {return [true, '', new_id];},但我没有如何实现它。

我很新,所以我需要把它放得非常简单。

感谢您的帮助。

更新: 服务器响应:         response.responseText

(!)注意:未定义的偏移量:在 32 的D:\ wamp \ www \ EstimateTracker \ UpdateEstimates.php中为1 调用堆栈 #TimeMemoryFunctionLocation 10.0036402872 {main}().. \ UpdateEstimates.php 0
(!)注意:未定义的偏移量:在 32 的D:\ wamp \ www \ EstimateTracker \ UpdateEstimates.php中为2 调用堆栈 #TimeMemoryFunctionLocation 10.0036402872 {main}().. \ UpdateEstimates.php 0 串

更新2:

$(function () {
    $("#list").jqGrid({
        url:'GetEstimates.php',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['ID','Campaign Name','ClientsID','Client Name','Buyer Name','Client Ref','Description','Sales','Estimator', 'Date Received', 'Date Required','Status','Product Type','Date Submitted','Price (&pound)', 'Keren No.','Reason Lost','Won Price (&pound)','Notes'],
        colModel :[ {name:'ID', key:true,index:'ID', width:45,align:'center',editable:true,editoptions:{readonly:true,size:10, height:5}, {name:'CampaignName', index:'CampaignName', width:175, align:'left',editrules:{required:true},editable:true,editoptions:{size:35}}, {name:'ClientsID', index:'ClientsID', width:120, align:'left',editable:true,hidden:true}, {name:'ClientName', index:'ClientName', width:120, align:'left',editrules: required:true,custom_func:notEmpty,custom:true},editable:true,edittype:'select', editoptions:{dataUrl:'ClientDropDownGrid.php',dataInit: function () {
        var thisval = $("#ClientsID").val();
        $.get('GetBuyersGrid.php?id='+thisval, function(data) {
            var res = $(data).html();
            $("select#BuyerName").html(res);
        }); // end get
    }//end func
    ,dataEvents:[{type:'change',fn: function(e) {
        var thisval = $(e.target).val();
        $.get('GetBuyersGrid.php?id='+thisval, function(data){
            var res = $(data).html();
            $("select#BuyerName").html(res);
        }); // end get
    }//end func
    } // end type
    ] // dataevents
    }}, 
    {name:'BuyerName', index:'BuyerName', width:100, align:'left',editable:true,edittype:'select',editoptions:{dataUrl:'BuyerDropDownGrid.php'}},
    {name:'ClientEstimateRef', index:'ClientEstimateRef', width:125, align:'left', align:'left',editable:true,editoptions:{size:25}},
    {name:'Description', index:'Description', width:125, align:'left', align:'left',editable:true,editoptions:{size:25}},
    {name:'SalesName', index:'SalesName', width:100, align:'left',editrules:{required:true,custom_func:notEmpty,custom:true},editable: true,edittype:'select',editoptions:{dataUrl:'SalesDropDownGrid.php'},formoptions:{elmsuffix: '<a id="AddSales" href="AddSales.php">Add Sales</a>' }},
    {name:'EstimatorName', index:'EstimatorName', width:100, align:'left',editrules:{required:true,custom_func:notEmpty,custom:true},editable: true,edittype:'select',editoptions:{dataUrl:'EstimatorDropDownGrid.php'} },
    {name:'DateReceived', index:'DateReceived', width:80, align:'center',editrules:{required:true,custom_func:isValidDateRec,custom:true},editable:true,editoptions: {size: 15, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: 'dd/mm/yy'}) } }}, 
    {name:'DateRequired', index:'DateRequired', width:80, align:'center',editrules:{required:true},editable:true,editoptions: {size: 15, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: 'dd/mm/yy'}) } }}, 
    {name:'Status', index:'Status', width:100, align:'left',editable: true,edittype:'select',editoptions:{dataUrl:'StatusDropDownGrid.php', defaultValue:'4'} },
    {name:'ProductType', index:'ProductType', width:100, align:'left',editrules:{required:true,custom_func:notEmpty,custom:true},editable: true,edittype:'select',editoptions:{dataUrl:'ProductTypeDropDownGrid.php'} },
    {name:'DateSubmitted', index:'DateSubmitted', width:80, hidden:false, align:'center',editable:true,editoptions: {size: 15, maxlength: 10,dataInit: function(element) {$(element).datepicker({dateFormat: 'dd/mm/yy'}) } }},
    {name:'Price', index:'Price', width:60, align:'right',editrules:{required:true,custom_func:isCurrency,custom:true},editable:true, formatter:currencyFmatter, unformat:unformatCurrency,editoptions:{size:15,defaultValue:'0.00'}, formoptions:{elmsuffix: 'GBP'}},
    {name:'KerenNo', index:'KerenNo', width:80, align:'left',editable:true,editoptions:{size:20}},
    {name:'ReasonLost', index:'ReasonLost', width:120, align:'left',editable: true,edittype:'select',editoptions:{dataUrl:'ReasonLostDropDownGrid.php'} },
    {name:'WonPrice', index:'WonPrice', width:60, align:'right',editrules:{required:true,custom_func:isCurrency,custom:true},editable:true, formatter:currencyFmatter, unformat:unformatCurrency, editoptions:{size:15,defaultValue:'0.00'}, formoptions:{elmsuffix:'GBP'}},
    {name:'Notes', index:'Notes', width:125, align:'left', align:'left',editable:true,edittype:'textarea',editoptions:{dataInit: function(elem){$(elem).width(200); $(elem).height(45);}}}
    //{name:'total', index:'total', width:80, align:'right'}, 
    //{name:'note', index:'note', width:150, sortable:false} 
    ],
        pager: '#pager',
        rowNum:20,
        rowList:[10,20,30],
        sortname: 'ID',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        caption: 'Estimates',
        width:880,
        height:400,
        multiselect:true,
        editurl:'UpdateEstimates.php',
        shrinkToFit:false
    });
    //edit row
    $("#editButton").click(function(){
        var gr = jQuery("#list").jqGrid('getGridParam','selrow');    
        if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr,{height:545, width:425,recreateForm:true,reloadAfterSubmit:false,closeAfterEdit:true,top:110,left:350,viewPagerButtons:false,modal:true,beforeShowForm: function(form) { $('#tr_DateSubmitted', form).show();}});
        else alert("Please Select Row");
    });

    //add row
    $("#addButton").click(function(){
        //var gr = jQuery("#list").jqGrid('getGridParam','selrow');
        jQuery("#list").jqGrid('editGridRow',"new",{height:545, width:425,recreateForm:true,reloadAfterSubmit:false,afterSubmit: function(response){return [true,'','45765'];},addedrow:'first',closeAfterAdd:true,top:110,left:350,modal:true});
    });

});

2 个答案:

答案 0 :(得分:1)

The answer不包含您包含的代码。它只是描述afterSubmit应该以某种方式从服务器响应获取新添加的行的ID ,然后返回[true, '', new_id],其中new_id是id新行。

在最简单的形式中,您可以在服务器响应的正文中返回新添加的行的id。所以id的值可能在response.responseText。如果你应该使用

afterSubmit: function (response) {
    return [true, '', response.responseText];
}

答案 1 :(得分:0)

您可以尝试使用此新记录功能:

jQuery("#list").jqGrid('editGridRow',"new",{
    height:545,
    width:425,
    recreateForm:true, 
    addedrow:'first',
    closeAfterAdd:true,
    top:110, 
    left:350,
    modal:true,
    afterComplete: function(response, postdata, formid) {
        //force update of row data @ row 0 and column = ID, change the name of ID if your column name is different.  
        //We are using row 0 because we are assuming your new data is not in the first row
        $('#list').jqGrid('setCell', 0, 'ID','','','',true);
    }
});

这应该在您提交后重新加载网格,如果您的提交成功并且您的更改已保存到您的数据源,那么当网格重新加载时,它将填充新保存的数据,包括新ID。

要将新ID显示为第一条记录,您需要在网格中设置sortname: 'ID'选项以及sortorder: 'desc'。然后,当您重新加载网格时,最高ID将首先显示。

**编辑**

看起来您可以使用setCell方法,并将forceup属性设置为true。看看这里: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods