我想写的UI电​​网与不同的输入自定义指令columnDefs [英] I want to write a custom directive for ui-grid with different input columnDefs

问题描述

这是我的控制器

$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

and this is my .cshtml

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

我想以这样的方式，它应在其他.cshmtls用于写入这一点，但columnDefs取决于表的列名而变化。我应该如何在这样一种方式，用户部份应该给在指令中columnsDefs与分页一起写？

I want to write this in such a way that it should be used in other .cshmtls, but the columnDefs varies depending on table column name. How should I write in such a way that ths user should give the columnsDefs in directive along with pagination?

推荐答案

您的问题是很难理解的，希望我是正确的。要定义默认设置网格但是如果需要使用户输入一些特殊的设置？

Your question is hard to understand, hopefully I got it right. You want to define default-settings for your grid but enable the user to input some special settings if needed?

扭曲UI格在自己的指令。通过你想要的论点成指令，并在指令创建默认设置。

Warp ui-grid in your own directive. Pass your wanted arguments into that directive and create default settings in your directive.

您.cshtml。你通过设置变量成说。

Your .cshtml. You pass your settings variable into that.

<my-grid options="usersList" />

您指令。抓住设置有（见选项：'='）。并绑定到该控制器或范围

Your Directive. Grab the settings there (see options: '=') and bind that to controller or scope.

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

您控制器。现在，你可以在控制器访问您的设置。
在那里，你可以和你的插入设置结合了默认设置，并传递到指令模板。

Your Controller. Now you can access your settings in that controller. There you could combine the default settings with your inserted settings and pass that into the directive template.

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。

And your grid.html, you pass the combined settings into the grid-API.

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

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

There are many more details to watch out for, but thats a possible setup.

E：我做了一个 Plunkr 另一个类似的问题。对于未来的参考。

e: I made a Plunkr for another similar question. For future reference.

这篇关于我想写的UI电​​网与不同的输入自定义指令columnDefs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！