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

Question

我想制作一个简单的表格，其中包含一行中的自定义按钮。当按下按钮时，我想弹出一个“提醒”框。我已阅读了一些这方面的帖子，例如： 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> 

编辑12年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，使用 “对” 代替弃用 “.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为假像这样：

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")); 

       }); 

      } 

如果选中该代码中，我试着给列名作为“行为”找出索引值，您可以通过给不同的列中获取任何其他列的索引名称。

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 

并编写此按钮的单击事件。

让我知道这是否适用于你。