为什么 JEasyUI 数据网格加载速度非常慢？答案

【问题标题】：Why JEasyUI datagrids load drastically slow?为什么 JEasyUI 数据网格加载速度非常慢？
【发布时间】：2015-02-03 23:11:52
【问题描述】：

我有一个带有 jEasyUI 布局的页面，然后我有 4 个 jEasyUI 数据网格和一个属性网格，它们根据鼠标单击特定点而与 2 或 3 行数据（不同的网格不同）绑定和解除绑定.

所以基本上我需要根据可以通过鼠标单击执行的选择在这些网格中显示不同的行集。但是整个绑定过程太慢了，以至于整个浏览器似乎挂了几秒钟，让我可以进行另一个事件（加载新的行集）。

这就是我绑定 jEasyUI 网格的方式：

$('#gridId1').datagrid({ 
     data: data, 
     onEndEdit: function(){}, 
     onAfterEdit: function(){}, 
     onBeforeEdit:function(){} 
});

#gridId1 的定义如下：

<table border="0" id="gridId1" class="easyui-datagrid" style=""
                   data-options="singleSelect:true,collapsible:true,showHeader:false">
   <thead>
        <tr>
          <th width="90%" data-options="field:'Name'">Name</th>
          <th width="10%" field="action" formatter="formatAction">Action</th>
        </tr>
   </thead>
</table>

而典型的data json 是这样的：

var data = {'total':2,'rows':[{Name:'Dummy1'},{Name:'Dummy2'}]}

jEasyUI 版本 - 1.4.1

为什么 jEasyUI 网格执行如此缓慢？是因为我试图一个接一个地绑定它们中的多个吗？并且内部easyUI控件非常依赖setTimeout？

请帮忙..

【问题讨论】：

标签： javascript settimeout jquery-easyui

【解决方案1】：

EasyUI 数据网格有 2 种加载方式 (http://www.jeasyui.com/documentation/datagrid.php) 一种方法是通过 html，另一种方法是通过 javascript。在您的情况下，我认为您需要 javascript 初始化。现在你同时使用这两种方式，数据网格被初始化了两次。

我的意思是你应该删除

class="easyui-datagrid"

和

data-options="singleSelect:true,collapsible:true,showHeader:false"

然后在 javascript 部分你应该像这样初始化数据网格：

$('#gridId1').datagrid({ 
     data: data,
     singleSelect:true,
     collapsible:true,
     showHeader:false,
     onEndEdit: function(){}, 
     onAfterEdit: function(){}, 
     onBeforeEdit:function(){} 
});

希望对你有帮助

【讨论】：