jqgrid showLink

Question

我正在使用 showlink 格式化程序将列作为链接​​。有没有一种方法可以在我单击它时调用 javascript 函数。

现在这是我的代码

$("#list").jqGrid(  

{
     url: '..',
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['ID', 'User Name'],      
                colModel :[
     {name:'id',index:'id', width:110, sorttype:"string", formatter: 'showlink', formatoptions:{baseLinkUrl:'index.cfm'}},

...

我不想使用 baselinkUrl。相反，我可以在单击 URL 时调用 Javascript 函数吗？此外，当我使用“showlink”格式化程序时，我的表单数据似乎没有发布到下一个屏幕。

Answer 1

您可以通过不同的方式做到这一点。第一个是使用formatter:'showlink'，格式如下

formatoptions: {
    baseLinkUrl: 'javascript:',
    showAction: "MyBase.GetAndShowUserData(jQuery('#list'),'",
    addParam: "');"
}

（详情请参阅我的old answer）。它将生成<a> 链接

href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'?id=rowId');"

其中rowId 将是相应网格行的ID。在您的自定义 global 函数 MyBase.GetAndShowUserData 中，您应该从第二个参数中删除 "?id=" 前缀。因此您将能够访问网格并且您将知道所选的 id。

另一种方法是写你自己的custom formatter，而不是使用formatter:'showlink'。

在我看来，这两种方法的主要缺点是使用 global 函数。此外，我更喜欢遵循unobtrusive JavaScript 的概念。所以我可以从 trirand 论坛上的my answer 向您推荐另一种方式。这个想法是使用预定义的格式化程序showlink，将'#'作为href属性的值，并绑定到loadComplete函数内部链接的click事件：

colModel: [
    { name: 'Subcategory', formatter:'showlink',formatoptions:{baseLinkUrl:'#'}
...
loadComplete: function() {
    var myGrid = $("#list");
    var ids = myGrid.getDataIDs();
    for (var i = 0, idCount = ids.length; i < idCount; i++) {
        $("#"+ids[i]+" a",myGrid[0]).click(function(e) {
            var hash=e.currentTarget.hash;// string like "#?id=0"
            if (hash.substring(0,5) === '#?id=') {
                var id = hash.substring(5,hash.length);
                var text = this.textContent || this.innerText;
                alert("clicked the row with id='"+id+"'. Link contain '"+text+"'");
                location.href="http://en.wikipedia.org/wiki/"+text;
            }
            e.preventDefault();
        });
    }   
}

查看现场演示here。在演示中，如果您单击表格中的“Physics”之类的文本，它将打开 URL http://en.wikipedia.org/wiki/Physics，它将动态构建。我添加了一个附加警报，以显示如何另外解码有关行 ID 的信息。

更新：在another answer 中查看loadComplete 的改进代码（从性能方面）。