Почему JEasyUI datagrids загружается значительно медленнее?

Question

У меня есть страница с компоновкой jEasyUI, а затем у меня есть 4 jEasyUI datagrids и одна сетка свойств, которые связаны и несвязаны с 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?

Пожалуйста, помогите ..

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" 

Затем в яваскрипта части вы должны инициализировать DataGrid так:

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

Я надеюсь, это помогло