Пользовательский элемент ввода jqGrid нуждается в дескрипторе к родительской таблице

Question

Я использую jqGrid для создания собственного встроенного виджета на странице. Соответствующая часть настройки jqjGrid:

  colModel:[  {
         // Other columns removed.
    {name:'ship',index:'ship', width:90, editable: true, sortable: false, 
            edittype: "custom",
            editoptions:{ custom_element: customElement, 
                            custom_value: customValue} }
    ], 

И моя функция обратного вызова:

function customElement(value, options) {
    var a = $("<input>").attr({ 
                type: 'text', 
                size: 2,
                value: value,
                style: 'float: left'
        }).add(
            $("<span>").attr({ 
                style: 'float: left; margin-top: 2px;',
                'class': 'ui-icon ui-icon-search'
        }).click(function() {
                    // My custom function here.
           })
        ).appendTo($("<div>"));

    return a;
}

Это все работает правильно.

Однако я создаю библиотеку для управления несколькими таблицами jqgrid на странице. Я хотел бы использовать одну и ту же функцию для создания пользовательских элементов на нескольких из этих таблиц. Проблема в том, что этой конкретной функции click() необходимо знать, с какой таблицей jquery она имеет дело.

Я могу получить идентификатор таблицы хакерским способом в начале customElement и передать его в замыкании функции:

var fieldID = options.id;
var rowID = fieldID.replace(/_.*/, "");
var containingTable = $("#" + rowID + "_id").closest("table");

Но это предполагает, что столбец "id" существует в текущем jqGrid, и это более ранний (левый) столбец. Я не могу использовать столбец "корабль", потому что он еще не был создан. Я не могу предположить, что есть другие строки в таблице, у которых также был бы столбец "ship".

Как я могу в обработчике custom_element надежно получить дескриптор "вызывающей" таблицы?

Answer 1

Я согласен, что это проблема в текущем коде jqGrid. Нет простого и элегантного способа получить идентификатор сетки, для которой создан элемент управления.

Один способ, который вы уже предложили. Я могу предложить вам еще одну версию, чтобы получить идентификатор «таблицы вызовов».

Пользовательский элемент может использоваться для любого режима редактирования: встроенного редактирования, редактирования формы и редактирования ячейки. click дескриптор получает Объект события e

.click(function(e) {
    // My custom function here.
})

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

.click(function(e) {
    var $grid = $(e.target).closest('table.ui-jqgrid-btable');
    ...
})

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

.click(function(e) {
    // you can do the following
    var $t = $(e.target).closest('table.EditTable'),
        tid = $t.attr('id'); // id=TblGrid_list
    if (typeof tid === "string" && tid.substr(0, 8) === 'TblGrid_') {
        var gridId = tid.substr(8);
    }
    var grid = $('#' + $.jgrid.jqID(gridId));

    // or the following
    var $f = $(e.target).closest('form.FormGrid'),
        fid = $f.attr('id');   // id=FrmGrid_list
    if (typeof fid === "string" && fid.substr(0, 8) === 'FrmGrid_') {
        var grid_id = tid.substr(8);
    }
    var mygrid = $('#' + $.jgrid.jqID(grid_id));
    ...
})

В приведенном выше коде используется тот факт, что форма редактирования содержит два элемента, идентификаторы которых будут построены на основе идентификатора сетки: элемент <table> внутри формы редактирования имеет идентификатор = "TblGrid_list", если идентификатор сетки = "список" и элемент <form> имеет идентификатор = "FrmGrid_list".

Использование $('#' + $.jgrid.jqID(gridId)) более безопасно, чем $('#' + gridId), поскольку оно дает правильные результаты в случае, когда идентификатор сетки содержит метасимволы . Функция jqID очень проста (см. здесь ). Это просто экранирование мета-символов , используемых в селекторе jQuery.