2018 在 ionic 项目中用到的组件有很多，这篇文章讲一讲 ion-reorder-group 这个组件的使用。刚开始我都不知道 ionic4 中已经封装了拖拽排序的组件，也是主管告诉我的。使用了这个组件的经历告诉我：仔细读官方文档，是没错的！HTML 中使用组件，代码如下
<!– 一个排序组合一个 ion-reorder-group–>
<ion-reorder-group [disabled]=”false” (ionItemReorder)=”reorder($event)”>
<ion-item color=”tertiary” *ngFor=”let field of fieldList,let i=index”>
<ion-label>{{field.name}}</ion-label>
<!– 拖拽按钮 –>
<ion-reorder slot=”end”></ion-reorder>
</ion-item>
</ion-reorder-group>
ionItemReorder 绑定 reorder 事件，是 item 被拖拽时会被触发的事件，这个事件是 ionic 绑定在 IonReorderGroup 组件上的。记得一定要设置 disabled 属性，不然不会有拖拽按钮出现。export class HomePage {
fieldList = [{name：1}];
ngOnInit() {
let fields = [{name: “1”, type: null, jsonobject: ”, level: 0, index: 0, order: true},
{name: “2”, type: null, jsonobject: ”, level: 1, index: 0, order: true},
{name: “3”, type: null, jsonobject: ”, level: 1, index: 1, order: true},
{name: “4”, type: null, jsonobject: ”, level: 2, index: 0, order: true},
{name: “5”, type: null, jsonobject: ”, level: 2, index: 1, order: true},
{name: “6”, type: null, jsonobject: ”, level: 2, index: 2, order: true}
];
let index = [];
// 获取层次的最大值
let maxLevel = 0;
fields.forEach((item) => {
if (item.level > maxLevel) {
maxLevel = item.level;
}
});
console.log(‘mac’, maxLevel);
for (let i = 0; i < maxLevel + 1; i++) {
for (var j = 0; j < fields.length; j++) {
if (fields[j].level === i) {
index.push(j);
break;
}
}
}
// 添加层次说明
this.fieldList = [];
for (let i = 0; i < fields.length; i++) {
let j = index.indexOf(i);
if (j > -1) {
this.fieldList.push({
name: “ 第 ” + (j + 1) + ‘ 层 ’,
type: null,
jsonobject: ”,
level: fields[i].level,
index: 0,
order: false
});
}
this.fieldList.push(fields[i]);
}
if (index.length < fields.length) {
this.fieldList.push({
name: “ 第 ” + (index.length + 1) + ‘ 层 ’,
type: null,
jsonobject: ”,
level: maxLevel + 1,
index: 0,
order: false
});
}
console.log(this.fieldList);
}
reorder(ev) {
try {
if (ev.detail.to === this.fieldList.length) {
ev.detail.to -= 1;
}
// let from = this.fieldList[ev.detail.from];
// let to = this.fieldList[ev.detail.to];
if (ev.detail.from < ev.detail.to) {
this.fieldList[ev.detail.from].level = this.fieldList[ev.detail.to].level;
console.log(‘aaa’, this.fieldList);
// 添加和删除字段
this.fieldList.splice(ev.detail.to + 1, 0, this.fieldList[ev.detail.from]);
this.fieldList.splice(ev.detail.from, 1);
// this.fieldList.map((item, index) => {
// if (item.level === to.level) {
// return this.fieldList[index].index = i;
// } else if (item.level > from.level) {
// return;
// }
// });
console.log(‘bbb’, this.fieldList);
} else if (ev.detail.from > ev.detail.to) {
this.fieldList[ev.detail.from].level = this.fieldList[ev.detail.to – 1].level;
console.log(‘from’, this.fieldList[ev.detail.from]);
console.log(‘to’, this.fieldList[ev.detail.to]);
this.fieldList.splice(ev.detail.to, 0, this.fieldList[ev.detail.from]);
console.log(‘111’, this.fieldList);
this.fieldList.splice(ev.detail.from + 1, 1);
console.log(‘222’, this.fieldList);
} else {
ev.detail.complete();
return;
}
// 层次修改 (1、层次是否为空)
// let filter = [];
// this.fieldList.forEach((item, index) => {
// if (item.order === false) {
// filter.push({field: item, index: index});
// }
// });
// console.log(‘chishi’, filter);
// filter.forEach((item, index) => {
// item.field.name = ‘ 第 ’ + (index + 1) + ‘ 层 ’;
// this.fieldList[item.index] = item.field;
// });
// console.log(‘ 长度 ’,filter.length)
//
// console.log(‘ 长度 ’,this.fieldList.length)
// if (filter.length < this.fieldList.length/2) {
// this.fieldList.push({
// name: “ 第 ” + (filter.length + 1) + ‘ 层 ’,
// type: null,
// jsonobject: ”,
// level: filter.length + 1,
// index: 0,
// order: false
// });
// }
let fields = this.fieldList.filter((item) => {
return item.order === true;
});
console.log(‘chishi’, fields);
let index = [];
let maxLevel = 0;
fields.forEach((item, index, array) => {
if (item.level > maxLevel) {
maxLevel = item.level;
}
});
for (let i = 0; i < maxLevel + 1; i++) {
for (var j = 0; j < fields.length; j++) {
if (fields[j].level === i) {
index.push(j);
break;
}
}
}
console.log(‘index’, index);
// 添加层次说明
this.fieldList = [];
index.sort();
for (let i = 0; i < fields.length; i++) {
let j = index.indexOf(i);
if (j > -1) {
this.fieldList.push({
name: “ 第 ” + (j + 1) + ‘ 层 ’,
type: null,
jsonobject: ”,
level: fields[i].level,
index: 0,
order: false
});
}
this.fieldList.push(fields[i]);
}
console.log(this.fieldList);
if (index.length < fields.length) {
this.fieldList.push({
name: “ 第 ” + (index.length + 1) + ‘ 层 ’,
type: null,
jsonobject: ”,
level: maxLevel + 1,
index: 0,
order: false
});
}
console.log(this.fieldList);
ev.detail.complete();
} catch (e) {
return;
}
}
get() {
console.log(this.fieldList);
let fields=this.fieldList.filter((item)=>{
return item.order==true;
})
console.log(fields);
var levels=[];
fields.forEach((item,index)=>{
if(levels.indexOf(item.level)===-1){
// 新的 level 值, 加入到 levels
levels.push(item.level);
}
});
levels.sort();
console.log(levels);
// 改变字段的 level 和 index
levels.map((level,index)=>{
let i=0;
fields.forEach((item)=>{
if(item.level===level){
item.level=index;
item.index=i;
i++;
}
})
})
console.log(fields);
}
}