Угловая Ui-Grid Многоуровневое размещение

Question

Я использую Angular Ui-grid. Попытайтесь достичь многоуровневого гнездования в этом. Кто-то уже поднял вопрос в uiGrid github. Но это решение не работает.

Я изменил JSON как this. Я пытаюсь создать вложенную подсистему.

Ниже мой код

$scope.gridOptions = { 
    expandableRowTemplate: 'expandableRowTemplate.html', 
    enableGridMenu: true, 
    expandableRowHeight: 150, 
    paginationPageSizes: [5, 10, 15], 
    paginationPageSize: 5, 
    //subGridVariable will be available in subGrid scope 
    expandableRowScope: { 
     subGridVariable: 'subGridScopeVariable' 
    } 
    } 

    $scope.gridOptions.columnDefs = [ 
    { name: 'id', enableHiding: false }, 
    { name: 'name' }, 
    { name: 'age' }, 
    { name: 'address.city' } 
    ]; 

    $http.get('http://private-7a7085-getfriends1.apiary-mock.com/getfriends') 
    .success(function (data) { 
     for (i = 0; i < data.length; i++) { 
     //for(i = 0; i < 50; i++){ 
     data[i].subGridOptions = { 
      columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }], 
      data: data[i].friends, 
      expandableRowTemplate: 'expandableRowTemplate1.html', 
      enableGridMenu: true, 
      expandableRowHeight: 150 
     } 

     for (j = 0; j < data[i].friends.length; j++) { 
      data[i].subNestedGridOptions = { 
      columnDefs: [{ name: "Id", field: "id" }, { name: "Name", field: "name" }, { name: "Age", field: "id" }, { name: "Address", field: "name" }], 
      data: data[i].friends[j].friends 
      } 
     } 
     } 
     $scope.gridOptions.data = data; 
    }); 

и второго уровень вложенная HTML (expandableRowTemplate1.html) выглядит

<div ui-grid="row.entity.subNestedGridOptions" style="height:150px;"></div> 

Когда я передавать данные Ui-сетку для второго уровня вложенной сетки, он бросает не определено.

Имеет ли кто-либо успех до сих пор, чтобы реализовать расширяемую сетку пользовательского интерфейса с более чем 2 или 3 уровнями. Если да, пожалуйста, поделитесь плункером или скрипкой или подробное объяснение будет действительно полезно!

Answer 1

У меня сейчас это работает. Я предполагаю, что вы создали правильные данные для привязки на 3 уровнях. Я предполагаю, что у вас есть также сетка с 2 уровнями (строки родительской сетки расширяются, чтобы показать дочерние решетки). Вот несколько ключевых слов, которые я добавил, чтобы заставить это работать:

Сетка верхнего уровня имеет директиву, расширяющую ui-сетку в теге div, который ее определяет. Это расположено в моем html-представлении.

<div ui-grid="gridThreeLayer" ui-grid-expandable></div> 

Верхний уровень сетки определяет расширяемый элемент RowTemplate в его gridOptions (угловойJS).

$scope.gridThreeLayer = { ........ 
expandableRowTemplate: '..your path.../expandableRowTemplate.html' } 

expandableRowTemplate уровня управляющей сеткой в ​​радиолампе началу будет содержать Div тег, который определяет другую «UI-сетку» и имеет директиву «щ-решетчатый расширяемые».

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable></div> 

Сетка второго уровня имеет свои subGridOptions и columnDefs построен на лету, когда данные были связаны в angularJS (от $ http.get() для меня). В это время вам нужно указать свойство expandableRowTemplate на этой сетке второго уровня, которая сообщает ему развернуть и показать сетку третьего уровня.

for (i = 0; i < response.data.length; i++) { 
response.data[i].subGridOptions = { ..... 
columnDefs: [ ............], 

data: response.data[i].IP, // note that this is my 2nd level of data objects - yours will differ 
expandableRowTemplate: 'AngularApp/Templates/MultiLevelTemplate.html 

expandableRowTemplate сетки 2-го уровня должен определить Div тег с «UI-сетки», поручив сетки, чтобы сделать вложенную сетку для каждой строки. Он НЕ нуждается в директиве для расширения (но вы можете добавить один, чтобы пройти 4 уровня в глубину). Шахта называется MultiLevelTemplate.

<div ui-grid="row.entity.subGridOptions"></div> 

Теперь в том же angularJS блоке, где вы строите gridOptions и columnDefs каждой строки на лету, вам нужно перейти на другой уровень итераций этого уровня данных. Это позволит вам определить subGridOptions и columnDefs для сетки третьего уровня. Итак, вы находитесь в цикле «i» и начинаете цикл «x» внутри него. Обратите внимание, что при настройке источника данных он использует мои собственные 3 уровня объектов данных. Вы должны использовать свой собственный там.

for (x = 0; x < response.data[i].IP.length; x++) { 
response.data[i].IP[x].subGridOptions = { 
columnDefs: [........], 
response.data[i].IP[x].subGridOptions.data = response.data[i].IP[x].BOM; // my data 

Если вы все это сделали, оно должно работать правильно, если ваши данные настроены правильно.