Angular 2 树节点的上下移动问题
阅读原文时间:2023年07月10日阅读:3

  最近在做一个树节点的上下移动然后实现排序的问题。直接看图:

实现已选查询条件的上下移动。结合了primeng 的picklist 组件。

下面是html代码


所有可选查询条件







已选查询条件

{{node.label}}




  </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;
}
}
}