Question

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

或者可以在渲染ui网格时自动渲染新的空行，并在填充所有行时自动渲染新的空行。我尝试使用单元格模板中的函数，但它不起作用。任何帮助都非常感谢

Answer 1

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

第二个选项（在渲染ui网格时自动渲染一个新的空行，并在填充所有行时自动渲染）需要JavaScript方法。

我遵循的基本逻辑是：

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

为了确保我们仅在修改“额外行”时采取行动，当我们创建一行时，会向当前行维护一个引用，以便我们可以评估是否对所接收的事件感兴趣（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}];
}
 ]);

为了使其正常工作，还需要做更多的事情

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

Answer 3

我在这里有一名工作人员。

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

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

{
   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 http://plnkr.co/edit/FjsA2r?p=preview

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

3 个答案: