我想为具有不同输入 columnDef 的 ui-grid 编写自定义指令

Question

这是我的控制器

$scope.usersList = {};

$scope.usersList = {
    paginationPageSizes: [10,15, 20],
    paginationPageSize: 10,
    columnDefs: [
        { name: 'userId', cellTemplate: '<div class="ui-grid-cell-contents"><a ui-sref="appSetting.userSelected({userId: row.entity.userId})">{{ row.entity.userId }}</a></div>' },
        { name: 'firstName' },
        { name: 'lastName' },
        { name: 'emailId' },
        {
            name: 'action',
            cellTemplate: '<div>' +
                    '  <button  ng-click="grid.appScope.sampledetails()">Delete</button>' +
                    '</div>',
            enableSorting: false,
            enableColumnMenu: false
        }
    ]
};

这是我的 .cshtml

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

我想以这样的方式编写它，它应该在其他 .cshmtls 中使用，但 columnDefs 因 table 列名而异。我应该如何编写以便用户在指令中给出 columnsDefs 和分页？

Answer 1

你的问题很难理解，希望我是对的。您想为网格定义默认设置，但允许用户在需要时输入一些特殊设置吗？

在您自己的指令中扭曲 ui-grid。将您想要的参数传递到该指令并在您的指令中创建默认设置。

您的 .cshtml。您将设置变量传递给它。

<my-grid options="usersList" />

你的指令。在此处获取设置（请参阅选项：'='）并将其绑定到控制器或范围。

angular.module('app').directive('myGrid', myGrid);
function myGrid() {
  return {
    templateUrl : 'grid.html',
    controller : 'GridCtrl',
    controllerAs : 'grid',
    restrict: 'E',
    scope: {
      options : '=',
    },
    bindToController: true,
  };
}

你的控制器。现在您可以访问该控制器中的设置。在那里，您可以将默认设置与插入的设置结合起来，并将其传递到指令模板中。

angular.module('app').controller('GridCtrl', GridCtrl);
function GridCtrl() {
  var grid = this;

  console.log(grid.options); // containts your settings

  grid.gridOptions = {
    paginationPageSize: grid.options.paginationPageSize,
    ...,
    columnDefs: grid.options.columnDefs
    etc
  }
}

而你的grid.html，你将组合设置传递到网格中-API。

<div id="grid1" ui-grid="grid.gridOptions" class="grid"></div>

还有很多细节需要注意，但这是一种可能的设置。

e：我为另一个类似的问题做了一个Plunkr。供日后参考。

我想为具有不同输入 columnDef 的 ui-grid 编写自定义指令

I want to write a custom directive for ui-grid with different input columnDefs

angularjs

angularjs-directive

angularjs-scope

angular-ui-grid