angularjs ng-grid:行之间的父子关系(隐藏/显示行) [英] angularjs ng-grid: parent child relations between the rows (hide/show rows)

问题描述

我正在尝试使用预定义的隐藏行来实现渲染 ng-grid，并且在某些特定事件中我想显示它们.我正在尝试模拟行之间的父子关系，但所有行都将以通常的方式呈现和放置.

I'm trying to implement rendering the ng-grid with predefined hidden rows and on some particular event I want to show them. I'm trying to simulate kind of parent-children relation between rows, but all rows will be rendered and placed in usual manner.

默认情况下，子"行将呈现为折叠"

By default the "child" rows will be rendered as "collapsed"

当点击父项时，子行将显示为展开

When the parent item is clicked the children rows will be shown as expanded

我正在尝试使用 gridOptions rowTemplate 设置找到一些解决方案，但我希望有人已经遇到过这种问题，也许您已经解决了它并且如果您能分享您的想法/解决方案，将会非常有帮助.

I'm trying to find some solutions with gridOptions rowTemplate settings, but I hope somebody has already faced with this kind of problem and maybe you have already solved it and it would be very helpful if you can share your ideas/solutions.

或者如果这是一个新问题，解决它的最佳方法是什么?

Or if it's a new issue, what will be the best way to solve it?

谢谢

推荐答案

我为 id、parentId 和扩展的模型添加了一些字段.在 ng 单击切换行时，它调用 toggleExpansion 设置行的展开状态.ng-show 根据展开的标志决定是否显示一行.

I added a few fields to the model for id, parentId, and expanded. On ng-click of the toggle row, it calls toggleExpansion to set the expanded state for the row. ng-show determines whether to show a row based on the expanded flag.

我做了一个Plunker来演示:http://plnkr.co/edit/fOMMXePQhWAF4DOnF3dW?p=preview

I made a Plunker to demonstrate: http://plnkr.co/edit/fOMMXePQhWAF4DOnF3dW?p=preview

这里有一些相关问题的链接.请参阅第二个链接中有关行高 css 解决方案的注意事项.

Here are some links to related questions. See the caveats about the row height css solution in the second link.

如何让 ng-grid 隐藏某些行

Angular ng-grid 行高

这篇关于angularjs ng-grid:行之间的父子关系(隐藏/显示行)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！