我有一个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)断开连接,或者将Connectionsenabled值一起使用,以更改排序的开始和完成时间。

此外,当某些操作花费的时间超过几毫秒时,您应该考虑显示一些BusyIndicator

但是我需要承认,我看不出在JS中这样做的理由

关于javascript - ListModel.move()非常慢,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42250246/

10-09 23:25