Использование вкладок jQGrid и jQUery, как оптимизировать количество сеток

Question

У меня есть 3 разные вкладки, на которых я отображаю данные с помощью jQGrids (каждая вкладка содержит одну сетку).

Но я просто подумал, что мои сетки полностью одинаковы, только разница в том, что они используют разные URLчтобы получить данные.

Итак, у меня на каждой вкладке три одинаковых гирды только с разными URL:

First: url: '/Home/GetData?id=1' Second: url: '/Home/GetData?id=2' and Third: url: '/Home/GetData?id=3'

Так что я подумал, что, может быть, я могу объявить сетку только один раз, а затем на каждойнажмите вкладку может передать URL для загрузки данных?Таким образом, на каждой вкладке будет отображаться jQGrid из нового URL.

Может быть, у кого-то могут быть какие-то идеи по этому поводу?

Или, возможно, у кого-то могут быть лучшие идеи, как уменьшить "jQGrid copy-paste "в таком случае?

ОБНОВЛЕНИЕ 0:

Практически все работает, я имею в виду, что оно работает, но есть одна небольшая проблема, когда я переключаюсьвкладки заголовок сетки теряется ... и некоторое форматирование jqgrid.

вот мой код:

$("#tabs").tabs({
            show: function (event, ui) {

                if (ui.index == 0) {
                    //$("#Grid1").appendTo("#tab1");
                    //$("#Grid1Pager").appendTo("#tab1");

                   //When Appending only pager and grid div, header getting lost so i've append the whole grid html instead
                   $("#gbox_Grid1").appendTo("#tab1");

                   changeGrid("#Grid1", 1);
                }

                else if (ui.index == 1) {
                  //$("#Grid1").appendTo("#tab2");
                  //$("#Grid1Pager").appendTo("#tab2");

                  $("#gbox_Grid1").appendTo("#tab2");

                  changeGrid("#Grid1", 2);
                }

                else if (ui.index == 2) {
                    //$("#Grid1").appendTo("#tab3");
                    //$("#Grid1Pager").appendTo("#tab3");

                    $("#gbox_Grid1").appendTo("#tab3");

                    changeGrid("#Grid1", 3);
                }
            }
        });

function changeGrid(grid, id) {
        $(grid).jqGrid('setGridParam', {
            url: '/Home/GetData?id=' + id
        });

        $(grid).trigger('reloadGrid');
    }

ОБНОВЛЕНИЕ 1

Хорошо, я изменил код, чтобы добавить всю сетку вместодобавление сетки div и только пейджер.Так оно и работает.

Answer 1

Вы можете в основном сделать вкладки обычными кнопками, которые будут вызывать некоторую функцию, которая устанавливает новый параметр URL в сетку и перезагружает его.

Функция должна выглядеть примерно так:

function changeGrid(grid, id) {
   $(grid).jqGrid('setGridParam', {
      url: '/Home/GetData?id=' + id, page: 1
   });
   $(grid).trigger('reloadGrid');
}

Обратите внимание, что я установил для страницы значение 1. Имейте в виду, что вам может потребоваться установить столбец сортировки по умолчанию или что-то подобное в зависимости отваше решение.

ОБНОВЛЕНИЕ

Если вы действительно хотите перейти на вкладки, обработчик события 'show' можно упростить.Попробуйте это:

$("#tabs").tabs({
    show: function (event, ui) {
        var id = ui.index + 1;

        $("#gbox_Grid1").appendTo("#tab" + id);

        $("#Grid1").jqGrid('setGridParam', {
            url: '/Home/GetData?id=' + id
        });
        $("#Grid1").trigger('reloadGrid');
    }
});