JQgrid，在另一個單元格的更改事件中設置單元格值爲空

Question

我有一個包含三列的jQGrid。第一個是下拉式（type：select）字段，第二個是複選框列表的自定義類型，第三個是文本字段。要求是當用戶更改下拉字段（DocGroupname）的值時，DocList字段應爲空。因此，當用戶更改DocGroupName列的值時，我們需要將DocList列的值設置爲空。

我試着像下面這樣。在更改下拉列表值時，稱爲名爲myfunction的函數。在函數中，我爲DocList列設置的值爲null。但它不工作，所以我做錯了什麼？並請任何人幫我找到解決方案。

jqGrid的代碼，

function ReqKYCGrid() 
{ 

$("#divmsgg").show(); 

       var DocGroupName = $.ajax 
       ({ 
        type: 'GET', 
        async: false, 
        url: RootUrl + "EXEntityTypeKYC/GetDocumentGroupList", 
        cache: true, 
        contentType: 'application/json; charset=utf-8', 
        data: { "projectSeq":$("#Id").val(),"StartDate":$("#StartDate").val(),"EndDate":$("#EndDate").val() }, 
        success: function (result) { 
         if (!result) alert('No Document Group Found !!'); 
        }, 
        error: function (error) { 
         alert('Error' + error); 
        } 
       }).responseText; 


     jQuery("#grdForReqKYC").jqGrid({ 
     url: RootUrl+ 'EXEntityTypeKYC/ReqKYCGridData', 
     datatype: 'json', 
     mtype: 'POST', 
     colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'], 
     colModel: [ 
        { name: 'id', index: 'id', width: 30, sorttype: "int", editable: false,hidden:true },      
        { name: 'DocGroupName', index: 'DocGroupName', width: 310, editable: true, edittype: "select", editrules: { required: true} , 
        editoptions: { 

         dataInit: function (element) { 
             $(element).focusout(function (e) { 
             if(this.value!="") 
             { 

             } 
             }); 
            }, 

         dataEvents: [{type: 'change', fn: function(e){ 
          myfunction(e); 
          } 
         }]} 

        }, 

        { name: 'DocList', index: 'DocList', width: 310, hidden:false,editable: true,edittype: "custom", editoptions: { dataInit: function (element) { 

             $(element).click(function (e) { 

             }); 
            }, 
        custom_element:MultiCheckElem, custom_value:MultiCheckVal }}, 
        { name: 'Mandatory', index: 'Mandatory', width: 310, editable: true, edittype: "text", editoptions: { maxlength: "1" , dataInit: function (element) { 
           $(element).keydown(function (e,val) { 
           var ctrl = e.ctrlKey; 
            var key = e.charCode || e.keyCode || 0; 
            if (ctrl && ((key == 88) /* CUT */ || (key == 67) /* COPY */ || (key == 86) /* PASTE */)) { return false; 
            } 
            if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) { 
             return false; 
            } 

            var rowDataObj=$('#grdForReqKYC').jqGrid('getRowData',cellRowId); 
            var rowData =JSON.parse(JSON.stringify(rowDataObj)); 
            var docListValue=rowData["DocList"].split(','); 

            if(((docListValue.length -1)==0) && rowData["DocList"]=='') 
            { 
             alert("Please Choose Document Name"); 
             return false; 
            } 

            if(e["char"]> (docListValue.length)) 
            { 
            return false; 
            } 




           }); 
          }}, editrules: { required: true} } 
        //, list:'Check1,Check2,Check3,Check4' 
       ], 

     loadComplete: function() {  
       if(DocGroupName!=null) 
         $("#grdForReqKYC").setColProp('DocGroupName', { editoptions: { value: JSON.parse(DocGroupName)} }); 

       //if(DocumentName!=null) 
       //alert(DocumentName+ ' ---- '+ JSON.parse(DocumentName)); 
         // $("#grdForReqKYC").setColProp('DocumentName', { editoptions: { value: JSON.parse(DocumentName)} }); 
         //$("#grdForReqKYC").setColProp('DocList', { editoptions: { list: CheckedDocumentName} }); 


     }, 

     cellEdit: true, 
     rowNum: 1000, 
     //gridview: true, 
     rownumbers: true, 
     //autoencode: true,   
     height: 120, 
     width: 700, 
     cellsubmit: 'clientArray', 
     caption: "Required Document for KYC", 
     multiselect: true, 
     // onSelectRow: function(id){alert(id)}, 

     postData: { 
      "MSTSeq": $("#Id").val(), 
      "data": $("#KYCGrid").val() 
     }, 
     onCellSelect: function (rowid, iCol, cellcontent, e) { 
     //alert(rowid); 
     cellRowId=rowid; 
     } 
    }); 


    //End Of Grid 

     $(window).on("resize", function() { 
     var newWidth = $("#grdForReqKYC").closest(".ui-jqgrid").parent().width(); 
     if(newWidth>900) 
     { 
     jQuery("#grdForReqKYC").jqGrid("setGridWidth", 900, true); 

     } 
     else{ 
     jQuery("#grdForReqKYC").jqGrid("setGridWidth", newWidth, true); 
     } 
    }); 

    // Start of AddNew/Delete function for Grid 
    $("#btnAddNew").click(function() { 

     if (ValidateRow($("#grdForReqKYC"))) { 
      var idAddRow = $("#grdForReqKYC").getGridParam("reccount") 
      emptyItem = [{ id: idAddRow + 1, FinancialYearNames: "", EntityName: "", AllocatedValue: "", ProjectDesc: ""}]; 
      jQuery("#grdForReqKYC").jqGrid('addRowData', 0, emptyItem); 
     } 
    }); 


    $("#btnDelete").click(function() { 
     $("#grdForReqKYC").jqGrid("editCell", 0, 0, false); 
     var gr = jQuery("#grdForReqKYC").jqGrid('getGridParam', 'selarrrow'); 
     if (gr != "") { 
      for (var i = 0; i <= gr.length; i++) { 
       jQuery("#grdForReqKYC").jqGrid('delRowData', gr[i]); 
      } 
      for (var i = 0; i <= gr.length; i++) { 
       jQuery("#grdForReqKYC").jqGrid('delRowData', gr[i]); 
      } 
     } 
     else 
      alert("Please Select Row(s) to delete!"); 
    }); 

    // End of AddNew/Delete function for Grid 

} 

