我想制作一个简单的表格，其中连续包含一个自定义按钮。当按下按钮时，我想弹出一个“警报”框。我读过一些关于此的帖子，例如: this post 和 this other post ，我不明白为什么我的代码不起作用。按钮已绘制，但按下它们没有任何效果。
我在这里描述了三种尝试。
版本 1。按钮单击永远不会触发:
$(document).ready(function(){
jQuery("#simpletable").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status}
],
data:[
{'A':2,'B':100,'status':"<button onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" >in</button>"},
{'A':1,'B':200,'status':"<button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" >in</button>"},
],
caption: "Demo of Custom Clickable Button in Row",
viewrecords:true,
editurl:'clientArray',
});
});
HTML 代码:
<table id="simpletable"></table>
编辑 2012 年 8 月 2 日——自从我最初的帖子以来，我学到了一些东西，在这里我描述了另外两次尝试。
版本 2:我使用 onCellSelect。这可行，但它不允许我在一个单元格中放置多个按钮。此外，我通过使用本文评论之一建议的格式选项使代码变得更好。
function status_button_maker_v2(cellvalue, options, rowObject){
return "<button class=\"ver2_statusbutton\">"+cellvalue+"</button>"
};
jQuery("#simpletablev2").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v2}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
onCellSelect:function(rowid,icol,cellcontent,e){
if (icol==2){
alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
}else{
return true;
}
},
caption: "Demo of Custom Clickable Button in Row, ver 2",
viewrecords:true,
}); //end simpletablev2
标记:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
版本 3:我尝试使用 w4ik's post 的解决方案，使用“.on”代替已弃用的“.live”。这会导致按钮单击触发，但我不知道如何检索 rowid。 w4ik 也为此苦苦挣扎，他发帖说他解决了这个问题，但没有透露他是如何做到的。我可以选择最后一行，但这将始终引用所选的前一行，因为按钮优先。
如果我可以让它工作，我更喜欢这个解决方案。
jQuery("#simpletablev3").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v3}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
caption: "Demo of Custom Clickable Button in Row, ver 3",
viewrecords:true,
onSelectRow: function(){},
gridComplete: function(){}
}); //end simpletablev3
$(".ver3_statusbutton").on(
{
click: function(){
//how to get the row id? the following does not work
//var rowid = $("#simpletablev3").attr('rowid');
//
//it also does not work to get the selected row
// this is always one click behind:
//$("#simpletablev3").trigger("reloadGrid");
rowid = $("#simpletablev3").getGridParam('selrow');
alert("button pushed! rowid = "+rowid);
}
});
标记:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
总之，我正在努力解决在正确的时间按下按钮的问题。在版本 1 中，该行被选中，并且按钮永远不会被按下。版本 2 根本不使用“按钮”——它只是处理单元格单击。版本 3 在行选择之前单击按钮(顺序错误)。
如有任何帮助，我们将不胜感激!
最佳答案
您可以在此处对每一行使用操作格式化程序，并在 formatOptions 中将编辑和删除按钮设置为 false，如下所示:
formatoptions: {editbutton:false,delbutton:false}}
并遵循这两个演示:
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm
这些自定义按钮的点击事件会显示您的警报:
编辑
var getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
function () {
var iCol = getColumnIndexByName(grid, 'act');
$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
.each(function() {
$("<div>", {
title: "Custom",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
alert("'Custom' button is clicked in the rowis="+
$(e.target).closest("tr.jqgrow").attr("id") +" !");
}
}
).css({"margin-right": "5px", float: "left", cursor: "pointer"})
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
}
如果您检查此代码，我会尝试通过将列名称指定为“act”来找出索引值，您可以通过指定不同的列名称来获取任何其他列上的索引。
var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button
并为此按钮编写点击事件。
请告诉我这是否适合您。
关于javascript - 在 jqGrid 的行中添加自定义按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11743983/