如何在按钮上添加带有自定义单元格模板的新行，单击现有网格

Question

var nameTemplate = ""

function templateFunction() {

  if ($scope.useBindScript === true) {

    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "file"></div>';

  } else {
    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "text"></div>';

  }

  return nameTemplate;
}

$scope.gridOptionsArg = {
  enableRowSelection: true,
  enableRowHeaderSelection: false,
  enableCellEditOnFocus: true,
  data: $scope.arginputFiles,
  columnDefs: [{
      name: 'mark',
      cellTemplate: templateFunction()
    },
    {
      name: 'argument',
      field: 'index',
      enableCellEdit: false
    },
    {
      name: 'value',
      field: 'value'
    }
  ]
};

$scope.addRow = function() {
  if (condition) {
    $scope.gridOptionsArg.data.push({
      "argument": "Application",
      "value": ""

    });
    $scope.columns[$scope.columns.length - 2].cellTemplate = templateFunction();
  }
}

这是我网格的定义。一旦我点击某个按钮，就会调用add row函数，我想用新的cellTemplate向网格添加一行。每次它返回一个文本框。

Answer 1

我已根据您的需求创建了一个plunker：http://plnkr.co/edit/GKmcwZurGSf6VXjC2gu0?p=preview

以下函数创建一个新行并将其添加到ui-grid数据：

vm.addRow = function() {
    vm.gridOptions1.data.unshift({"name":"Test", "gender":"Male", "company":"test"});
    vm.grid1Api.core.notifyDataChange( uiGridConstants.dataChange.EDIT );
  };

我使用相同的函数返回模板：

function templateFunction() {
  var nameTemplate;
  if (useBindScript === true) {

    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "file"></div>';

  } else {
    nameTemplate = '<div class="ui-grid-cell-contents"><input type = "text"></div>';

  }

  return nameTemplate;
}