时间戳

首页 > 解决方案 > jqgrid在排序时更改光标

javascript - jqgrid在排序时更改光标

问题描述

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

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

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

但它不起作用。似乎浏览器在排序完成之前没有呈现光标。

知道如何进行吗？

标签： javascriptjqueryjqgridfree-jqgrid

解决方案

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

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

推荐阅读