我想制作一个简单的表，其中包含一行自定义按钮。当按下按钮时，我想弹出一个“警告”框。我已经阅读了一些关于此的文章，我不明白为什么我的代码无法正常工作。绘制了按钮，但按下按钮无效。

我在这里描述了三种尝试。

版本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>

编辑8/2/12-自从我的原始文章以来，我已经学到了一些东西，在这里我描述了另外两次尝试。

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

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的发布，使用“ .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完全不使用“按钮”-只是处理单元格的单击。Verion
3在行选择之​​前（错误顺序）单击了按钮。

任何帮助，将不胜感激！