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

Question

我有一个带有 jEasyUI 布局的页面，然后有 4 个 jEasyUI 数据网格和一个属性网格，它们根据鼠标在特定点上的单击来绑定(bind)和取消绑定(bind) 2 或 3 行数据(不同网格不同) 。

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

这就是我绑定(bind) 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 网格执行速度这么慢？是因为我试图将其中多个依次绑定(bind)吗？并且内部 easyUI 控件极度依赖 setTimeout ？

请帮忙..

Answer 1

EasyUI datagrid 有 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(){} 
});

希望对你有帮助