这是我的控制器
$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以及分页?
答案 0 :(得分:3)
你的问题很难理解,希望我做对了。您想为网格定义默认设置,但是如果需要,可以让用户输入一些特殊设置吗?
在你自己的指令中扭曲ui-grid。将您想要的参数传递给该指令并在指令中创建默认设置。
你的.cshtml。您将设置变量传递给它。
<my-grid options="usersList" />
您的指示。在那里抓取设置(参见选项:&#39; =&#39;)并将其绑定到控制器或范围。
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>
还有许多细节需要注意,但这可能是一种设置。
是的:我为另一个类似的问题做了Plunkr。供将来参考。