jquery.tablesorter 的 updateCache 在并非所有数据都可见时遍历可见的 <tbody> 行

Question

我需要用我传入的配置更新缓存，而不是使用可见数据作为循环的长度，因为并非所有数据都在 DOM 内，因为我在自己的自定义中有它寻呼机组件。

我正在过滤 table，每次我过滤它时，我都会通过运行 $(table).trigger('update') 更新 table 排序器，以便用户可以对他们过滤的列表进行排序（完整列表显示在每个过滤器之后的 dom 中）

当他们重置排序并返回到起始状态时，问题就出现了。

当处于起始状态时，只有几行显示（在自定义分页器组件中）

我正在阅读 https://mottie.github.io/tablesorter/docs/index.html 上的 api 文档，它说寻呼机小部件使用 updateCache 因为并非所有数据都在 DOM 中一次（有点像我在这里的用例）。

但是当我去阅读 'updateCache' 正在做的代码时，即使它允许您传入自定义配置以用于设置，它也会遍历

for ( tbodyIndex = 0; tbodyIndex < $tbody.length; tbodyIndex++ ) {

我正在尝试查看是否可以使用 table 中不存在的数据手动更新内部缓存。遍历传入的配置（我正在使用 lodash 深拷贝保存配置，这样我可以稍后使用这个起始配置来设置回但它还没有工作......但是）

api 文档说使用 $.tablesorter.updateCache( config, callback, $tbodies ); 但它对我不起作用，因为我的 tbody 数据并不全部在 DOM

我认为这就是 updateCache 最初的用途：/

感谢您的宝贵时间！

Answer 1

就把这个留在这里...

不幸的是，我不得不编辑 tablesorter 源代码以绑定到我自己的自定义事件，在那个事件中做我想做的事情

我在每个过滤器之后调用我自己的回调并且会做

$(table).trigger('update')

在每个过滤器之后允许用户对过滤后的列表进行排序

但是当他们关闭搜索并 done/reset 到第一页时...因为并非所有元素都在 DOM 我需要以编程方式更新缓存以告诉它它应该是什么是（在这种情况下，从服务器开始的 table 数据的完整列表 - 我的寻呼机是在文档准备好后添加的）

在我的例子中，当 init 块基本上运行时，缓存应该重置回其起始状态

我在这个小部件中有一些代码（enclosedGlobal 在要使用的范围内设置为 {}）到 backup/set table 时的起始配置开始，所以我们可以稍后以编程方式将缓存重置回它

$.tablesorter.addWidget({
    id: 'sortStuff',
    init: function(table, thisWidget, config, widgetOptions) {

    },
    format: function(table, config, widgetOptions, initFlag) {

      if(initFlag === true) {
          enclosedGlobal[table.id] = {
              startingConfig: cloneDeep(config),  //use lodash's cloneDeep to deep copy object so when the config is mutated it doesnt mutate our saved off starting config
              startingReference: config           //will be helpful to mutate internal config reference the tablesorter logic used (specifially `initSort`)
          }
      }

    }




})

然后在我的自定义 filterEnd 回调中，我在用户完成搜索时调用它们并将它们重置回 table

中的第一页

var nextConfig = typeof enclosedGlobal !== 'undefined' && enclosedGlobal.hasOwnProperty(table.id) && enclosedGlobal[table.id].hasOwnProperty('startingConfig') ? cloneDeep(enclosedGlobal[table.id].startingConfig) : {},
    startingReference = typeof enclosedGlobal !== 'undefined' && enclosedGlobal.hasOwnProperty(table.id) && enclosedGlobal[table.id].hasOwnProperty('startingReference') ? enclosedGlobal[table.id].startingReference : null
    callback = function() {
        //do anything after the custom event logic runs 
    };

$(table).trigger('SOMENAMESPACE-myCustomEvent', [nextConfig, startingReference, callback]);

现在进行 jquery.tablesorter 代码修改

在某个地方寻找 bindMethods 函数，其中包含以下字符串：

"sortReset update updateRows updateAll updateHeaders addRows updateCell updateComplete sorton appendCache applyWidgetId applyWidgets refreshWidgets destroy mouseup mouseleave "

并在此处添加您要触发的自定义事件。

在该代码之后，您应该会看到类似于

的代码

.bind("updateCache"...

)

在模仿它周围的代码之后添加您的绑定

.bind('SOMENAMESPACE-myCustomEvent' + namespace, function(e, nextConfig, startingReference, callback) {     
    e.stopPropagation();
    customCodeToRun(ts, this.config, nextConfig, startingReference, callback);
})

取决于您正在编辑的代码是否被缩小 lawl 第一个参数可能会改变。在未缩小的代码中，第一个参数是 ts 但在我的例子中，缩小将 ts 变成了 L 所以你必须注意这里，并且 namespace 在我的例子中被更改为t

您还需要实施 customCodeToRun 才能使用。这就是我放入的内容

function customCodeToRun(ts, currentConfig, nextConfig, startingReference, callback) {
    startingReference = $.extend(currentConfig, nextConfig);  //use $.extend to preserve the object's memory reference and mutate that objects memory/value so that the underlying internal tablesorting logic can use the updated values being set within the config from within `nextConfig`
    if(typeof callback === 'function') {
        callback();
    }

}

我遇到了很多来自 react 的问题，您在其中复制并且从不改变对象，因此请小心尝试理解内存引用。这就是 cloneDeep 一开始对我来说如此棘手和奇怪的原因，因为我必须这样做才能正确保护我的对象状态不被未来的更新改变。我使用 $.extend 逻辑来保持相同的内存引用，但使用克隆的存储关闭状态。

清理事件侦听器时需要添加到事件绑定的最后一部分。最后一次搜索 jquery.tablesorter 源代码并添加到字符串

"sortReset update updateRows updateAll updateHeaders updateCell addRows updateComplete sorton appendCache updateCache applyWidgetId applyWidgets refreshWidgets removeWidget destroy mouseup mouseleave "+"keypress sortBegin sortEnd resetToLoadState "

您之前创建的相同自定义事件，除了这部分逻辑会删除该特定事件的事件侦听器。我认为它在内部 destroy 方法逻辑中，在我们的示例中，字符串将更改为（只是为了更好）

"sortReset update updateRows updateAll updateHeaders updateCell addRows updateComplete sorton appendCache updateCache SOMENAMESPACE-myCustomEvent applyWidgetId applyWidgets refreshWidgets removeWidget destroy mouseup mouseleave "+"keypress sortBegin sortEnd resetToLoadState "

你能在里面找到吗？ wheres waldo...

希望对您有所帮助祝你好运干杯

jquery.tablesorter 的 updateCache 在并非所有数据都可见时遍历可见的 <tbody> 行

updateCache for jquery.tablesorter iterates through the visible <tbody> rows when not all data is visible

javascript

jquery

tablesorter