FormatterはrowObjectと一緒に使用すると一度だけ動作します

次のjqGridがあります。 'ActiveStatusText'列は、IsActiveの列値rowObjectを使用して、フォーマッタを使用して入力されます。FormatterはrowObjectと一緒に使用すると一度だけ動作します

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

}

ボタンをクリックすると、ステータス表示テキスト（「 'ActiveStatusText'」）を更新する必要があります。

「リタイア」ボタンのクリックが完了すると、ステータス表示が「リタイア」になり、ボタンテキストが「アクティブ化」になります。これは正常に動作します。
「アクティブ化」ボタンのクリックが完了すると、ステータス表示が「アクティブ」になり、ボタンのテキストが「リタイア」になります。ステータス列は更新されません。

なぜ初めてテキストが変更されるのですか？これを修正するには？

Fiddle

$(document).ready(function() { 

    function updateActiveStatus(rowid, isToActive) { 

     alert(isToActive); 

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

     //Set display text 
     $("#list").jqGrid('setCell', rowid, 'ActiveStatusText', isToActive); 
    } 


    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": false } 
     ], 

     myGrid = $("#list"); 

    myGrid.jqGrid({ 
     datatype:'local', 
     data: myData, 
     colNames: ['ID', 'Note','Status', 'Action'], 
     colModel:[ 
      {name:'id',width:70,align:'center',sorttype: 'int'}, 
      {name:'note',index:'note',width:100,sortable:false}, 
      { 
       name: 'ActiveStatusText', 
       width: 100, 
       formatter: function (cellvalue, options, rowObject) { 
        return rowObject.IsActive == true ? 'Active' : 'Retired'; 
       } 
      }, 
      { 
       name: 'IsActive', 
       width: 100, 
       formatter: function (cellvalue, options, rowObject)             { 
        if (cellvalue == true) { 
         return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' + 
          'Retire' +'</button></div>'; 
        } 
        else { 
         return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' + 
           '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("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; 
     } 
    }); 


});

HTML

<body> 
    <table id="list"><tr><td/></tr></table> 
    <div id="pager"></div> 
</body>

出典

2017-02-09 Lijo

私はjqGrid 4.6が古いであることを、あなたの前の質問に答えであなたを書きました（3才）と、それは多くが含まれていますバグは後で修正されます。 jqGridを無料のjqGridの最新バージョン（本日4.13.6）にアップグレードすることをお勧めします。コードが動作し始めます。

フォーマッタがsetCellによって呼び出されるが、間違ったパラメータrowObjectがあると簡単に確認できます。 jqGrid 4.6では、rowObjectの代わりに<tr>というDOM要素が使用されています（、indにhereが割り当てられています）。 rowObject.IsActiveはundefined、フォーマッタはActiveStatusTextとなり、常に'Retired'が返されます。

あなたは本当に、あなたは次の回避策を使用することができ、jqGridを解放するために移行することはできません場合のみ：

{ 
    name: 'ActiveStatusText', 
    width: 100, 
    formatter: function (cellvalue, options, rowObject) { 
     var isActive = rowObject.IsActive; 
     if (isActive === undefined) { 
      // be called by setCell from buggy version of jqGrid 
      isActive = $(this).jqGrid('getLocalRow', options.rowId).IsActive; 
     } 

     return isActive == true ? 'Active' : 'Retired'; 
    } 
}

は、コードを使用して修正デモhttps://jsfiddle.net/OlegKi/fp7mL659/2/を参照してください。ところで、私はあなたの前の答えの答えにあなたを書いた、そのsetCellもローカルデータを変更します。したがって$("#list").jqGrid('getLocalRow', rowid).IsActive = isToActive;$("#list").jqGrid('setCell', rowid, 'IsActive', isToActive);の後のコールは絶対に不要です。

出典

2017-02-09 20:03:25 Oleg

私のマネージャーを説得することは、無料のjqGridバージョンに移行するのは難しいようです。まず、jqGridについての知識を共有していただき、ありがとうございます。なぜ新しいバージョンのjqGridは登場しないのですか？他のグリッドの人気が高まっているのでしょうか？最近使用されている他のグリッドは何ですか？ – Lijo

@Lijo：4.7は**最後の**バージョンのjqGridでした。トニー・トモフ（Trirand）によって開発された次のバージョンは、*新名*「Guriddo jqGrid JS」の**商用**製品（http://www.trirand.com/blog/?p = 1438））。価格とライセンス[ここ]（http://guriddo.net/?page_id=103334）を参照してください。 – Oleg

@Lijo：MITライセンスに対応して、誰もがフォークを作り、独自の開発を続けることができます。私はjqGrid 4.7のフォークを作成し、2014年末に[free jqGrid]（https://github.com/free-jqgrid/jqGrid）として開発を開始しました。https://github.com/freeで見ることができます-jqgrid/jqGrid/compare/v4.6.0 ... jqGrid 4.6.0と空きjqGridの現在のコードとの正確な差異をマスターします。実際には多くの変更を加えて1600件のコミットがあります。以前の4.xバージョンのjqGridとの最大限の互換性を保つために、私は4.x.y変換を伴うバージョンを使用します。 – Oleg

FormatterはrowObjectと一緒に使用すると一度だけ動作します

答えて

関連する問題