javascript - jqgrid排序时改变光标

Question

当用户单击列标题对数据进行排序时，我想将光标更改为等待(因为该过程需要几秒钟的时间，期间没有任何变化)。

为此，我尝试更改 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

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

1. 在 jqGrid 库中查找启动排序的调用
2. 在此调用之前更改光标
3. 设置超时，让浏览器有时间考虑更改
4. 运行排序
5. 恢复光标

这是在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);
}

这里的 CSS 类 waiting 取自此处:https://stackoverflow.com/a/25207986/8790102

body.waiting * {
    cursor: progress;
}