如何獲取ID屬性自定義格式

Question

我的服務器提供了以下JSON字符串：

{ 
    "total":3, 
    "page":1, 
    "records":52, 
    "rows":[ 
     {"cell":[ 
      "6789", 
      "Veridien Dynamics", 
      "ver01", 
      "Description of Site: ver01", 
      "1986a594-bb12-4a4a-a70b-4b85251fd268", 
      "UKSODMBHANU01", 
      6440], 
     "id":120} 
     ...... 
    ] 
} 

在我的網，我想有一個鏈接，每行。該鏈接是使用自定義格式化程序構建的。該鏈接的URL需要包含該id（例如120）。我無法從我的自定義格式化程序中獲得cellvalue中的id值，選項或rowObject。由於id不是「單元格」的一部分，我不知道如何獲得該值來構造url。

以下是我的網格定義的一部分：

$("#list").jqGrid({ 
    url:'http://mydomain:8080/myserver/api/v1/data-grid.json', 
    loadBeforeSend: function(xhr) { 
     xhr.setRequestHeader("Authorization",'Basic xxxxxxxxxxxxxxxxxxxxxxxxx'); 
     return xhr; 
    }, 
    datatype: "json", 
    jsonReader : { 
     root: "rows", 
     page: "page", 
     total: "total", 
     records: "records", 
     repeatitems: true, 
     cell: "cell", 
     id: "id" 
    }, 
    colNames:['Customer ID','Customer','Site ID','Site', 'Server ID','Server Name', 
       'XML Size','id'], 
    colModel :[ 
     {name:'customerID',editable:false}, 
     {name:'customerName',editable:false}, 
     {name:'siteID',editable:false,width:60, align:'center'}, 
     {name:'siteDescription',editable:false,align:'center'}, 
     {name:'serverID',editable:false,width:150,align:'right'},  
     {name:'serverName',editable:false, width:150,align:'right'}, 
     {name:'xmlSize',editable:false, align:'right'}, 
     {name:'id', index:'id', editable:false,  
      align:'center',formatter:that.xmlLinkFormatter}, 

    ], 
    ...... 
} 

以下是我xmlLinkFormatter，一切工作正常，如果我硬代碼值這裏的ID是targetURL的一部分。

xmlLinkFormatter:function(cellvalue, options, rowObject){ 
    var targetURL = "http://mydomain:8080/myServer/data/showXml/"+ 
        IwantIDValue here; 
    var link = "<a href='javascript: void(0)' onclick=\"window.open('" + 
       targetURL + "');\">View XML</a>"; 

    return link; 
} 

Answer 1

我建議您使用unobtrusive JavaScript建立鏈接。因此，自定義格式可以很容易的：

xmlLinkFormatter:function(cellvalue, options, rowObject){ 
    return "<a href='#'>View XML</a>"; 
} 

現在包含「ID」列的將是相同的例子。要使'onclick'綁定，我建議使用jQuery.click。

在jqGrid I中如何實現unobtrusive JavaScript的方式描述爲here和here。所以我會用幾乎相同的方式，將使用相同的簡單的輔助功能getColumnIndexByName：

loadComplete: function() { 
    var i=getColumnIndexByName(myGrid,'id'); 
    // nth-child need 1-based index so we use (i+1) below 
    $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > a",myGrid[0]).click(function(e){ 
     var tr=$(e.target,myGrid[0].rows).closest("tr.jqgrow"); 
     //alert("clicked the row with the id='"+tr[0].id+"'"); 
     e.preventDefault(); 
     window.open("http://mydomain:8080/myServer/data/showXml/"+ 
        encodeURIComponent(tr[0].id)); 
    }); 
} 

（這裏的變量myGrid被定義爲var myGrid=$("#list");） 你怎麼能在現場演示here驗證，該方法效果。