- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最佳答案
第一个解决方案
我使用treeControl.dataNodes.indexOf(node)对每个可见节点进行递归调用,引用节点索引
这是递归函数:
recNode( arr:any[], data:any[], index:number, maxIndex:number ):any[] {
if ( arr === undefined )
arr = [];
for ( let i = 0; i < data.length; i++ ) {
index++
if ( index === maxIndex ) return ( [ true, index, arr ] );
if ( data[i].children.length ) {
let res = this.recNode( arr, data[i].children, index, maxIndex )
index = res[1];
if ( res[0] === true ) {
arr.splice( 0, 0, ( i !== ( data.length - 1 ) ) )
return ( [ true, index, arr ] );
}
}
}
return ( [ false, index, arr ] );
}
这会返回 [ngClass]
的 true
false
值数组
然后在 html 中我这样调用该函数
<li *ngFor="let r of recNode( undefined, dataSource.data, -1, treeControl.dataNodes.indexOf( node ) )[2]; [ngClass]="{'node-arrow': r, 'node-arrow-empty': !r}" ></li>
最后我在 css 中创建了另一个名为 node-arrow-empty
无边框的类
.node-arrow-nox {
position: relative;
// min-width: 48px;
// min-height: 48px;
.node-arrow {
position: relative;
min-width: 48px;
min-height: 48px;
&:before {
content: "";
position: absolute;
top: -20px;
left: 20px;
border-left: 1px solid $copounsCount;
bottom: 0;
}
}
.node-arrow-empty {
position: relative;
min-width: 48px;
min-height: 48px;
&:before {
content: "";
position: absolute;
top: -20px;
left: 20px;
bottom: 0;
}
}
}
根据数组中的值是true
还是false
,它会在两个类之间切换html。
第二种解决方案
另一个解决方案是通过添加例如 isLast:boolean 属性来跟踪数组中的最后一个元素。当然,如果您正在处理的数据是动态的,您需要找到一种方法来动态更改该值。
一旦填充了isLast
,您将进行递归调用,它将找到当前节点级别 - 1
的前一个同级。话虽如此,您将检查两件事。第一件事是,节点类包含 n-last
(这是我给 Html 的类名,表示父数组的最后一个元素),第二件事是检索类 n-{{node -级别}}
。
通过递归(如果您不想,可以使用非递归方法)检索具有类 n-3
或 n-2 的
...到 previousElementSibling
n-0
您可以检查每个元素是否包含 n-last
类。您将 true
或 false
插入数组,就像第一个解决方案在类 node-arrow
和 node-arrow- 之间切换一样空
。
这是递归函数
dummy( el:any, arr:any[], level:number ) {
let classes = el.className;
if ( arr === undefined )
arr = [];
else {
arr.splice( 0, 0, classes.includes( 'n-last' ) );
}
let np = /(?!n-)\d+/g;
let m = classes.match( np );
let nLevel = parseInt( m[0] );
nLevel--;
if ( nLevel < 0 ) return ( arr );
while ( parseInt( el.className.match( np )[0] ) !== nLevel ) {
el = el.previousElementSibling;
}
arr = this.dummy(el, arr, nLevel);
return (arr);
}
HTML(这里只是父节点,子节点也是如此)
<mat-tree-node #refP class="parent-node {{'n-' + node.level}} " *matTreeNodeDef="let node; when: grpNode;" matTreeNodePadding matTreeNodePaddingIndent="0" cdkDrag [cdkDragData]="node" [ngClass]="{'no-child': !node.children.length, 'n-last': node.isLast}">
<span class="node-arrow-nox d-flex">
<li [ngClass]="{'node-arrow': !r , 'node-arrow-empty': r}" *ngFor="let r of dummy(refP, undefined, node.level)"></li>
</span>
<button class="node-toggle" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.filename" [disabled]="!node.children.length">
<mat-icon class="mat-icon-rtl-mirror toggle-arrow">
{{treeControl.isExpanded(node) ? 'play_arrow' : 'play_arrow'}}
</mat-icon>
</button>
<div class="node-icon icon-h-arw"></div>
<div class="node-name">{{node.isLast}}-{{node.accntCode}} <span>: :</span> {{node.name}} </div>
</mat-tree-node>
如您所见,我使用名为 #refP
的模板变量将元素传递给虚拟函数
这里是 PARENTNODE
和 CHILDNODE
声明:
export class PARENTNODE {
id: string;
isLast: boolean;
...
actAsSupplier: boolean;
}
/* Flat node with expandable and level information */
export class CHILDNODE {
constructor(
public id: string,
public isLast: boolean,
...
public actAsSupplier: boolean,
){}
}
第三种解决方案
我不会编写代码,但我会尝试解释它。
这与之前的解决方案类似,只是您可以在树更改(交换、删除、添加)数据时解析并添加一个属性,例如用 true 填充的
或 divType
false
并在 html 中这样调用它
<li *ngFor="let r of node.divType" [ngClass]="{'node-arrow': r, 'node-arrow-empty': !r}" ></li>
关于 Angular Material 扁平树父子图形表示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58184776/
我正在开发我的第一个核心数据支持的应用程序,但无法弄清楚如何正确设置 NSFetchedResultsController。我有两个实体: /-----------\ /--------
我是 javax.swing.* 包的新手,只熟悉 c#.net。我有两个 JFrame,分别是 frmLogin 和 frmMain。我想要做的只是一个像这样的简单代码: +----- C# 版本
我正在从 CoreData 迁移到 Realm...本质上我需要有两个独立的数据库,假设一个只有内存,第二个有磁盘持久性 现在在解析期间,我需要创建一个可以在给定线程中工作但与我选择的顶级 Realm
下面是我的表中的内容。 我的表格 ++++++++++++++++++++ Parent + Child ++++++++++++++++++++ C1 + G1 C1
好的,让我们设置一个场景。 场景: 您有一个内容 Controller 。该内容可能是一张照片、一篇博文等等。现在,在此内容的 html 中,您有一个 Comment Controller 。 Com
我有两个脚本 parent.sh 和 child.sh。 parent.sh 中有一个变量需要被子进程访问。我已经通过在父脚本中导出变量来实现这一点,并且该变量可用于子进程? 有什么方法可以让 chi
我见过类似但不完全相同的请求。 如果我有下表 Parent Child 1 2 1 3 4 3 5 1 6 1 5 7 8
这类似于问题 ( Finding parents in a tree hierarchy for a given child LINQ (lambda expression) )。但是,我不需要找到所
好的,所以我是 C# 做事的新手,我来自 ruby 世界。 我有一个一对多的关系(为了这个问题, parent 对 child ),出于某种原因,L2S 想要创建一个新的 parent 而不是使用
我想为我的网站创建一个完全由数据驱动的面包屑。 数据使用 MariaDB 存储,如下所示: parent_id | parent_name | child_id | child_name ——————
所以,我正在查看 Parse Anypic 教程中的代码 here 我的问题是: 有这 2 个 View Controller : @interface PAPHomeViewController :
我正在使用 CSS 处理树结构层次结构,我需要一些帮助。我想让两个父子链接起来,如果我删除字符 a,我将无法查看 CSS ::after 选择器中定义的 border-left 来自内容元素。 这是我
我对实现以下目标有点困惑1.禁用一个父div的可见性2. 但另一个代码允许子 div 可见性 http://jsfiddle.net/cbXxU/ 如果父 div 不可见或对此
我正在创建一个水平的 ul 导航栏。每个 li 元素都有不同的宽度。我想在下拉菜单中做到这一点,下拉菜单中的“子级” li 项的长度/宽度与“父级” li 项的长度/宽度相同。正在考虑使用 jQuer
我有这个问题很长时间了,我已经在网上和SO进进出出搜索,但还没有找到解决方案。我希望你能帮助我。 我有两个实体之间的父子关系,如下所示: @Entity public class Parent {
我需要在我的网页上找到一个与其他元素具有相同标签的元素,因此我需要根据子部分[parent]的标题找到xpath。 以下是网页的html代码: 基本上,我想根据上图中的 Scheduled 文本在 l
我有 2 张 table .. Adult ------------------- id ParentChild ------------------- parentID(adult's id) ch
我想创建一个函数来创建彼此具有分层关系的对象。因此,每个层对象都拥有自己的一组子层对象,并与其所有兄弟对象共享一个父对象。我不熟悉任何模式,但我想应该有一个模式可以涵盖这种情况。 //construc
我有一个父 div 和一个子 div。这里是 html Parent Child Div Js var parent = document.createElement("parent");
我正在开发一个 reactjs 应用程序 - 我正在分解一个大组件以拥有一个子组件。我在 child 中创建了一个回调函数,它将返回给 parent 。当一个复选框被选中时——子组件执行回调并返回到父
我是一名优秀的程序员,十分优秀!