如何在 jqgrid 中添加新的按钮/图像列

How to add a new column of buttons/images in jqgrid

本文关键字：按钮 图像 添加 jqgrid      更新时间：2023-09-26

我在MVC Web应用程序中使用JQgrid ASP.net

我能够使用formatters添加一个名为编辑的新按钮列

但是，问题是我无法获取单击按钮的行中的列的值。

例如，如果我单击第 4 行上的按钮编辑（新添加），我将需要获取该特定行的第一列的值。

我需要这个，因为我想重定向到具有该值的另一个页面并在那里进行编辑。

我无法获取该值并向其中添加javascript。

请通过任何代码示例对此提供帮助。

这是一个简单的示例，如何将按钮动态添加到jqgrid。

http://jsfiddle.net/ShKDX/1/

不确定第一行是否是小提琴中指定的 id，但您可以修改它以使用 afterInsertRow 函数中的正确数据

var data = [
    {id: 1, text: 'row1'},
    {id: 2, text: 'row2'},
    {id: 3, text: 'row3'},
    {id: 4, text: 'row4'},
    {id: 5, text: 'row5'},
];
$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Id', 'Text', 'edit'],
    colModel: [
        { name: 'id', index: 'id', sorttype: "int" },
        { name: 'text', index: 'text' },
        { name: 'edit', index: 'edit', align: 'center', sortable: false, width: '40px' }
    ],
    caption: "Custom buttons",
    data: data,
    afterInsertRow: function(id, currentData, jsondata) {
        var button = "<a class='gridbutton' data-id='"+id+"' href='#'>edit</a>";
        $(this).setCell(id, "edit", button);
    },
    loadComplete: function(data) {
        $(".gridbutton").on('click', function(e) {
           e.preventDefault();
           alert('Edit id: ' + $(this).data("id"));
        });
    }
});

不需要click事件处理程序绑定到列中的每个按钮。每个绑定都会占用 Web 浏览器的内存和其他资源。从内部到外部 DOM 元素冒泡的大多数事件（见此处）、鼠标单击、键盘键下、触摸触摸启动和网格内按钮上的其他事件将冒泡到网格的 <table> 元素。默认情况下，jqGrid 寄存器click网格上的事件处理程序。它调用beforeSelectRow，onCellSelect回调，并从事件处理程序触发jqGridBeforeSelectRow和jqGridCellSelect事件。因此，与其在每个按钮上绑定自己的 click 事件处理程序，不如使用上面列出的回调或事件中的一个即可。 beforeSelectRow（或jqGridBeforeSelectRow）将首先使用。如果您单击按钮的内容没有选择相应的行，则回调是实用的。例如，答案显示了如何验证是否调用了所需的列。另一个答案提供了一个非常接近您需求的示例。再有一个答案会给你另一个代码片段。要查看更多我关于该主题的旧答案，您可以使用以下查询。

更新：演示 http://jsfiddle.net/ShKDX/82/是对Manuel van Rijn发布的演示的修改。它说明了我的意思。

相关文章：