在jqGrid中添加一行自定义按钮？

我想创建一个包含连续自定义按钮的简单表。 按下按钮时，我想弹出一个“警告”框。 我已经阅读了一些关于此的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':"in"}, {'A':1,'B':200,'status':"in"}, ], caption: "Demo of Custom Clickable Button in Row", viewrecords:true, editurl:'clientArray', }); }); 

Html代码：

编辑8/2/12 – 自从我的原帖以来，我学到了一些东西，在这里我再描述了两次尝试。

版本2：我使用onCellSelect。 这有效，但它不允许我在单元格中放置多个按钮。 另外，我通过使用本文评论之一建议的格式选项使代码更好。

 function status_button_maker_v2(cellvalue, options, rowObject){ return ""+cellvalue+"" }; 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 

标记：

 .ver2_statusbutton { color:blue;}  
simple table, ver 2:
  

版本3：我尝试使用解决方案来使用“.on”而不是弃用“.live”来解决w4ik的post 。 这会导致按钮点击触发，但我不知道如何检索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); } }); 

标记：

  .ver3_statusbutton { color:red;}  
simple table, ver 3:
  

总之，我正在努力解决在正确的时间按下按钮的问题。 在版本1中，行被选中，按钮永远不会被推送。 版本2根本不使用“按钮” – 它只处理单元格点击。 Verion 3在行选择之​​前单击按钮（错误的顺序）。

任何帮助，将不胜感激！

Answer 1

你可以在这里使用每行的动作格式化程序，并在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() { $("
", { 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('') .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 

并为此按钮编写您的点击事件。

如果这对你有用，请告诉我。