在jqGrid中的行中添加自定义按钮

Question

我想制作一个简单的表，在一行中包含一个自定义按钮。按下按钮时，我想弹出一个"提醒"框。我读过一些关于这方面的帖子，例如：这个帖子和我不明白为什么我的代码不起作用。按钮是画出来的，但按下按钮没有效果。

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

版本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的帖子的解决方案，使用".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在选择行之前点击按钮（顺序错误）。

任何帮助都将不胜感激！

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() {
                        $("<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

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

让我知道这是否适合你。