SlickGrid按鈕單擊處理程序在滾動事件時停止運行？

Question

在嘗試在我的頁面中使用SlickGrid時，我注意到我在渲染網格后聲明的jQuery單擊處理程序僅適用於可見行數的2 SlickGrid 。

此外，當單擊按鈕時， value屬性會更改以向用戶提供視覺確認。 但是，在向下滾動超過先前單擊的按鈕之一時，將顯示向上滾動以將value重置為原始/默認值。

據我所知，看起來網格正在以不同的間隔重新渲染。 如果懷疑是正確的，我如何保留單擊處理程序的效果以及那些已經單擊的按鈕中的值？

需要注意的是，我沒有使用dataView。

<script type="text/javascript">
  var j$ = jQuery.noConflict();
  var grid,
      data = [],
      columns = [
          { id: "rownum", name: "Row #", field: "rownum", width: 50 },
          { id: "accname", name: "Account Name", field: "accname", width: 500 },
          { id: "accid", name: "Id", field: "accid", width: 150 },
          { id: "rectypeid", name: "Record Type ID", field: "rectypeid", width: 150 },
          { id: "itemurl", name: "Item URL Link", field: "itemurl", width: 300, formatter: function (r,c,v,def,datactx) { return "<a target='_blank' href='" + v + "'>" + v + "</a>" } },
          { id: "rfrbtn", name: "Notify Staff", field: "rfrbtn", width: 75, formatter: function (r,c,v,def,datactx) { return "<input class='rfrch' value='Yes' type='button' id='" + datactx.accid + "'/>" } }
      ],
      options = {
        enableCellNavigation: false,
        enableColumnReorder: true,
      };

  var acc = new SObjectModel.Acc();

  // Query Accounts
  var count = 1;
  acc.retrieve({ where: {Name: {like: '%Test Acct%'}, RecordTypeId: {eq: '01230000003MJmr'}}, limit: 100 }, function(err, records, event){
    if(err) {
      alert(err.message);
    }
    else {
      records.forEach(function(record) {
        data.push({
          rownum: count++,
          accname: record.get("Name"),
          accid: record.get("Id"),
          rectypeid: record.get("RecordTypeId"),
          itemurl: record.get("itemurl")
        });
      });
    }
    grid.invalidate();
    rfrClickHandler();
  });

  grid = new Slick.Grid("#container", data, columns, options);

  var rfrClickHandler = function() {
    j$(".rfrch").click(function() {
      var rfrbtnClicked = j$(this).prop('id');
      j$(this).prop('value','Cancel');
      console.log(rfrbtnClicked);
    });
  }

</script>

Answer 1

使用.on（），以便在重新渲染行后不必重新綁定單擊處理程序。

j$("#container").on('click', '.rfrch', function(){
    //... your handler code
}

在按鈕的格式化程序中，您可以為按鈕的當前值狀態向dataContext添加一個屬性，還可以為保存行索引的data屬性添加一個屬性：

if(datactx.rfrchState === undefined){
    datactx.rfrchState = "Yes";
}
return "<input class='rfrch' value='"+datactx.rfrchState+"' data-row-index='"+r+"' type='button' id='" + datactx.accid + "'/>"

然后在按鈕處理程序中添加代碼以檢索數據對象並設置rfrchState。 這樣，當您上下滾動並重新渲染行時，狀態將被保留並通過格式化程序設置在按鈕上。

var rowIndex = j$(this).data('row-index');
var dataItem = grid.getDataItem(rowIndex);
dataItem.rfrchState = dataItem.rfrchState === 'Yes'?'No':'Yes';

希望這可以幫助。