Jqgrid 4.7 несколько кнопок в ячейках.Должен быть динамичным

Question

Возможно ли иметь несколько динамических кнопок / изображений на столбец в JQGrid 4.7?Каждая кнопка / изображение должно быть кликабельным, чтобы вызвать пользовательское модальное всплывающее окно.Это будет использоваться только для отображения данных, без редактирования вообще.Будут оценены любые примеры кода.

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

Answer 1

Free jqGrid позволяет использовать formatter: "actions" или template: "actions" в нескольких столбцах, если вам нужно:

colModel: [
    { name: "a1", template: "actions", width: 44, align: "left",
        formatoptions: { mycol: "Q1" } },
    { name: "a2", template: "actions", width: 44, align: "left",
        formatoptions: { mycol: "Q2" } },
    ...
],
actionsNavOptions: {
    editbutton: false,// don't display Edit, Save and Cancel buttons
    delbutton: false, // don't display Delete button
    custom: [
        { action: "open", position: "first",
            onClick: function (options) {
                var item = $(this).jqGrid("getLocalRow", options.rowid);
                alert("Open " + item.name + ", rowid=" + options.rowid);
            } },
        { action: "post", position: "first",
            onClick: function (options) {
                var item = $(this).jqGrid("getLocalRow", options.rowid);
                alert("Post " + item.name + ", rowid=" + options.rowid);
            } }
    ],
    posticon: "fa-lock",
    posttitle: "Confirm (F2)",
    openicon: "fa-folder-open-o",
    opentitle: "Open (Enter)",
    isDisplayButtons: function (options, rowData) {
        if (options.mycol === "Q1") {
            if (rowData.closed) { // or rowData.closed
                return { post: { hidden: true } };
            }
        } else if (options.mycol === "Q2") {
            if (parseFloat(rowData.amount) < 350) { // or rowData.closed
                return { open: { hidden: true } };
            }
        }
    }
}

В отношении editbutton: false и delbutton: false свойств actionsNavOptions вы удаляете стандарткнопки действий из соответствующих столбцов.С помощью свойства custom можно определить пользовательские кнопки, а с помощью обратного вызова isDisplayButtons можно включить новые пользовательские кнопки, включить некоторые скрытые кнопки или удалить некоторые пользовательские кнопки из столбцов.Возвращаемое значение описано в старом ответе и в вики-статье .В способе, которым вы имеете полный контроль над отображаемыми пользовательскими кнопками и над поведением onClick.

См. Пример https://jsfiddle.net/OlegKi/av7ng1u0/.