在 ui-grid 中添加一个新的空行

Question

我正在尝试在 ui-grid 中添加一个新的空行。我尝试查看不同的 tuto 和示例，但我发现的所有内容都没有回复我的规范，而且我无法使其适应我正在寻找的内容。事实上，我正在寻找如何在现有的 ui-grid 中添加一个新的空行，既不使用网格外的按钮，也不使用 rowfooter 中的按钮。我想在网格中添加一个按钮，就像下面屏幕截图中显示的 + 按钮

或者在呈现 ui 网格时可能会自动呈现一个新的空行，并在所有行都被填充时自动呈现一个新的空行。我尝试在单元格模板中使用函数来做到这一点，但它不起作用。非常感谢任何帮助

Answer 1

第一个选项对我来说更像是一个 CSS 问题。本质上，添加按钮将使用某种包含 + 的字体库，您需要将其放置在网格的一角。也许查看网格页脚将是一个起点。听起来您已经在此处了解了创建添加行按钮的基础知识：http://ui-grid.info/docs/#/tutorial/112_swapping_data

第二个选项（在呈现 ui-grid 时自动呈现一个新的空行，当所有行都被填充时自动呈现一个新的空行）requires JavaScript 方法。

我遵循的基本逻辑是：

（假设）一些数据从后端某处加载（在此示例中，它是一个模拟加载，返回 $http 或 $resource 会返回的承诺）。
加载数据后，我们追加一个新行。我们先等待数据；否则我们不会将新行推到正确的位置。
编辑操作完成后，我们设置超时以确保对其他单元格的后续编辑不会继续触发新行。如果达到超时，我们将追加一个新行。如果发生后续编辑操作，并且存在超时承诺（用于添加新行），我们将取消它。一旦没有编辑操作发生，并且达到超时，我们将推送新行。

为了确保我们只在我们的 "extra row" 被修改时采取行动，当我们创建一行时，会维护一个对当前行的引用，以便我们可以评估接收到的事件是否是兴趣（var newRowTimeoutPromise）。

代码的核心逻辑如下，在 Plnkr 中有一个示例实现：

var extraRow = null,
        addNewTimeoutMillis = 2000,
        newRowTimeoutPromise = null;

    loadData().then(function(data) {
        $scope.gridOpts.data = data;
    }).finally(function() {
        // add initial empty row, and set our reference to it
        extraRow = addEmptyRow($scope.gridOpts.data);
    })

    $scope.gridOpts = {
        showGridFooter: true,
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;

            // listen for cell edit completion
            gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {

                // test if the edited row was the "extra row"
                // otherwise, and edit to any row would fire a new row

                // Set a timeout so we don't create a new row if the user has
                // not finished their edit(s) on other fields
                newRowTimeoutPromise = $timeout(function() {
                    if (rowEntity == extraRow) {
                        // add a new empty row, and set our reference to it
                        extraRow = addEmptyRow($scope.gridOpts.data);
                        newRowTimeoutPromise = null;
                    }
                }, addNewTimeoutMillis);
            })

            // Listen for cell edit start, and cancel if we have a pending new
            // row add. Otherwise, each time you finish the edit on a cell,
            // this will fire.
            gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
                if (newRowTimeoutPromise != null) {
                  $timeout.cancel(newRowTimeoutPromise);
                }
            })

        }
    };

http://plnkr.co/edit/IMisQEHlaZDCmCSpmnMZ?p=preview

Answer 2

我使用 jQuery 来获取和更改单元格模板的特定单元格元素的样式。

这是一个有用的Fiddle

这是控制器脚本：-

var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope',
function($scope) {
    $scope.gridOptions = {};

    $scope.Add = function() {

       $scope.gridOptions.data.push( { firstName: ' ',lastName:'',company:'' });
$(".ui-grid-coluiGrid").prevObject["0"].activeElement.style.display="none";  
$(".ui-grid-cell")[$scope.gridOptions.data.length-2].style.display="inline";
  };
$scope.gridOptions.onRegisterApi = registerGridApi;
function registerGridApi(gridApi) {
    $scope.gridApi= gridApi

};   

 $scope.gridOptions.columnDefs = [{
        name: 'firstName',
        field: 'firstName', 
    }, {
        name: 'lastNamer',
        field: 'firstName'
    }, {
        name: 'ShowScope',
        cellTemplate: '<button id="btb" ng-click="grid.appScope.Add()">+</button>'
    }];
     $scope.gridOptions.data = [{ yourdata}];
}
 ]);

要使其正常工作，还需要做 2 件事

使用 cellContentEditable 使行可编辑
为了禁用出现在与现有数据行对应的单元格上的单元格模板按钮的显示样式，您可以使用 angular foreach 或 for 循环遍历这些行并禁用样式（我尝试使用 renderContainers 但它总是 returns Add 函数之外的渲染行的长度为 0）。

Answer 3

我这里有一个工作的 plunker。

http://plnkr.co/edit/Vnn4K5DcCdiercc22Vry?p=preview

在 columnDefs 中，我为添加定义了一个单独的列：

{
   name: 'add',
   displayName: '',
   enableCellEdit: false,
   enableColumnMenu: false,
   width: '3%',
   cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.addRow()"><span  ng-click="grid.appScope.addRow()">Add</span></div>'
  }

和

$scope.addRow= function(){
   var newlist = {"remarks":'',"testName":''};
   $scope.gridOptions.data.push(newlist);
}

更新：第二个 plunker bootstrap 图标 add/remove http://plnkr.co/edit/FjsA2r?p=preview

在 ui-grid 中添加一个新的空行

add a new empty line in ui-grid

javascript

angularjs

angular-ui-grid