jqGrid динамически разрешает идентификатор пейджера? - PullRequest
Новая
       15

jqGrid динамически разрешает идентификатор пейджера?

4 голосов
/ 14 августа 2011

У меня 3 простых вопроса.

  1. У меня есть код, который сообщает мне, присутствует ли на странице объект jqGrid: 

    //Check if there is a jqGrid on the page and if present, reloads its data ;)
var jqGrid = $('div.ui-jqgrid-bdiv table');
if (jqGrid.length) {
    //time to reload
    $(jqGrid).trigger('reloadGrid');
}

    Я бы хотел найти элемент идентификатора пейджера, если он есть. Есть ли способ сделать это?

  2. Предположим, у меня есть собственный класс в моей таблице jqGrid: 

    <table id="myGrid" runat="server" class="customclass"></table>
<div id="myGrid_pager" runat="server"></div>

    Как я могу динамически проверять наличие пользовательского класса внутри моего jqGrid?

EDIT:

С помощью Олега я смог кодировать функцию reconfigPermissions(), которая показывает / скрывает стандартные кнопки «Добавить», «Редактировать» и «Удалить». Вот функция: 

function reconfigPermissions(gridID) {
    var enableRegistry = CanModifyRegistry();
    var ops = ['#add_' + gridID, '#edit_' + gridID, '#del_' + gridID];
    $.each(ops, function (ix, value) {
        var $td = $(value);
        if (enableRegistry === true) {
            $td.show();
        } else {
            $td.hide();
        }
    });
}

Эта функция вызывается, когда пользователь выбирает другой диапазон дат в поле со списком, определенном в другом месте страницы. Проблема заключается в следующем: если при начальной загрузке сетки пользователь имеет права на период по умолчанию (выбранный в поле со списком), все работает. Вы можете переключать диапазон дат в комбинированном списке, и кнопки появляются и исчезают правильно. К сожалению, если у пользователя нет прав на первоначально выбранный период по умолчанию (таким образом, при первом создании сетки {add: false, edit: false, del: false}) даже при переходе на период, когда у пользователя есть права, кнопки вообще не добавляются.

Это код, связанный с полем со списком change обработчик события 

$.ajax({
    url: GetBaseWSUrl() + 'MyWebService.asmx/ChangeCurrentPeriod',
    type: "post",
    dataType: "json",
    async: false,
    data: JSON.stringify({ periodID: $(this).val() }),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        //Check if there is a jqGrid on the page and if present, reloads its data
        var jqGrids = $('div.ui-jqgrid-bdiv table');
        jqGrids.each(function (ix, jqGrid) {
            var gridID = $.jgrid.jqID(jqGrid.id)
            reconfigPermissions(gridID);
            jqGrid.trigger('reloadGrid');
        });
    }
});

Есть предложения?

1 Ответ

12 голосов
/ 14 августа 2011

Вы можете найти jqGrids, существующие на странице, разными способами.Например, вы можете использовать $('table.ui-jqgrid-btable') вместо $('div.ui-jqgrid-bdiv table').Кроме того, вы не должны забывать, что это может быть больше, чем один jqGrid на странице в целом.Я рекомендую вам написать свой код, чтобы он работал со многими jqGrids страницы, даже если вы в настоящее время используете только один jqGrid на страницу.

Если вы обнаружите каким-либо образом элемент table в jqGrid, вы можетеполучить элемент DOM первой найденной сетки с jqGrids[0].jqGrid использует некоторые расширители DOM.Это добавляет дополнительные свойства grid и p.В каждом методе jqGrid проверяется, инициализирована ли сетка, проверяя, существует ли свойство grid.Свойство p дает вам все параметры jqGrid включительно p.pager.На сетке можно создать до двух пейджеров: один на верхнем краю сетки, а другой внизу (для получения дополнительной информации см. this ).Таким образом, необходимый код может выглядеть следующим образом: 

var jqGrids = $('table.ui-jqgrid-btable');
if (jqGrid.length > 0) {
    jqGrid.each(function(i) {
        if (this.grid) {
            // one more test for the jqGrid
            // jqGrid[i] is a jqGrid
            if (this.p.toppager) {
                // this.id + '_toppager' is the id of the top pager
            }
            if (this.p.pager) {
                // this.p.pager is the id of the bottom pager
            }
        }
    });
}

Чтобы проверить, имеет ли элемент table некоторый класс customclass, вы можете использовать jQuery.hasClass .

ОБНОВЛЕНО : В комментарии вы спросили меня, как скрыть или показать кнопки на панели навигации динамически.Я подготовил демонстрационную версию , которая демонстрирует это:

enter image description here

Если вы отметите кнопки, расположенные над сеткой, соответствующая кнопка на панели навигатора будет скрыта,Снятие отметки покажет соответствующую кнопку назад.

Код просто позвоните $('#add_list').hide() или $('#add_list').show(), чтобы скрыть / показать кнопку «Добавить».В этом примере последняя часть id = "add_list" - это идентификатор элемента <table>, используемого для создания сетки.Другие стандартные кнопки имеют идентификаторы, начинающиеся со следующих префиксов: 'edit_', 'view_', 'del_', 'search_', 'refresh_'.Более распространенный код, который работает, если идентификатор сетки содержит специальные символы, выглядит следующим образом: 

var grid = $("#list"),
    gid = $.jgrid.jqID(grid[0].id);

$('#cbAdd').change(function () {
    var $td = $('#add_' + gid);
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});

Чтобы найти пользовательские кнопки навигатора, добавленные с помощью navButtonAdd Я использую атрибут title: 

$('#cbChooseColumns').change(function () {
    var $td = $(grid[0].p.pager + '_left ' + 'td[title="choose columns"]');
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});
...