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

【问题标题】：Scrollbar freezing when there is lots of data in jQuery dialogjQuery对话框中有大量数据时滚动条冻结
【发布时间】：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 行数据，它会很慢。如果您想加快速度，我强烈建议您查看服务器端过滤和分页。

标签： javascript jquery jquery-ui internet-explorer jquery-ui-dialog

【解决方案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