Angular ui-grid 动态添加新行

Question

我对新添加的行有疑问。它继承网格中的行（按钮和行为）。该代码正在添加一个新行，但我想要一个具有 AddOverride() 函数中行为的新行。就像一个带有保存和取消按钮的按钮。当我添加新行时。新行 > 有更新和删除按钮。当我尝试在新添加的行上单击更新时，它正在调用服务进行更新。

-

HTML

   <button  id="addNew" ng-click="addOverride()" type="button" class="btn 
btn-primary">Add Rank</button>      
                <div ui-grid-auto-resize ui-grid="gridOptions" ui-grid-
pagination class="gridRank" style="height: 370px !important;"></div>

填充网格

$scope.gridOptions = {             
            columnDefs: [
                { 
                    field: 'rankID', displayName: '', visible: false
                },
                {
                    name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
                    cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350

                },
                 {
                     field: 'createTime', displayName: 'Create Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                 },
                {
                    field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                },                   
                 {
                     field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                 },
                {
                    field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                },
            {
                name: 'Action', field: 'edit', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
                cellTemplate: '<div><button ng-show="!row.entity.editrow"  ng-click="grid.appScope.edit(row.entity)"><span class="glyphicon glyphicon-edit"></span></button>' + ' ' + //Edit Button                                   
                               '<button ng-show="row.entity.editrow" ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
                               '<button ng-show="row.entity.editrow"  ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
                               '<button ng-show="!row.entity.editrow" ng-click="grid.appScope.Delete(row.entity)"><span class="glyphicon glyphicon-trash"></span></button>' + ' ' + //Delete Button
                               '</div>', width: 75
            }],
            data: response.data.resultLists.cookRankList,
            paginationPageSizes : [10, 20, 30],
            paginationPageSize : 10,
            multiSelect: false
        };

添加新行

$scope.addOverride = function () {
            var emptyData = [
                 {
                     field: 'rankID', displayName: '', visible: false
                 },
                  {
                      name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
                      cellTemplate: '<div  ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350

                  },
                  {
                      field: 'createTime', displayName: 'Create Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                  },
                  {
                      field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                  },
                  {
                           field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
                  },
                  {
                           field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
                  },
                  {
                    name: 'Action', field: 'add', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
                    cellTemplate: '<div><button  ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
                                   '<button ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
                                   '</div>', width: 75
                }

            ];
            $scope.gridOptions.data.unshift(emptyData);
         };

Answer 1

当您添加一个新行时，它应该是一个具有与网格中其他对象相同属性的单个对象。您将列定义推入一行，因此网格很混乱。

您的 add 函数应该被缩短为简单地将一个新对象推送到您的数据数组中：

$scope.addOverride = function () {
   $scope.gridOptions.data.unshift({
        rankID: "",
        // shortened
    });
};

然后，对于您的模板，您可以创建两个变量来保持整洁。或者只是把它们放在一起。基本上，您希望您的模板在某些最初不会出现的字段上进行切换。我猜createTime 就是这样一个领域。通常这将是一个 id。如果需要，您还可以创建一个新的隐藏字段。

一个轻量级的例子：

  var cellTemplateReg = '<div ng-if="row.entity.createTime">Existing</div>';
  var cellTemplateNew = '<div ng-if="!row.entity.createTime">New</div>';

columnDefs: [ //shortened
  {
      name: 'Action,
      field: 'action',
      enableFiltering: false,
      enableSorting: false,
      enableColumnMenu: false,
      width: 200,
      cellTemplate: cellTemplateReg + cellTemplateNew
  }
]