Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...