jQuery对话框中有大量数据时滚动条冻结

Posted 2023-05-08

【中文标题】jQuery对话框中有大量数据时滚动条冻结

【英文标题】：Scrollbar freezing when there is lots of data in jQuery dialog

【发布时间】：2019-05-19 20:10:59

【问题描述】：

我有一个 jQuery 对话框，它由对 ASP.net MVC 中的控制器操作的 AJAX 调用填充。此 AJAX 调用返回超过 13,000 行数据，这些数据绑定到对话框内的 table。

在 IE11 中，当我尝试滚动浏览结果时，滚动条会在几秒钟内无响应，然后响应，然后再次无响应，依此类推。它并没有真正为用户提供良好的 UI 体验。滚动条大部分保持冻结状态。我在 Chrome 中没有遇到同样的问题。

下面是我为对话框编写的代码。

$("#dialog").dialog(
  title: "title",
  width: 800,
  height: 450,
  modal: true,
  open: function(event, ui) 
    $(this).load(UrlHelper.Resolve("/ControllerName/ACtionMethodName"), function(data, status) 
      $('#ajaxSpinner').hide();
      if (status == 'success') 
        $("#dialog").html(data);
       else 
        alert('An error occurred while processing your request');
      
    );
  ,
  close: function(event, ui) 
    $(this).dialog('close');
  ,
  dialogClass: 'dialogPosition'
);

我希望我可以将问题浓缩成一个小提琴以寻求您的帮助，我不知道如何以较小的规模重现它。希望我能够解释这个问题。

【问题讨论】：

您正在加载 13,000 行数据，它会很慢。如果您想加快速度，我强烈建议您查看服务器端过滤和分页。

【参考方案1】：

您试图一次加载太多内容，请尝试对数据进行分页。

你甚至可以试试这个 jquery 无限滚动插件（jscroll）：https://jscroll.com/

【讨论】：

我们可以在 jquery 对话框中进行分页吗？

jscroll usageThe jscroll method is called on the selector for which you want your scrollable content contained within.

你可以调用你打开函数里面的插件：open: function(event, ui) ... *call the plugin*...

根据我的理解，没有人会在 JQuery 对话框中查看 13000 行数据。因此，最好只显示用户可以轻松查看和理解的数据。比如前 10 名或前 50 名的记录。如果用户想要查看更多数据，最好在网格中显示在其他页面上。一般对话框用于显示少量信息。此外，您还可以尝试修改 JQuery 代码以获得更好的性能。你可以参考下面的链接。 modernweb.com/5-things-you-should-stop-doing-with-jquery