Я хочу использовать мой собственный фильтр, а не тот, что в ngxTreeView - PullRequest
Новая
       25

Я хочу использовать мой собственный фильтр, а не тот, что в ngxTreeView

0 голосов
/ 19 мая 2019

Элементы древовидной структуры отображались так, как ожидалось, но я хочу использовать свой собственный фильтр, а не фильтр в 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. древовидное представление отделено от повторно используемого компонента

  2. , когда я использовал фильтр из многоразового использования, оно не будет искать в древовидном представлении

...