當兩列使用相同的字段時，更新jqGrid中的值不起作用

我使用How to update value of data in jqgrid中提到的解決方案來本地更新數據。它爲我工作，如第一個小提琴所示。在「操作」列中，根據「IsActive」列中的數據有條件添加按鈕。如果它是「真」，則將「退休」按鈕添加爲動作。如果爲false，則添加「激活」按鈕。當調用javascript函數時，該按鈕變爲「激活」。現在當兩列使用相同的字段時，更新jqGrid中的值不起作用

Fiddle 1

，我添加了另一列顯示狀態值文本。現在，「狀態」列和「操作」列都使用相同的數據列 - IsActive。添加此列後，javascript函數不會將按鈕從「退出」更改爲「激活」。

Fiddle 2

什麼是解決這個問題的最好方法？

CODE

$(document).ready(function() { 

function updateActiveStatus(rowid, isToActive) { 

alert('function'); 

         // first change the cell in the visible part of grid 
         $("#list").jqGrid('setCell', rowid, 'firstname', 'A'); 

         // now change the internal local data 
         $("#list").jqGrid('getLocalRow', rowid).firstname = 'A'; 


         $("#list").jqGrid('setCell', rowid, 'IsActive', false); 
         $("#list").jqGrid('getLocalRow', rowid).IsActive = false; 



      } 


      var myData = [ 

       { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true }, 
       { "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34", "IsActive": true }, 
       { "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56", "IsActive": true }, 
       { "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55", "IsActive": true } 
       ], 

       myGrid = $("#list"); 

      myGrid.jqGrid({ 
       datatype:'local', 
       data: myData, 
       colNames: ['ID', 'FirstName', 'Code', 'Amount', 'Note', 'Action'], 
       colModel:[ 
        {name:'id',width:70,align:'center',sorttype: 'int'}, 
        {name:'firstname',width:80, align:'center'}, 
        { name: 'codeval', width: 70 }, 
        {name:'amount',width:100, formatter:'number'}, 
        {name:'note',index:'note',width:100,sortable:false}, 
        { 
         name: 'IsActive', 
         width: 100, 
         formatter: function (cellvalue, options, rowObject)             { 
          if (cellvalue == true) { 
           return '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' + 
             '<span title="" class="ui-button-icon-primary ui-icon ui-icon-scissors"></span>Retire' + 
             '</button></div>'; 
          } 
          else { 
           return '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' + 
             '<span title="" class="ui-button-icon-primary ui-icon ui-icon-check"></span>Activate' + 
             '</button></div>'; 
          } 
         } 
        } 
       ], 
       rowNum:10, 
       pager: '#pager', 
       gridview:true, 
       ignoreCase:true, 
       rownumbers:true, 
       viewrecords: true, 
       sortorder: 'desc', 
       height: '100%', 
       beforeSelectRow: function (rowid, e) { 
        var $self = $(this), 
         $td = $(e.target).closest("tr.jqgrow>td"), 
         rowid = $td.parent().attr("id"), 
         //rowData = $self.jqGrid("getLocalRow", rowid), 
         rowData = $self.jqGrid("getRowData", rowid) 
        iCol = $td.length > 0 ? $td[0].cellIndex : -1, 
        colModel = $self.jqGrid("getGridParam", "colModel"); 

        celValue = $self.jqGrid('getCell', rowid, 'FirstName'); 

        if (iCol >= 0 && colModel[iCol].name === "IsActive") { 

         if ($(e.target).hasClass("app-custom-button-retire")) { 
          updateActiveStatus(rowid,false); 
          return false; 
         } 

         if ($(e.target).hasClass("app-custom-button-activate")) { 

          updateActiveStatus(rowid, true); 
          return false; 
         } 
        } 


        //Avoid selection of row 
        return false; 
       } 
      }); 
      myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" }); 

     });

來源

2017-01-31 Lijo

我似乎多誤會在你的代碼。首先你有一些源數據，它是項目數組。每一個項目是具有多個屬性的對象，如：

{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", 
    "amount": "56", "IsActive": true }

或者，這是相同的，

{ id: "75", firstname: "LORA", codeval: "H", note: "rr7323", 
    amount: "56", IsActive: true }

應該明確的是，這樣的項目不能有具有相同名稱多個屬性。對象

{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", 
    "amount": "56", "IsActive": true, "IsActive": true }

即使某些Web瀏覽器可能會忽略該錯誤也是錯誤的。即使您爲「IsActive」屬性指定了相同的值true。

以同樣的方式，您不能使用colModel與多列具有相同的name屬性。你的第二個演示https://jsfiddle.net/LijoCheeran/rqab1veh/11/有兩列具有相同的屬性name: 'IsActive'。這是不對的。您可以按照使用情況修復代碼，例如，第二列中的name: 'IsActive1'。格式化程序IsActive1可以使用rowObject.IsActive而不是cellvalue來訪問所需的數據。對應的代碼將是follwing

{ 
    name: 'IsActive1', 
    width: 75, 
    formatter: function (cellvalue, options, rowObject) { 
     return rowObject.IsActive == true ? 'Active' : 'Retired'; 
    } 
}, 
{ 
    name: 'IsActive', 
    width: 100, 
    formatter: function (cellvalue, options, rowObject) { 
     return cellvalue == true ? retireButton : activeButton; 
    } 
}

其中retireButton和activeButton包含按鈕的HTML片段。

現在理解這一點非常重要，jqGrid可以容納data陣列。方法$("#list").jqGrid('getLocalRow', rowid)使您得到參考到與該行的數據相對應的數據項。方法getRowData將從單元格的HTML表示（從<td>元素）獲取數據，並在那裏取消格式化。返回對象的字段類型將是字符串。

因爲你需要更新不僅是數據，但firstname，IsActive1和IsActive列的單元格內容，那麼你要調用setCell在每個領域或更好的通話一個setRowData：

function updateActiveStatus (rowid, isToActive) { 
    alert('calling the function'); 
    $("#list").jqGrid('setRowData', rowid, { 
     firstname: 'A', 
     IsActive1: false, 
     IsActive: false 
    }); 
    var item = $("#list").jqGrid('getLocalRow', rowid); 
    // delete unneeded IsActive1 property created in the item 
    delete item.IsActive1; 
}

唯一setRowData呼叫的小缺點是在數據項中創建新的財產IsActive1。舊的jqGrid 4.6沒有可能將數據「虛擬地」保存在其他地方，如item.IsActive1。免費的jqGrid允許指定saveLocally回調，它可以自定義「保存」本地項目中列的數據。這不是你的情況真正大的問題，你只需要通過delete item.IsActive1

刪除不需要的屬性，你可以看到修改後的演示結果https://jsfiddle.net/OlegKi/rqab1veh/12/

來源

2017-01-31 19:32:30 Oleg

當兩列使用相同的字段時，更新jqGrid中的值不起作用

回答

相關問題