2011-04-07 115 views
0

這裏是我填的jqGrid:獲得從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被調用傳遞到返回的消息列表中。

這是第一次完美的作品。現在,如果我再次點擊同一個按鈕,網格不會更新它的數據(這應該是不同的,因爲不同的數據從服務器返回)。它只是保持不變。

爲什麼?

回答

1

您可以通過多種方式實現您的需求。我建議使用我在the answer中描述的方式。它使用unobtrusive JavaScript風格。此外,因爲您使用addRowDatai+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

+0

謝謝,我dicepher這個,但我認爲這是正確的答案。 – Scott 2011-04-09 14:26:48

+0

嗨,使用這個,如果我嘗試不止一次填充網格,它不會填充。它只會在我刷新頁面並執行後纔會填充。 – Scott 2011-04-09 15:03:06

+0

@斯科特:對不起,我不明白你的意思。你填寫的是哪種網格?如果點擊排序列,例如在演示http://www.ok-soft-gmbh.com/jqGrid/UnobtrusiveButtons.htm網格將被新填充。您可以發佈您遇到問題的網頁的網址,或發佈您現在使用的代碼嗎? – Oleg 2011-04-09 15:24:03