0

私は Angular Ui-gridを使用しています。その中でマルチレベルのネストを実現しようとしています。uiGrid githubですでに問題を提起している人もいます。しかし、その解決策は機能していないようです。

このように JSON を変更しました。ネストされたサブグリッドを形成しようとしています。

以下は私のコードです

  $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;
    });

および第 2 レベルのネストされた html(expandableRowTemplate1.html) は次のようになります

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

第 2 レベルのネストされたグリッドの ui-grid にデータを渡すと、undefined がスローされます。

2 つまたは 3 つ以上のレベルで Expandable UI Grid を実装することに成功した人はいますか。はいの場合は、プランカーまたはフィドルを共有してください。詳細な説明は本当に役に立ちます!

4

1 に答える 1

0

私はこれを今働いています。3 つのレベルでバインドするための適切なデータを作成したと仮定します。2 レベルのグリッドも機能していると仮定します (親グリッドの行が展開されて子グリッドが表示されます)。これを機能させるために追加した重要な部分は次のとおりです。

最上位のグリッドには、それを定義する div タグにディレクティブ ui-grid-expandable があります。これは私のhtmlビューにあります。

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

最上位のグリッドは、その gridOptions (angularJS) で expandableRowTemplate を定義します。

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

最上位グリッドの expandableRowTemplate には、別の「ui-grid」を定義する div タグが含まれ、ディレクティブ「ui-grid-expandable」があります。

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

第 2 レベルのグリッドには、データが angularJS にバインドされているときにその場で構築された subGridOptions と columnDefs があります (私にとっては $http.get() から離れています)。この時点で、第 2 レベルのグリッドに expandableRowTemplate プロパティを指定して、第 3 レベルのグリッドを展開して表示するように指示する必要があります。

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

第 2 レベル グリッドの expandableRowTemplate は、「ui-grid」を含む div タグを定義する必要があり、各行のネストされたグリッドをレンダリングするようにグリッドに指示します。展開するためのディレクティブは必要ありません (ただし、4 レベルの深さまでディレクティブを追加できます)。私のものは MultiLevelTemplate と呼ばれます。

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

各行の gridOptions と columnDefs をその場で構築している同じ angularJS ブロックで、そのレベルのデータを介して別のレベルの反復に進む必要があります。これにより、3 番目のレベルのグリッドの 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

上記のすべてを実行すると、データが正しく設定されていれば正しく動作するはずです。

于 2016-07-06T00:54:40.500 に答える