Почему данные JEasyUI загружаются крайне медленно?

Question

У меня есть страница с макетом 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 работают так медленно? Это потому, что я пытаюсь связать несколько из них по порядку? и внутренне легкие элементы управления UU очень сильно зависят от 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(){} 
});

Надеюсь это помогло

Answer 2

rownumbers="true" из-за этой опции загрузка страницы резко замедляется. Ре