ASP.NET MVC + jqGrid

Question

Я использую jQgrid с ASP.NET MVC. У меня есть пара проблем. Я хотел бы нарисовать сетку при создании DOM, но я хотел бы загрузить данные после того, как я выберу вкладку на вкладке. Я не могу найти никакого примера для этого. Кто-нибудь пробовал это?

Я использую пользовательскую панель навигации: (”#AttachmentsGrid”). NavGrid (’# AttachmentsPager’, {edit: false, add: true, del: true, search: false});

После нескольких выборов на вкладке (пользовательский интерфейс jQuery) я вижу, что кнопки панели навигации дублируются. У меня есть одна большая проблема с выборами. Я не могу выбрать любую другую строку, кроме первой. Кто-нибудь еще сталкивался с такой же проблемой?

С наилучшими пожеланиями

Альберто

Answer 1

Чтобы нарисовать сетку на DOM готовой, но заполнить ее позже, вы можете инициализировать сетку, используя локальное хранилище данных:

datatype: "local"

Затем, когда вы выберете правильную вкладку, инициируйте запрос AJAX, чтобы получить ваши данные. Когда данные получены, вы можете сделать это, чтобы загрузить их в сетку:

        // Populate grid data
        jQuery("#myGrid").clearGridData();
        if (data != null){
            for(var i=0;i<data.length;i++){
                    jQuery("#myGrid").addRowData(data[i].id, data[i]);
                }
            }
        }

Относительно дублирования кнопок после многократного выбора вкладки. Я видел это раньше, когда инициализировал jqGrid несколько раз (т.е. IE вызывает .jqGrid каждый раз, когда выбирается вкладка). Вы не должны видеть это после выполнения вышеуказанных шагов. В противном случае, один из способов предотвратить это - отслеживать, когда инициализируется сетка, и инициализировать сетку можно только при первом выборе соответствующей вкладки:

        var initialized = false;
        jQuery('#tabs').tabs({
               show: function(event, ui) {
                   if (ui.index == 1 && !initialized){
                       initialized = true;

                       (... create your grid here ...)
                   }
               }
            });