我想为具有不同输入 columnDefs 的 ui-grid 编写自定义指令 [英] I want to write a custom directive for ui-grid with different input columnDefs

问题描述

这是我的控制器

$scope.usersList = {};$scope.usersList = {paginationPageSizes: [10,15, 20],分页页面大小:10，列定义:[{ name: 'userId', cellTemplate: '<div class="ui-grid-cell-contents"><a ui-sref="appSetting.userSelected({userId: row.entity.userId})">;{{ row.entity.userId }}</a></div>'},{名称:'名字'}，{名称:'姓氏'}，{名称:'emailId'}，{name: '动作',单元格模板:'
'+' <button ng-click="grid.appScope.sampledetails()">删除</button>'+'</div>',启用排序:假，启用列菜单:假}]};

这是我的 .cshtml

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

我想以这样的方式编写它，以便在其他 .cshmtls 中使用它，但是 columnDefs 因表列名称而异.我应该如何编写，以便用户应该在指令中提供 columnDefs 和分页?

解决方案

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

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

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

<my-grid options="usersList"/>

您的指令.获取那里的设置(请参阅选项:'=')并将其绑定到控制器或范围.

angular.module('app').directive('myGrid', myGrid);函数 myGrid() {返回 {templateUrl : 'grid.html',控制器:'GridCtrl'，控制器为:'网格'，限制:'E'，范围: {选项:="，},bindToController: 真，};}

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

angular.module('app').controller('GridCtrl', GridCtrl);函数 GridCtrl() {var grid = this;控制台日志(网格选项)；//包含您的设置grid.gridOptions = {paginationPageSize: grid.options.paginationPageSize,...,columnDefs:grid.options.columnDefs等等}}

和您的 grid.html，您将组合设置传递到 grid-API.

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

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

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

This is my Controller

$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
        }
    ]
};

and this is my .cshtml

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

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?

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

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
  }
}

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: I made a Plunkr for another similar question. For future reference.

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