我有一个动态填充TableView的ListModel我需要在“QML端”排序，最好不要替换列表中的任何元素，因为附加了相当多的逻辑几个表信号（包括一些自定义表）。
我遇到的问题是当表格超过~1k元素时，元素的移动只需要不合理的长时间（参见下面的代码）。将排序放在WorkerScript中几乎没有改善用户体验，因为用户倾向于只是一次又一次地点击，如果没有任何事情发生约0.5秒。所以我想知道的是，如果有人知道改善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
答案 0 :(得分：2)
虽然我同意 Kevin Krammer 和 xander ，但您有多种方法可以抑制绑定。
您可以使用signal.connect(slotToConnect)绑定它们并直接与signal.disconnect(slotToDisconnect)断开连接，或者使用Connections enabled - 您在开始和完成时更改的值排序。
此外，如果某些操作的时间超过 ms ，则应考虑显示一些BusyIndicator。
但我需要承认，我无法在 JS
中看到这样做的理由