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

У меня есть страница с макетом 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
person Manish Mishra    schedule 03.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Datagrid 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(){} 
});

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

person Nickey    schedule 06.05.2015