Question

我试图在slickgrid中编辑一个单元格值，它应该自动更新行总和以及构成网格最后一行和最后一列的列总和。在这里我使用的方法，我得到编辑的行和列的索引。我也知道单元格的行和列的索引是row2＆amp; column2，必须更新。但我无法从第2行和第2行获得价值。列2。简而言之，我如何获得行索引和列索引已知的单元格的值。 grid.getCellNode（）和dataContext = grid.getDataItem（row）;不工作。任何人都可以帮我解决这个问题。

提前谢谢。

Answer 1

您需要使用grid.getDataItem(row);查找行。如果您知道列索引，则需要访问用于初始化网格的columns对象或访问网格实例以通过getColumns检索列。

通过提供对列定义中field属性的访问权限，这两个函数可以一起访问数据值。 field值应与数据对象中的各个属性相对应。

所以你应该能够使用以下方法检索数据值：

 var row = grid.getDataItem(rowIndex);
 var field = grid.getColumns()[columnIndex].field
 value = row[field]

请注意，在以下示例中，我的field属性设置为数字索引。我已经从一个旧示例重新调整了示例，该示例需要选择行来显示数据值。因此，使用组合框选择行/列对，然后选中该行旁边的复选框，将显示该值。

.centered {
text-align: center  
}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
 
  <link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

  <script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
  <script src='http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/slick.core.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/slick.grid.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/plugins/slick.checkboxselectcolumn.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/controls/slick.columnpicker.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/slick.editors.js'></script>

   
<table>
  <tr class='centered'>
    <td>Row</td>
    <td>Column</td>
    <td>Value</td>
  </tr>
  <tr>
  <td>
  <select data-bind='options: items, optionsCaption: "Select index", optionsValue: "id", optionsText: "0", value: rowIndex'></select>
  </td>
  <td>
    <select data-bind='options: columns, optionsCaption: "Select index", optionsValue: "field", optionsText: "name", value: columnIndex'></select>
  </td>
    <td>
      <span data-bind='text: value'></span>
      </td>
  </tr></table>
  <div id="myGrid" style="width:600px;height:500px;"></div>

  <script>
    var vm = {items:ko.observableArray(), rowIndex: ko.observable(), columnIndex: ko.observable()}
    var grid;
    var data = [];
    var options = {
      editable: false,
      enableCellNavigation: true,
      asyncEditorLoading: false,
      autoEdit: false,
      forceFitColumns: true
    };
    var columns = [];

    var dataContainer = {}

    $(function() {

      var checkboxSelector = new Slick.CheckboxSelectColumn({
        cssClass: "slick-cell-checkboxsel"
      });
      columns.push(checkboxSelector.getColumnDefinition());
      for (var i = 0; i < 5; i++) {
        columns.push({
          id: i,
          name: String.fromCharCode("A".charCodeAt(0) + i),
          field: i,
          width: 100
        });
      }

      (function generateData() {
        for (var i = 0; i < 10; i++) {
          dataContainer[i] = {}
          var d = (data[i] = {});
          for (x in columns) {
            dataContainer[i][x] = Math.floor((Math.random() * 100) + 1);
          }
          d[0] = "Row " + i;
          d.id = i
        }
      })();

      grid = new Slick.Grid("#myGrid", data, columns, options);
      grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
      grid.registerPlugin(checkboxSelector);
      var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

      var context = {};

      grid.onMouseEnter.subscribe(function(evt, args) {
        var cell = grid.getCellFromEvent(evt)
        context.rowIndex = cell.row;
        context.row = grid.getDataItem(cell.row);
      })

      grid.onMouseLeave.subscribe(function(evt, args) {
        context = {}
      })

      grid.onSelectedRowsChanged.subscribe(function(evt, args) {

        //console.log(args.grid.getSelectedRows())
        if (!context.row) {
          var rows = grid.getData();
          for (r in rows) {
            var row = rows[r]
            for (i = 1; i < columns.length; ++i) {
              row[i] = args.rows.length == 0 ? '' : dataContainer[r][i]
            }
          }
          grid.invalidateAllRows();
        } else {
          var display = args.rows.indexOf(context.rowIndex) >= 0;

          for (i = 1; i < columns.length; ++i) {
            context.row[i] = display ? dataContainer[context.rowIndex][i] : ''
          }

          grid.invalidateRow(context.rowIndex);
        }

        grid.render();
      });
      
      grid.onSelectedRowsChanged.subscribe(function(e, args){vm.columnIndex.valueHasMutated()})

      vm.items = data.slice()
      vm.columns = columns.slice();
      vm.columns.splice(0,1)
      vm.value = ko.computed(function(){
         
        if(vm.rowIndex() > -1 && vm.columnIndex() > -1) {
          var row = grid.getDataItem(vm.rowIndex());
          var field = vm.columnIndex()
           
          return row[field]
        }
        return ""
      })
    
    ko.applyBindings(vm)
    })
    
   
  </script>

当slickgrid中的行和列索引可用时如何获取单元格值

1 个答案: