如何在具有延迟加载的表上使用 jQuery UI 的可排序功能?

发布于 2024-12-11 19:37:06 字数 725 浏览 0 评论 0原文

我需要创建一个表,该表使用延迟加载而不是分页来动态显示超出初始加载的内容并且可以通过 jQuery UI 的可排序功能进行排序。

延迟加载是通过检查scrollTop和scrollHeight来确定用户距离页面底部有多近来实现的。当它们足够接近时,我进行 AJAX 调用来获取另一组数据,并将其作为表行附加到表的末尾。

我在 TABLE 上实现了 jQuery UI 可排序,但问题是它不允许我将 TR 拖过原始 TABLE 中的最后一个 TR。它会记住哪个 TR 是最后一个孩子,然后阻止我超越这个范围。

下次我尝试拖动 TR 时,它知道新的结尾在哪里,但是当我加载更多内容时,我遇到了同样的问题。

我想要发生的是,当用户向下拖动 TR 时,表可以延迟加载一些新的内容数据输入,用户可以继续拖动到新的数据集,因为他们必须不断放下才能再次开始拖动,这似乎有点不方便。

我有一种感觉,这需要对可排序函数中的代码进行根本性的更改,但我希望有人可能已经找到了解决此问题的方法。

更新:我尝试使用 connectWith 选项。我没有将动态加载的行添加到同一个 TBODY 中,而是将它们放入自己的 TBODY 中,该 TBODY 也是可排序的,并使用 connectWith 选项设置新行和原始行(所有 TBODY 元素的类相同)。不幸的是,这并没有什么不同。在删除 TR 后,我仍然可以拖动整个表,但仍处于原始拖动上下文中时就不行了。这很令人沮丧,因为这不是很好的用户体验。

I need to create a table that uses lazy loading instead of paging to dynamically display content beyond the initial load and is sortable via jQuery UI's sortable functionality.

The lazy loading is implemented by checking scrollTop and scrollHeight to determine how close to the bottom of the page the user is. When they get close enough I make an AJAX call to get another set of data that I append as table rows to the end of the table.

I have jQuery UI sortable implemented on the TABLE, but the problem is that it won't let me drag a TR past the last TR in the original TABLE. It remembers which TR was the last child and then prevents me from going beyond that.

The next time I try to drag a TR it knows where the new end is, but I run into the same problem when I load more in.

What I want to happen is as the user drags a TR down the TABLE can lazy load some new data in and the user can continue to drag through to the new set of data since it seems kind of inconvenient for them to have to keep dropping in order to be able to start dragging again.

I have a feeling that this would require a fundamental change to the code within the sortable functions, but I was hoping someone may have already figured out a way to get around this.

UPDATE: I tried using the connectWith option. Instead of adding the dynamically loaded rows to the same TBODY I instead put them in their own TBODY which was also sortable and set both the new one and the original one up with the connectWith option (same class for all TBODY elements). Unfortunately that didn't work any differently. I can still drag across the whole TABLE after dropping the TR, but not while still in the original dragging context. This is frustrating since it's not a great user experience.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

黒涩兲箜 2024-12-18 19:37:06

我一周前写过 - 我自己的 jQuery 表排序器:( asc/desc)

function sortTableJquery()
 {
    var tbl =$("#tbl tr");
    var store = [];
    var sortElementIndex = parseFloat($.data(document.body, "sortElement"));

    for (var i = 0, len = $(tbl).length; i < len; i++)
    {
        var rowDom = $(tbl).eq(i);
        var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text());
          store.push([rowData, rowDom]);
    }
    store.sort(function (x, y)
    {
        if (x[0].toLowerCase() == y[0].toLowerCase()) return 0;
        if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir"));
        else return 1 * parseFloat($.data(document.body, "sortDir"));

    });
    for (var i = 0, len = store.length; i < len; i++)
    {
        $("#tbl").append(store[i][1]);
    }
    store = null;
 }

Ive written before a week - my own jQuery Table sorter : ( asc/desc)

function sortTableJquery()
 {
    var tbl =$("#tbl tr");
    var store = [];
    var sortElementIndex = parseFloat($.data(document.body, "sortElement"));

    for (var i = 0, len = $(tbl).length; i < len; i++)
    {
        var rowDom = $(tbl).eq(i);
        var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text());
          store.push([rowData, rowDom]);
    }
    store.sort(function (x, y)
    {
        if (x[0].toLowerCase() == y[0].toLowerCase()) return 0;
        if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir"));
        else return 1 * parseFloat($.data(document.body, "sortDir"));

    });
    for (var i = 0, len = store.length; i < len; i++)
    {
        $("#tbl").append(store[i][1]);
    }
    store = null;
 }
心头的小情儿 2024-12-18 19:37:06

您是否尝试过在加载后在可排序上调用 refresh新项目在?

$('#your-sortable').sortable('refresh');

jsfiddle 在这里真的很有帮助 =)

Have you tried calling refresh on your sortable after you load new items in?

$('#your-sortable').sortable('refresh');

A jsfiddle would really help here =)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文