如何在jqgrid中添加新的按钮/图像列
我在ASP.net MVC Web应用程序中使用JQgrid。
我可以使用formatters
添加一个名为edit的新按钮列
但是,问题是我无法获得单击按钮的行中的列值。
例如,如果我在第4行单击按钮编辑(新添加),我将需要获取该特定行的第一列的值。
我需要这个,因为我想重定向到具有该值的另一个页面并在那里进行编辑。
我无法获取该值并向其添加javascript。
请使用任何代码示例帮助解决此问题。
您不需要将click
事件处理程序绑定到列中的每个按钮。 每个绑定都占用了Web浏览器的内存和其他资源。 从内部到外部DOM元素冒泡的大多数事件(参见此处 ),鼠标单击,键盘键控,触摸touchstart和网格内部按钮上的其他事件将冒泡到网格的
元素。 jqGrid默认情况下在网格上click
事件处理程序。 它调用onCellSelect
和onCellSelect
回调并从事件处理程序触发jqGridBeforeSelectRow
和jqGridCellSelect
事件。 因此,不是在每个按钮上绑定自己的click
事件处理程序,而是使用上面列出的回调或事件中的一个。 将首先使用jqGridBeforeSelectRow
(或jqGridBeforeSelectRow
)。 如果单击按钮时没有选择相应的行,则回调是实用的。 例如,答案显示了如何validation是否需要调用所需的列。 另一个答案提供了一个非常接近您需要的例子。 还有一个答案为您提供了另一个代码片段 要查看有关该主题的更多旧答案,您可以使用以下查询 。
更新 :演示http://jsfiddle.net/ShKDX/82/是对Manuel van Rijn发布的演示的修改。 它表明了我的意思。
这是一个简单的示例,您可以如何动态地将按钮添加到jqgrid
不确定你的第一行是否是小提琴中指定的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 = "edit"; $(this).setCell(id, "edit", button); }, loadComplete: function(data) { $(".gridbutton").on('click', function(e) { e.preventDefault(); alert('Edit id: ' + $(this).data("id")); }); } });