排序时jqgrid更改光标

Question

我想在用户单击列 header 对数据进行排序时将光标更改为 wait（因为该过程需要几秒钟，在此期间没有任何变化）。

为此，我尝试在 onSortCol 事件中更改 cursor CSS 属性：

onSortCol: function (index, iCol, sortorder) {
    $("body, .ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable").css({'cursor' : 'wait'});
}

并在 loadComplete 事件中将其改回：

loadComplete: function () {
     $("body").css({'cursor' : 'default'});
     $(".ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable").css({'cursor' : 'pointer'});
}

但是没有用。在排序完成之前，浏览器似乎没有呈现光标。

知道如何进行吗？

Answer 1

我最终得到了这个解决方案：

在 jqGrid 库中查找启动排序的调用所在的位置
在此调用之前更改光标
设置超时时间让浏览器考虑更改
运行排序
恢复光标

这是在 jquery.jqgrid.src.js（版本 4.15.4）中的第 5729 行完成的：

if (iColByName != null) {
    // the $("div", this)[0].id looks like "jqgh_" + p.id + "_" + colIndex (like "jqgh_list_invdate")
    sortData.call(ts, $("div", this)[0].id.substring(5 + p.id.length + 1), iColByName, r, d, this, e);
}

我替换为：

if (iColByName != null) {
    // the $("div", this)[0].id looks like "jqgh_" + p.id + "_" + colIndex (like "jqgh_list_invdate")
    $("body").addClass('waiting');
    setTimeout(() => {
        sortData.call(ts, $("div", this)[0].id.substring(5 + p.id.length + 1), iColByName, r, d, this, e);
        $("body").removeClass('waiting');
    }, 50);
}

这里的CSSclasswaiting取自这里：

body.waiting * {
    cursor: progress;
}

排序时jqgrid更改光标

jqgrid change cursor while sorting

javascript

jquery

jqgrid

free-jqgrid