myfunction的代碼，

function myfunction(e) 
{ 
    // grid.jqGrid('setCell', 1, 'DocList', '', null, null, true); 
    $("#grdForReqKYC").setColProp('DocList', { editoptions: { formatter: nullFormatter} }); 
} 

function nullFormatter() 
{ 
    return ''; 
} 

Answer 1

什麼，你需要做的是改變beforeSaveCell功能 Here單元格的值是對的jsfiddle一個解決方案，我爲您創建。

var currentRow = 0; 

function getAllSelectOptions(){ 
    var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', 
        '4': 'Hawaii', '5': 'London', '6': 'Oxford' }; 

     return states; 

    } 
      validateText = function (value, colname) { 
     // do validations if any and return false    
       return [true]; 
      }; 

      "use strict"; 
      var mydata = [ 
        {id:"1", DocGroupName: "2", DocList: "y", Mandatory: "z"}, 
        {id:"2", DocGroupName: "6", DocList: "y", Mandatory: "z"}, 
       ]; 
      $("#list").jqGrid({ 


       //url:'php.scripts/customers.get.php', 
       //datatype: 'xml', 
       //mtype: 'POST', 
       datatype: "local", 
       data: mydata, 
       height: "auto", 
       colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'], 
       colModel :[ 
        {name:'id', index:'id', width:55}, 
        {name:'DocGroupName', index:'DocGroupName', width:90, editable: true,edittype: 'select', 
              formatter: 'select', 

              editoptions:{value: getAllSelectOptions()}, "editrules":{"custom":true,"custom_func":validateText}}, 
        {name:'DocList', index:'DocList', width:90, editable: true }, 
        {name:'Mandatory', index:'Mandatory', width:90, editable: true} 

       ], 
       pager: '#pager', 
       rowNum:10, 
       rowList:[10,20,30], 
       sortname: 'idcustomers', 
       sortorder: 'asc', 
       viewrecords: true, 
       gridview: true, 
       caption: 'Customers', 
       cellEdit: true, 
       cellsubmit: 'clientArray', 
       afterSaveCell: function(rowid,name,val,iRow,iCol) { 
       if(name=='DocGroupName') 
       { 
        var row = $('#list').jqGrid('getRowData',currentRow);  
        row.DocList=''; 
        $('#list').jqGrid('setRowData',currentRow,row);  
       }     
       }, 
       beforeSaveCell: function(rowid,name,val,iRow,iCol) { 
       // var row = $("#list").getRowData(rowid); 
        var row = $('#list').jqGrid('getRowData',rowid); 
        currentRow= rowid; 

       }, 

});