我在尝试在页面上设置一个“加载微调器”时遇到了一个问题,该微调器在对表进行排序时运行,特别是对于速度较慢的客户端,因为对页面进行排序可能需要长达 10 秒的时间。我可以看到 DOM 被微调器代码修改,但它不显示。我希望在排序发生之前我可以做一些事情来强制显示旋转器,当然在排序完成时停止它。
我的排序是基于'排序表.js'我已对其进行修改以处理表第一列(其中包含名称)的二次排序。
我的旋转器使用'spin.js'.
我对 jQuery 的东西还是个新手,而且这个可排序的代码相当复杂。我突出显示了下面的部分,但我的完整修改的可排序代码(目前)可以在以下位置找到'sorttable-TESTING-ONLY.js'测试 html 页面位于'仅测试-sort_and_spin.htm'.
因此,脚本在页面加载时设置一些函数(“.....”表示跳过的行):
makeSortable: function(table) { //line 75
......
headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) { //line 114
.....
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i); //line 126
// code to start/stop spinner
headrow[i].sorttable_spinner = (function(val) { //line 136
return function(val) {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (val > 0) {
var opts = {
.......
};
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
// can see spinner added to DOM but does not display...
}
}})(i);
对它们进行编码,为列标题创建一个可点击的事件处理程序:
headrow[i].sorttable_columnindex = i; //line 171
headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i],"click", function(e) { //line 176
.... does some stuff with class names, etc
this.sorttable_spinner(1); // set spinner on //line 224
.... builds array to do sort then calls sort functions
if (sort_direction == 'forward') { //line 247
row_array.sort(this.sorttable_sortfunction);
} else {
row_array.sort(this.sorttable_reversesortfunction);
}
tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) {
tb.appendChild(row_array[j][2]);
}
delete row_array;
this.sorttable_spinner(); // now stop the spinner //line 261
这一切看起来应该有效。
在带有 firebug 的 Firefox 中,我看到 DOM 加载了微调器代码,我看到它在浏览器中旋转,并且关闭微调器的行将其从 DOM 中删除。
但是,如果我不处于调试模式,只运行它,那么不会显示任何微调器?
(使用 IE10 调试甚至不显示微调器)。
我在不同的地方尝试过 .show() 但总是被告知没有可用的功能。
看到一个参考window.setTimeout( function () {...
给出单独的排序过程,但无法理解如何在这种情况下实现它。
如果有人能给我一些指示,我将不胜感激。
问候, 布莱斯 S.