最近在做一個樹節點的上下移動然後實現排序的問題。直接看圖：

實現已選查詢條件的上下移動。結合了primeng 的picklist 組件。

下面是html代碼

  <p-tabPanel header="查詢條件">
        <div class="row selfHeight" style="margin-left: 10px;">
          <div class="col-4 selfHeight" style="padding: 0px;">
            <div style="margin:0 0 10px 0">
 
所有可選查詢條件</div>
            <div style="margin: 0px 6px;width: 100%">
              <select  class="select form-control radius selfHeight"
                      style="padding:0.2rem 0.75rem;height:30px;margin-left: -6px;width: 100%"
                      (change)="changeQueryConditionSelect($event.target.value)"
 
>
                <option *ngFor="let values of selectData" value="{{values.attrGroupId}}">
                  {{values.attrGroupName}}
                </option>
              </select>
            </div>
            <p-tree [value]="leftQueryCondition" selectionMode="multiple"
 
 [(selection)]="selectLeftCondition"
                    (onNodeSelect)="queryConditionLeftNodeSelect($event)"
                    [style]="{‘height‘:‘calc(100% - 64px)‘,‘width‘:‘100%‘,‘overflow‘:‘auto‘,‘border-color‘:‘#e0e0e0‘,‘color‘:‘#333333‘,‘font-size‘:‘13px‘}">
            </p-tree>
          </div>
          <div class="col-2" style="padding: 0px;margin-top: 120px;text-align: center">
            <div style="margin-bottom: 10px">
              <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveRightCondition()">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </button>
            </div>
            <div>
              <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveLeftCondition()">
                <i class="fa fa-angle-double-left" aria-hidden="true"></i>
              </button>
            </div>
          </div>
          <div class="col-4 selfHeight" style="padding: 0px;">
            <div style="margin:0 0 10px 0">已選查詢條件</div>
            <p-tree [value]="rightQueryCondition" selectionMode="multiple" [(selection)]="selectRightCondition"
                    (onNodeSelect)="queryConditionRightSelect($event)"
                    [style]="{‘height‘:‘calc(100% - 34px)‘,‘width‘:‘100%‘,‘overflow‘:‘auto‘,‘border-color‘:‘#e0e0e0‘,‘color‘:‘#333333‘,‘font-size‘:‘13px‘}">
              <ng-template let-node pTemplate="default">
                {{node.label}}
                <select [(ngModel)]="node.symbol" type="text">
                  <option *ngFor="let values of operation" value="{{values.enumvalCode}}">{{values.enumvalName}}</option>
                </select>
              </ng-template>
            </p-tree>
          </div>
          <div class="col-2" style="padding: 0px;margin-top: 120px;text-align: center">
            <div style="margin-bottom: 10px">
              <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveUp()">
                <i class="fa fa-angle-up" aria-hidden="true"></i>
              </button>
            </div>
            <div>
              <button type="button" class="btn btn-clickStyle radius pointer" (click)="moveDown()">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </div>

      </p-tabPanel>

下面是ts代碼：

moveUp() {  //右側選只選中一個時才能移動
    if (this.selectRightCondition && this.selectRightCondition.length==1) {
      let data = this.rightQueryCondition;
      let index = 0;
      data.forEach((record, i) => {
        if (record[‘fieldCode‘] === this.selectRightCondition[0][‘fieldCode‘]) {
          return index = i;
        }
      })
      var temp;
      if (index === 0 || index > data.length - 1) {
        this.rightQueryCondition = data;
      } else {
        temp = data[index];
        data[index] = data[index - 1];
        data[index - 1] = temp;
        this.rightQueryCondition = data;
      }
    }
  }

  moveDown() {
    if (this.selectRightCondition && this.selectRightCondition.length==1) {
      let data = this.rightQueryCondition;
      let index = 0;
      data.forEach((record, i) => {
        if (record[‘fieldCode‘] === this.selectRightCondition[0][‘fieldCode‘]) {
          return index = i;
        }
      })
      var temp;
      if (index === data.length - 1 || index < 0) {
        this.rightQueryCondition = data;
      } else {
        temp = data[index];
        data[index] = data[index + 1];
        data[index + 1] = temp;
        this.rightQueryCondition = data;
      }
    }
  }

Angular 2 樹節點的上下移動問題