Question

在我的页面中尝试使用SlickGrid时，我注意到在呈现网格后声明的jQuery点击处理程序仅适用于可见行数的2倍。

此外，单击按钮时，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';

希望这有帮助。

SlickGrid按钮单击处理程序在滚动事件上停止运行？

1 个答案: