Question

在JQGrid 4.7中每列是否可以有动态的多个按钮/图像？每个按钮/图像应可单击以调出自定义模式弹出窗口。这将仅用于显示数据，完全不进行编辑。任何代码示例将不胜感激。

以下是示例视觉效果： Dynamic buttons

Answer 1

如果需要，免费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的{{1}}和delbutton: false属性，您从相应的列中删除了标准操作按钮。通过actionsNavOptions属性，可以定义自定义按钮，通过回调custom，可以包含新的自定义按钮，可以包含一些隐藏的按钮，也可以从列中删除一些自定义按钮。的返回值在the old answer和the wiki article中进行了描述。通过这种方式，您可以完全控制显示的自定义按钮和onClick行为。

请参见示例https://jsfiddle.net/OlegKi/av7ng1u0/。

Jqgrid 4.7单元格中的多个按钮。应该是动态的

1 个答案: