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

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();
  }
}

这是我的网格的定义。一旦我单击某个按钮，将调用添加行函数，我想使用新的 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;
}