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

來源:互聯網
上載者:User

標籤:直接   span   class   return   code   enum   技術分享   tom   values   

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

實現已選查詢條件的上下移動。結合了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 樹節點的上下移動問題

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: