Можно ли выбрать / щелкнуть строку нижнего колонтитула в jqgrid?

У меня есть jqgrid, в котором есть основные строки и строка нижнего колонтитула (с загруженными пользовательскими данными), а затем средство форматирования, которое изменяет данные в ячейках, чтобы их можно было связать. По ячейкам в основном теле можно щелкнуть, и событие onCellSelect зафиксирует щелчок. Однако нажатие на данные в строке нижнего колонтитула не вызывает события onCellSelect. Как зафиксировать событие выбора / щелчка в строке нижнего колонтитула? Ниже приведен сценарий для jqgrid.

$('#jqgSummaryResults').jqGrid({
        datatype: 'json',
        mtype: 'GET',
        url: 'some action',
        postData: { 'criteria': function () {
           some function}},
        rowNum: 100,
        rowList: [],
        pager: '#jqgpSummaryResults',
        viewrecords: true,
        sortorder: 'asc',
        sortname: 'DateField',
        width: 1250,
        height: 350,
        shrinkToFit: true,
        gridview: true,
        footerrow: true,
        userDataOnFooter: true,
        onCellSelect: function (rowid, iCol, cellcontent, e) {
            var selectedDate = rowid;
            savedMailDueDateString = rowid;
            var selectedColumn = iCol;
            ...
        },
        loadComplete: function (data) {
            ...
        },
        colNames: ['DateField',
                    'Total Jobs',
                    ...
                    '% Not Mailed'],
        colModel: [
                    { name: 'DateField', index: 'DateField', align: 'left' },
                    { name: 'TotalJobs', index: 'TotalJobs', align: 'left', formatter: hyperlinkColumnFormatter },
                    ...
                    { name: 'PercentNotMailed', index: 'PercentNotMailed', align: 'left', formatter: hyperlinkColumnFormatter },
                    ]
    }).navGrid('#jqgpSummaryResults', {
        excel: false,
        edit: false,
        add: false,
        del: false,
        search: false,
        refresh: false
    });

Спасибо за помощь.


user-data jqgrid
person William Stiff    schedule 09.01.2013    source источник
comment
Вы решили эту проблему?   -  person Mark    schedule 17.03.2013
comment
Не могли бы вы отметить ответ как правильный, если ваша проблема была решена.   -  person Mark    schedule 20.03.2013
comment
@Gill Bates: Было бы вежливо написать комментарии к ответам.   -  person Oleg    schedule 21.03.2013
comment
@Oleg Извините, у меня просто не хватает времени, и мое внимание в настоящее время выходит за рамки этой проблемы, но я проверю сообщения, как только смогу.   -  person Gill Bates    schedule 21.03.2013

Ответы (3)


arrow_upward
2
arrow_downward

Хотя я не видел никакого способа, чтобы jqGrid отвечал на выбор (даже не кажется, что этот нижний колонтитул выбирается) или щелчок. Строка нижнего колонтитула определяется классом ui-jqgrid-sdiv. Вы можете прикрепить обработчик события щелчка, как показано ниже.

$('.ui-jqgrid-sdiv').click(function() {alert('Bong')});

Изменить: в ответ на вопрос Джилла Бейтса добавить событие нижнего колонтитула, но только в одной ячейке, селектор будет:

$('.ui-jqgrid-sdiv').find('td[aria-describedby="GridName_ColumnName"]').click(function() { alert("Bong");});

GridName_ColumnName - это формат для всего нижнего колонтитула, т. Д., Описанного aria, и вы можете увидеть точное имя с помощью инспектора элементов firebug (или любого из его эквивалентов).

