0

树视图项目按预期显示，但我想使用我自己的过滤器而不是 ngx-treeview 中的过滤器（请参阅下面的链接）。

https://leovo2708.github.io/ngx-treeview/#/advanced

我已经在树视图显示中映射了项目。接下来我想要将这些树视图项放入我们的可重用下拉列表中。在这个可重复使用的下拉列表中，我们有过滤文本框。

这个下拉菜单的行为是什么？

  1. 最初打开此下拉列表时，它具有过滤器文本框和一些建议的项目（不在树视图显示中）。

  2. 当我们在过滤器框中输入一些内容时，树视图会出现并从父节点到最后一个子节点进行一些智能搜索。（就像我提供的链接中的行为一样）

  3. 当我删除我在过滤器框中键入的单词时，它将再次显示最初的建议项目（从第 1 个开始）。

  4. 同样，当在此树视图中单击插入符号时，它将执行 API 调用，其中它将返回子节点的数据。

  5. 即使它没有子节点，我也很难显示插入符号。因为在我们的应用程序中，如果单击插入符号，它将只有子节点（执行 API 调用）

我正在考虑使用 ngx 树视图中的过滤器，但我很难复制我提到的行为（从数字 1 到 5）并将其放置到我们的可重用下拉列表中

在 html `

  <ng-template #defaultHeaderTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand"  let-onCheckedChange="onCheckedChange" let-onFilterTextChange="onFilterTextChange">       
      <div *ngIf="config.hasFilter" class="row row-filter">       
        <div class="col-12">           
          <input class="form-control" type="text" [placeholder]="i18n.getFilterPlaceholder()" [(ngModel)]="filterText"   (ngModelChange)="onFilterTextChange($event)" />         
         </div>      
      </div>        

      <div *ngIf="hasFilterItems">         
        <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row row-all">          
          <div class="col-12">              <div class="form-check form-check-inline" *ngIf="config.hasAllCheckBox">            
            <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()"   [indeterminate]="item.indeterminate" />              
            <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">               
            {{i18n.getAllCheckboxText()}}             
            </label>             
          </div>             
            <label *ngIf="config.hasCollapseExpand" class="pull-right form-check-label" (click)="onCollapseExpand()">              
                <i [title]="i18n.getTooltipCollapseExpandText(item.collapsed)" aria-hidden="true" class="fa"   [class.fa-expand]="item.collapsed" [class.fa-compress]="! item.collapsed"></i>          
           </label>           
          </div>                            
      </div>      

      <div *ngIf="config.hasDivider" class="dropdown-divider"></div>   
      </div>  
    </ng-template>`

可重复使用的下拉菜单 

  <button              
    id="dropdown-button"
    dropdownToggle
    type="button"
    class="btn btn-primary dropdown-toggle text-left dropdown-button-fe" >
    {{dropdownLabel.value}}<span class="caret float-right"></span>
  </button>
  <div class="menu">
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li role="menuitem">


        <input           
          #searchInput
          type="text"
          class="form-control"
          placeholder="search.." 
          (keyup) = "treeViewFilter($event)"
          />

      </li>   
      <li class="dropdown-item disabled list-box-title-fe" aria-disabled="true">suggested items</li>

      <div *ngIf="isFullHierarchy">
      <li>

          <ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
              <div class="form-inline row-item">
                <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
                  [class.fa-caret-down]="!item.collapsed"></i>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [disabled]="item.disabled"
                    [indeterminate]="item.indeterminate" />
                  <label class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">
                    {{item.text}}
                  </label>
                 </div>
              </div>
            </ng-template>
      </li>
    </div>


      <hr class="divider-browse-fe" />
      <li class="dropdown-item disabled">
        <input type="button" class="btn btn-link link-browse-fe" value="Display the Tree view"></li>
    </ul>
  </div>
</div>

预期结果：

  1. 树视图项目显示在下拉列表中（完成）

2.1 过滤器文本（来自链接）最初显示，其下方是建议项目。当我们开始在过滤器中输入单词时，会出现树视图

2.2 或使用自定义过滤器，但行为与链接中的过滤器一样（我更喜欢但难以实现）

  1. 当过滤器为空时，出现的项目是建议的项目。

难以实施

  1. 即使没有显示子节点，插入符号也会出现。

  2. 如果单击插入符号，将出现子节点

实际结果：

  1. 树视图与可重用组件是分开的

  2. 当我使用可重复使用的过滤器时，它不会在树视图中搜索

4

0 回答 0