angularjs – 我想用不同的输入columnDefs为ui-grid编写一个自定

发布时间：2020-12-17 07:51:59 所属栏目：安全来源：网络整理

导读：这是我的控制器 $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

这是我的控制器

$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根据表列名称而有所不同.我应该如何写这样的方式,用户应该在指令中给出columnsDefs以及分页？

你的问题很难理解,希望我做对了.您想为网格定义默认设置,但是如果需要,用户可以输入一些特殊设置吗？

在你自己的指令中扭曲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中,您将组合设置传递给grid-API.

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

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

e：我为另一个类似的问题做了Plunkr.备查.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!