person Mark    schedule 10.01.2013
comment
onCellSelect устанавливает один click обработчик событий для всех элементов тела jqGrid. Таким же образом можно использовать исходную конструкцию $('.ui-jqgrid-sdiv').click(function(e){...}) как замену onCellSelect во всем нижнем колонтитуле. var $td = $(e.target).closest("td"); получить <td> нажатой ячейки нижнего колонтитула. var iCol = $.jgrid.getCellIndex($td); или просто var iCol = $td[0].cellIndex; получить индекс столбца выбранной ячейки. Имя столбца - $('#jqgSummaryResults').jqGrid("getGridParam", "colModel")[iCol].name. Так что я до сих пор считаю, что даже оригинальные $('.ui-jqgrid-sdiv').click дают правильный ответ. - person Oleg; 17.03.2013
comment
@Oleg Cool, мне нужно проверить селектор jQuery closest, так как у меня никогда не было возможности его использовать. Олег еще раз, я искренне ценю глубину, которую вы вкладываете в свои ответы, поскольку это дает мне основу и хлебные крошки, чтобы продолжить исследование концепций, узнать и стать лучше. - person Mark; 18.03.2013
comment
Пожалуйста! Ответ, еще один или этот предоставляют примеры описанного подхода. Поэтому я по-прежнему считаю, что ваш исходный ответ был правильным, хотя в нем нет дополнительных деталей реализации. С наилучшими пожеланиями! - person Oleg; 18.03.2013

arrow_upward
1
arrow_downward

jqGrid регистрирует click событие в главном <table> гриде, но не всегда вызывает onCellSelect. Прежде всего (см. здесь) он проверяет некоторые дополнительные условия и затем возвращает (игнорируя событие click), если условия не выполняются. Например, если щелкнуть заголовки группировки сетки, обратный вызов onCellSelect не будет обработан.

Проблема с строкой нижнего колонтитула, поскольку она существует вне сетки. Основной элемент <table> помещается внутри div.ui-jqgrid-bdiv, но нижний колонтитул находится внутри другой таблицы, которая находится внутри div.ui-jqgrid-sdiv. Можно изучить HTML-структуру jqGrid с помощью инструментов разработчика Internet Explorer, Google Chrome, Firebug или других. Можно будет увидеть примерно следующее

введите описание изображения здесь

Главный элемент <table> (<table id="list"> на рисунке выше и который получает класс «ui-jqgrid-btable») и другой элемент таблицы с нижним колонтитулом (который получает класс «ui-jqgrid-ftable») являются отдельными .

Итак, первый ответ Марка на ваш вопрос был правильным. Если на странице есть несколько сеток, можно указать нижний колонтитул конкретной сетки, используя

var $grid = $('#jqgSummaryResults'); // one specific grid

.... // here the grid will be created

$grid.closest(".ui-jqgrid-view").find(".ui-jqgrid-sdiv").click(function() {
    // do in case of the footer is clicked.
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td); // or just $td[0].cellIndex,
        colModel = $grid.jqGrid("getGridParam", "colModel");

   // $td - represents the clicked cell
   // iCol - index of column in footer of the clicked cell
   // colModel[iCol].name - is the name of column of the clicked cell
});

P.S. В старом ответе описаны многие другие элементы сетки. Описание неполное, но, вероятно, может быть полезно.

person Oleg    schedule 15.03.2013
comment
@GillBates: Добро пожаловать! Если вы присудите награду за мой ответ, вы можете принять ответ Марка, потому что его ответ был правильным, но не содержал достаточно подробностей. - person Oleg; 22.03.2013
comment
Я не автор вопроса, я просто добавил награду :) - person Gill Bates; 22.03.2013

arrow_upward
0
arrow_downward

Вот небольшая реализация этой проблемы, я новичок в jquery и jqgrid, но у меня была такая же проблема, и благодаря двум сообщениям выше @Oleg и @Mark я реализовал что-то вроде этого:

// Raport1Grid - имя моей jqgrid
// endusers, adminusers, decretusers - имя моих строк в colModel
// Raport1Grid_endusers - GridName_ColumnName

var endUsers = $("[aria-describedby='Raport1Grid_endusers']").click(function(){
    //remove previous style of selection
    $('.ui-jqgrid-ftable').find('.selecteClass').removeClass('selecteClass');
    //set selection style to cell
    $(endUsers).addClass('selecteClass');    
});

// Также можно получить значение selectedCell

 var qwer = $("[aria-describedby='Raport1Grid_endusers']").text();
 alert(qwer);

Демо здесь http://jsfiddle.net/Tobmai/5ju3py83/

person Nazar Iaremii    schedule 14.01.2015