Question

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

为此，我尝试在cursor事件中更改onSortCol 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的{{1}}（版本4.15.4）中完成的：

我替换为：

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);
}

这里是CSS类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); }的来源：https://stackoverflow.com/a/25207986/8790102

waiting

jqgrid排序时更改光标

1 个答案: