Как получить свойство 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 для ссылки должен включать идентификатор (например, 120).Я не могу получить значение id из cellvalue, параметров или 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, все работает нормально, если я жестко закодирую здесь значение идентификатора, чтобы быть частью 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

Я предлагаю вам использовать ненавязчивый JavaScript для создания ссылки. Таким образом, пользовательский форматтер может быть очень простым:

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

теперь содержимое столбца 'id' будет таким же, как в вашем примере. Для создания привязки «onclick» я предлагаю использовать jQuery.click .

Способ реализации ненавязчивого JavaScript в jqGrid. Я описал здесь и здесь . Поэтому я буду использовать почти такой же способ и буду использовать ту же простую вспомогательную функцию 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");) Как вы можете проверить в живом демо здесь , подход работает.