AngularJs - agDrid rowData с использованием синтаксиса «контроллер как» - PullRequest
Новая
       101

AngularJs - agDrid rowData с использованием синтаксиса «контроллер как»

1 голос
/ 08 марта 2020

[Обновить] Этот Плункер делает то, что я хочу, , но :

  1. он использует ui-grid , а не ag-grid.
  2. он внедряет сетку в модуль, а не только в один контроллер, который его использует.

Я предполагаю, что эти изменения будут простыми и постараюсь включить их в мой код когда я вернусь домой примерно через 14 часов.

Если кто-то захочет раскошелиться на Plunk и внести эти изменения, я назначу награду, так как это хорошая базовая демонстрация c start point для тех, кто хочет сделать то же самое, так что Plunker будет общей справки.

Я заманчиво близок, но

Не могу прочитать свойство 'setRowData' из неопределенного (вызвано "<ui-view class="ng-scope ng-binding">") "TypeError : Не удается прочитать свойство 'setRowData' с неопределенным

Я использую синтаксис "controller as", следовательно, Self; (Self = this;). Это работает нормально, моя проблема, когда я пытаюсь установить rowData для ag-grid в templateURL состояния ui-router.

Публиковать сообщения очень много, но вот что важно: 

<div id="currentCandidatesGridDiv"
     ag-grid="Search_result_controller.currentCandidatesGrid" 
     class="ag-theme-balham red_border"
     style="height: 30%; width:90%">
</div>

// lookup the container we want the Grid to use
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGridDiv');
// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);

Self.currentCandidatesGrid =
{
    columnDefs: [
       { headerName: "Candidate", field: "candidate_name", sortable: true },
       { headerName: "Skills", field: "skills", sortable: true },
       { headerName: "Start date", field: "start_date", sortable: true }
    ],
    rowData: [],  
    pagination: true,
    paginationAutoPageSize: true,
};

Правильно ли я rowData: [], или я должен иметь rowData: <someVariable>?

Затем я вычисляю данные строки в массив, Self.currentCandidatesGridRowData.

Когда я пытаюсь Self.currentCandidatesGrid.api.setRowData(Self.currentCandidatesGridRowData); Я получаю сообщение об ошибке, показанное выше.

enter image description here

Я искал, но не могу найти работающий Plunker с использованием синтаксиса controller as.

[Dupers] 1) на вопрос "dupe" нет ответа, поэтому он бесполезен для меня
2) мой вопрос конкретно об использовании Self.xxxGrid.api.setRowData(Self.xxxGridRowData); с контроллером ` как синтаксис. Просьбы открыты. Thnaks

Ответы [ 2 ]

1 голос
/ 11 марта 2020

DEMO ag-Grid с AngularJS с использованием синтаксиса «контроллер как»

Когда загружается сценарий ag-Grid, он не регистрируется с AngularJS 1.x. Это связано с тем, что AngularJS 1.x является дополнительной частью ag-Grid, и вам нужно указать ag-Grid, что вы хотите его использовать: 

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])

Для получения дополнительной информации см.

DEMO на PLNKR 

agGrid.initialiseAgGridWithAngular1(angular);

angular.module("example", ["agGrid"])
.controller("exampleCtrl", function() {

    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    this.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
    };

})
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
html {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    overflow: auto;
}
body {
    padding: 1rem;
    overflow: auto;
}
<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/@ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>

<body ng-app="example" ng-controller="exampleCtrl as $ctrl"
      style="height: 100%">

    <div ag-grid="$ctrl.gridOptions" class="ag-theme-balham"
         style="height: 100%;">
    </div>

</body>
0 голосов
/ 11 марта 2020

Правильно ли я rowData: [], или я должен иметь rowData: <someVariable>?

Вы можете даже игнорировать это свойство в gridOptions, но разница что: если вы определите rowData как пустой массив - сетка будет обрабатывать его как «Нет строк для отображения» , но если вы не определите его, сетка покажет «Загрузка ...» - что более правильно, с отложенным запросом.

Кроме того, вы можете самостоятельно обрабатывать логи наложения c для получения более подробной информации проверьте здесь .

Теперь, как я уже говорил в комментариях

Невозможно прочитать свойство 'setRowData' из неопределенного

, эта проблема может быть вызвана использованием неправильной ссылки.

Во-первых, посмотрите и отметьте этот ответ с комментариями разработчика ag-grid.

Во-вторых, о самой проблеме: 

.controller('yourController', [function() {
  var Self = this;  // here's your controller reference

  // then you will have columns and rowData (probably) 
  // but the most important part is here
  Self.currentCandidatesGrid = {
      ... // anything that you need
     onGridReady: gridReady // major point for future api reference
  }

  function gridReady(params){
     Self.gridApi = params.api;
     Self.columnsApi = params.columnsApi;
  }

}]);

И после gridReady вы сможете использовать методы сетки API через Self.gridApi

Демо

...