获得从jqGrid的按钮行数据

Question

这里是我填的jqGrid：

jQuery("#responseMessages").jqGrid(
            'addRowData', 
            i+1, 
            { 
            distance:messages[i].distance, 
            age:messages[i].age, 
            message:messages[i].message, 
            messageId:messages[i].messageId, 
            report:reportBtn 
            } 
           ); 

现在reportBtn实际上是HTML标记，因此在最后一栏放置一个按钮，让用户报告的消息，这里的标记为：

var reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' onclick=\"\" />"; 

当我点击报告，我希望它给我从该行的MESSAGEID，这是在（MESSAGEID是隐藏的列）。

我该怎么做？

谢谢！

编辑：

function GetMessages() 
     { 
      $.ajax(
      { 
       type: "POST", 
       url: "<%= Url.Action("GetMessages", "Home") %>", 
       success: function (result) { 
        var messages = result; 
        if (messages.length == 0) 
        { 
         $('#noMessagesAlert').show(); 
        } 
        else 
        { 
         $('#noMessagesAlert').hide(); 
         createGrid(messages); 
        } 
       }, 
       error: function (error) { 

       } 
      }); 
     } 

function createGrid(messages) 
     { 
      var myGrid = 
       jQuery("#responseMessages"), 
       reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />", 
       mydata = messages, 
       getColumnIndexByName = function(grid,columnName) { 
        var cm = grid.jqGrid('getGridParam','colModel'); 
        for (var i=0,l=cm.length; i<l; i++) { 
         if (cm[i].name===columnName) { 
          return i; // return the index 
         } 
        } 
        return -1; 
      }; 

      myGrid.jqGrid({ 
       data: mydata, 
       datatype: 'local', 
       height: 'auto', 
       colModel: [ 
        { name:'distance', index:'distance', label:'Distance', width:100 }, 
        { name:'age', index:'age', label:'Age', width:75 }, 
        { name:'message', index:'message', label:'Message', width:500 }, 
        { name:'messageId', index:'messageId', key:true, hidden:true }, 
        { name:'report', index:'report', label: 'Report', width:100, 
         formatter:function() { return reportBtn; } } 
       ], 
       loadComplete: function() { 
        var i=getColumnIndexByName(myGrid,'report'); 
        // nth-child need 1-based index so we use (i+1) below 
        $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) { 
         var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow"); 
         var x=window.confirm("Are you sure you want to report this message?") 
         if (x) 
         { 
          reportMessage(tr[0].id); 
         } 
         e.preventDefault(); 
        }); 
       }, 
       rowNum:25, 
       rowList:[10,25,50], 
       pager: '#pager' 
      }); 
     } 

因此，这里的代码经过的路径。 GetMessages从按钮单击被调用，然后如果它返回任何东西，createGrid被调用传递到返回的消息列表中。

这是第一次完美的作品。现在，如果我再次点击同一个按钮，网格不会更新它的数据（这应该是不同的，因为不同的数据从服务器返回）。它只是保持不变。

为什么？

Answer 1

您可以通过多种方式实现您的需求。我建议使用我在the answer中描述的方式。它使用unobtrusive JavaScript风格。此外，因为您使用addRowData和i+1值，我怀疑您在循环中填充网格，循环中可能会有很多行，速度很慢。最好是使用的jqGrid

var myGrid = jQuery("#list"), 
    reportBtn = "<input style='height:22px;width:100px;' type='button' value='Report' />", 
    mydata = [ 
     {messageId:"m10", message:"Bla bla", age:2, distance:123}, 
     {messageId:"m20", message:"Ha Ha", age:3, distance:456}, 
     {messageId:"m30", message:"Uhhh", age:2, distance:789}, 
     {messageId:"m40", message:"Wauhhh", age:1, distance:012} 
    ], 
    getColumnIndexByName = function(grid,columnName) { 
     var cm = grid.jqGrid('getGridParam','colModel'); 
     for (var i=0,l=cm.length; i<l; i++) { 
      if (cm[i].name===columnName) { 
       return i; // return the index 
      } 
     } 
     return -1; 
    }; 

myGrid.jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name:'report', index:'report', width:108, 
      formatter:function() { return reportBtn; } }, 
     { name:'messageId', index:'messageId', key:true, width:50, hidden:true }, 
     { name:'age', index:'age', label:'Age', width:50, sorttype:'int', align:'center' }, 
     { name:'message', index:'message', label:'Message', width:110 }, 
     { name:'distance', index:'distance', label:'Distance', width:80, sorttype:'int', align:'center' } 
    ], 
    sortname: 'age', 
    sortorder: "desc", 
    loadComplete: function() { 
     var i=getColumnIndexByName(myGrid,'report'); 
     // nth-child need 1-based index so we use (i+1) below 
     $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input",myGrid[0]).click(function(e) { 
      var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow"); 
      alert("clicked the row with the messageId='"+tr[0].id+"'"); 
      e.preventDefault(); 
     }); 
    }, 
    viewrecords: true, 
    rownumbers: true, 
    //multiselect:true, 
    height: "100%", 
    pager: '#pager', 
    caption: "How to create Unobtrusive button" 
}); 

的data参数演示你可以看到现场here。