Question

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

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

我已经在树状视图显示中映射了项目。我想做的下一件事是将这些树视图项目放入我们的可重用下拉菜单中。在此可重复使用的下拉列表中，我们有过滤器文本框。

此下拉菜单的行为是什么？

最初，当打开此下拉列表时，它具有过滤器文本框和一些建议项（不在树状视图显示中）。
当我们在过滤器框中键入内容时，将显示树视图，并从父节点到最后一个子节点进行一些智能搜索。（就像我提供的链接中的行为一样）
当我删除在过滤器框中键入的单词时，它将再次显示最初的建议项（从1号开始）。
在此树形视图中单击插入符号时，还将执行API调用，其中它将返回子节点的数据。
即使插入符号没有子节点，我也很难显示它。因为在我们的应用程序中，如果单击插入符号（执行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>

预期结果：

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

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

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

过滤器为空时，显示的项目为建议的项目。

难以实施

Caret。
如果单击插入号，则会出现子节点

实际结果：

树形视图与可重用组件分开
当我使用可重复使用的过滤器时，它不会在树视图中搜索

我想使用自定义过滤器，而不要使用ngxTreeView

0 个答案: