我有一个TableView，其中有一个动态填充的ListModel，我需要在“ QML端”上进行排序，最好不要替换列表中的任何元素，因为一些表信号（包括一些自定义的）。
我遇到的问题是，当表增长到超过〜1k个元素时，元素的移动只会花费不合理的长时间（请参见下面的代码）。将排序放入WorkerScript并不能改善UX，因为如果0.5s左右没有任何反应，用户往往会一次又一次地单击鼠标。因此，我想知道的是，是否有人知道一种方法来改善ListModel.move（）的性能，暂时抑制信号或对此有其他解决方案？
最好的祝福
拉格纳
示例代码：
import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
ColumnLayout {
width: 400
TableView {
id: table
Layout.fillHeight: true
Layout.fillWidth: true
model: ListModel { dynamicRoles: false }
onSortIndicatorColumnChanged: sort();
onSortIndicatorOrderChanged: sort();
TableViewColumn {
role: "num"
title: "Numeric column"
width: table.contentItem.width / 3
}
TableViewColumn {
role: "str"
title: "Text column"
width: table.contentItem.width * 2/3
}
// functionality
function sort() {
if(model.count < 2) {
console.log("No need to sort.");
return true;
}
var r = getColumn(sortIndicatorColumn).role;
var type = typeof(model.get(0)[r]);
if(type != "string" && type != "number") {
console.log("Unable to sort on selected column.");
return false;
}
switch(sortMethod.currentIndex) {
case 0: var sortFunc = _sortMoveWhileNoCache; break;
case 1: sortFunc = _sortMoveWhile; break;
case 2: sortFunc = _sortMoveAfter; break;
case 3: sortFunc = _sortSetAfter; break;
case 4: sortFunc = _sortAppendRemoveAfter; break;
default:
console.log("Unknown sort method.");
return false;
}
console.time(sortFunc.name);
sortFunc(r);
console.timeEnd(sortFunc.name);
return true;
}
// invokers
function _sortMoveWhileNoCache(r) {
console.time("sortMove");
_qsortMoveNoCache(r, 0, model.count-1);
console.timeEnd("sortMove");
}
function _sortMoveWhile(r) {
console.time("setUp");
var arr = [];
for(var i = model.count-1; i > -1; i--) arr[i] = model.get(i)[r];
console.timeEnd("setUp");
console.time("sortMove");
_qsortMove(arr, 0, arr.length-1);
console.timeEnd("sortMove");
}
function _sortMoveAfter(r) {
console.time("setUp");
var arr = [];
arr[0] = { "val": model.get(0)[r], "oldIdx": 0, "oldPrev": null };
for(var i = 1; i < model.count; i++) {
arr[i] = { "val": model.get(i)[r],
"oldIdx": i,
"oldPrev": arr[i-1] };
}
console.timeEnd("setUp");
console.time("sort");
_qsortVal(arr, 0, arr.length-1);
console.timeEnd("sort");
console.time("move");
for(i = 0; i < arr.length; i++) {
if(arr[i].oldIdx !== i) {
model.move(arr[i].oldIdx, i, 1);
for(var prev = arr[i].oldPrev;
prev !== null && prev.oldIdx >= i;
prev = prev.oldPrev)
prev.oldIdx++;
}
}
console.timeEnd("move");
}
function _sortSetAfter(r) {
console.time("setUp");
var arr = [], tmp = [];
for(var i = model.count-1; i > -1; i--) {
var lmnt = model.get(i);
// shallow clone
tmp[i] = Object.create(lmnt);
for(var p in lmnt) tmp[i][p] = lmnt[p];
arr[i] = { "val": tmp[i][r], "oldIdx": i };
}
console.timeEnd("setUp");
console.time("sort");
_qsortVal(arr, 0, arr.length-1);
console.timeEnd("sort");
console.time("set");
// set()ing invalidates get()ed objects, hence the cloning above
for(i = 0; i < arr.length; i++) model.set(i, tmp[arr[i].oldIdx]);
console.timeEnd("set");
delete(tmp);
}
function _sortAppendRemoveAfter(r) {
console.time("setUp");
var arr = [], tmp = [];
for(var i = model.count-1; i > -1; i--) {
tmp[i] = model.get(i);
arr[i] = { "val": tmp[i][r], "oldIdx": i };
}
console.timeEnd("setUp");
console.time("sort");
_qsortVal(arr, 0, arr.length-1);
console.timeEnd("sort");
console.time("appendRemove");
// append()ing does not, on win10 x64 mingw, invalidate
for(i = 0; i < arr.length; i++) model.append(tmp[arr[i].oldIdx]);
model.remove(0, arr.length);
console.timeEnd("appendRemove");
}
// sorting functions
function _qsortMoveNoCache(r, s, e) {
var i = s, j = e, piv = model.get(Math.floor((s+e)/2))[r];
while(i < j) {
if(sortIndicatorOrder == Qt.AscendingOrder) {
for(; model.get(i)[r] < piv; i++){}
for(; model.get(j)[r] > piv; j--){}
} else {
for(; model.get(i)[r] > piv; i++){}
for(; model.get(j)[r] < piv; j--){}
}
if(i <= j) {
if(i !== j) {
model.move(i, j, 1);
model.move(j-1, i, 1);
}
i++;
j--;
}
}
if(s < j) _qsortMoveNoCache(r, s, j);
if(i < e) _qsortMoveNoCache(r, i, e);
}
function _qsortMove(arr, s, e) {
var i = s, j = e, piv = arr[Math.floor((s+e)/2)];
while(i < j) {
if(sortIndicatorOrder == Qt.AscendingOrder) {
for(; arr[i] < piv; i++){}
for(; arr[j] > piv; j--){}
} else {
for(; arr[i] > piv; i++){}
for(; arr[j] < piv; j--){}
}
if(i <= j) {
if(i !== j) {
model.move(i, j, 1);
model.move(j-1, i, 1);
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
i++;
j--;
}
}
if(s < j) _qsortMove(arr, s, j);
if(i < e) _qsortMove(arr, i, e);
}
function _qsortVal(arr, s, e) {
var i = s, j = e, piv = arr[Math.floor((s+e)/2)].val;
while(i < j) {
if(sortIndicatorOrder == Qt.AscendingOrder) {
for(; arr[i].val < piv; i++){}
for(; arr[j].val > piv; j--){}
} else {
for(; arr[i].val > piv; i++){}
for(; arr[j].val < piv; j--){}
}
if(i <= j) {
if(i !== j) {
var tmp = arr[i];
arr[i] = arr[j];
arr[j] = tmp;
}
i++;
j--;
}
}
if(s < j) _qsortVal(arr, s, j);
if(i < e) _qsortVal(arr, i, e);
}
}
RowLayout {
Button {
Layout.fillWidth: true
text: "Add 1000 elements (" + table.model.count + ")"
onClicked: {
var chars = " abcdefghijklmnopqrstuvxyzABCDEFGHIJKLMNOPQRSTUVXYZ";
for(var i = 0; i < 1000; i++) {
var str = "";
for(var j = 0; j < Math.floor(Math.random()*20)+1; j++)
str += chars[Math.floor(Math.random()*chars.length)];
table.model.append({ "num": Math.round(Math.random()*65536),
"str": str });
}
}
}
Button {
text: "Clear list model"
onClicked: table.model.clear();
}
ComboBox {
id: sortMethod
Layout.fillWidth: true
editable: false
model: ListModel {
ListElement { text: "Move while sorting, no cache" }
ListElement { text: "Move while sorting" }
ListElement { text: "Move after sorting" }
ListElement { text: "Set after sorting" }
ListElement { text: "Append and remove after sorting" }
}
}
}
}
当使用Qt-win10-x64-mingw的5k元素运行以上命令时，清除每种排序方法之间的列表，我得到以下结果（_sortSetAfter比_sortMoveWhile [NoCache]快20倍）
// num
sortMove: 3224ms
_sortMoveWhileNoCache: 3224ms
// str
sortMove: 3392ms
_sortMoveWhileNoCache: 3392ms
// num
setUp: 20ms
sortMove: 4684ms
_sortMoveWhile: 4704ms
// str
setUp: 16ms
sortMove: 3421ms
_sortMoveWhile: 3437ms
// num
setUp: 18ms
sort: 15ms
move: 4985ms
_sortMoveAfter: 5018ms
// str
setUp: 8ms
sort: 20ms
move: 5200ms
_sortMoveAfter: 5228ms
// num
setUp: 116ms
sort: 21ms
set: 27ms
_sortSetAfter: 164ms
// str
setUp: 63ms
sort: 26ms
set: 25ms
_sortSetAfter: 114ms
// num
setUp: 20ms
sort: 19ms
appendRemove: 288ms
_sortAppendRemoveAfter: 328ms
// str
setUp: 22ms
sort: 26ms
appendRemove: 320ms
_sortAppendRemoveAfter: 368ms
最佳答案
尽管我同意Kevin Krammer和xander的观点，但您还是可以通过多种方法来取消绑定。
可以将它们与signal.connect(slotToConnect)绑定在一起，然后直接与signal.disconnect(slotToDisconnect)断开连接，或者将Connections与enabled值一起使用，以更改排序的开始和完成时间。
此外，当某些操作花费的时间超过几毫秒时，您应该考虑显示一些BusyIndicator。
但是我需要承认，我看不出在JS中这样做的理由
关于javascript - ListModel.move()非常慢，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42250246/