【问题标题】:How to add row selection checkbox for ag-grid如何为 ag-grid 添加行选择复选框
【发布时间】:2017-03-20 00:05:28
【问题描述】:

有没有一种方法可以为每一行设置行选择复选框,而无需为其配置特殊列?我的意思是为我的 gridOptions 添加属性并查看每行附近的复选框,然后获取所有选定的行? 我阅读的所有文档都显示了如何通过将其添加到特定列来做到这一点。

谢谢,

【问题讨论】:

    标签: ag-grid


    【解决方案1】:

    您仍然可以在没有复选框列的情况下进行行选择 - 您可以简单地根据行选择进行选择,也可以在其中渲染带有复选框的列(使用自定义单元格渲染器)。

    查看Selection Documentation 了解有关行选择的更多信息,查看Cell Rendering Documentation 了解有关单元格渲染的更多信息

    【讨论】:

    • ag-grid 没有通过复选框选择整行的 api?
    • 您可以对诸如 cellClicked 或 rowClicked 等事件做出反应,一旦被调用,您可以依次调用 node.setSelected(true)(例如)
    • 好的...谢谢。我们还想购买 ag-grid 许可证以使用您的一些企业功能,但我发现这并不容易,您可以联系我的销售人员吗?
    • 您好 - 请通过 accounts@ag-grid.com 联系我们 - 他们将能够在那里为您提供帮助,包括在需要时提供更多支持。如果您还需要什么,请告诉我
    【解决方案2】:

    我知道现在回答这篇文章为时已晚。但这可能对仍在寻找解决方案的人有所帮助。它适用于每行上的复选框选择(单击行上的任意位置以选择复选框)、移位/控制和切换选择。这里我只给出了必要的代码。

    vm.gridOptions = {
      appSpecific  : {},
      onRowClicked : onRowClicked,
      onGridReady : function() {
        let api = vm.gridApi = vm.gridOptions.api;
      }
    };
    
    function toggleSelect(row) {
      row.node.setSelected(!row.node.isSelected(), false);
    }
    
    
    function onRowClicked(row) {
      var appSpecific = vm.gridOptions.appSpecific;
      var lastSelectedRow = appSpecific.lastSelectedRow;
      var shiftKey = row.event.shiftKey;
    
      // if not modifier keys are clicked toggle row
      if (!shiftKey) {
        toggleSelect(row);
      } else if (lastSelectedRow !== undefined) {
    
        if (shiftKey) {
          var startIndex, endIndex;
          // Get our start and end indexes correct
          if (row.rowIndex < lastSelectedRow.rowIndex) {
            startIndex = row.rowIndex;
            endIndex = lastSelectedRow.rowIndex;
          }
          else {
            startIndex = lastSelectedRow.rowIndex;
            endIndex = row.rowIndex;
          }
          // Select all the rows between the previously selected row and the
          // newly clicked row
          for (var i = startIndex; i <= endIndex; i++) {
            vm.gridApi.selectIndex(i, true, true);
          }
        }
      }
      // Store the recently clicked row for future use
      appSpecific.lastSelectedRow = row;
      getSelection(); // Implement functionality to get selected rows 
    }
    

    【讨论】:

      猜你喜欢
      • 2016-01-21
      • 2018-10-27
      • 2018-09-18
      • 2018-05-20
      • 2019-04-22
      • 2018-07-01
      • 2019-05-23
      • 2018-04-10
      • 1970-01-01
      相关资源
      最近更新 更多