使用 GET 从 jqGrid 中的列值链接到新页面

Question

我创建了一个 jqGrid，其中包含一些字段，例如：

job_id、姓名等

我想要做的是，当点击 job_id 列中的值时，它会将它们重定向到：

job.php?job_id=（他们点击的值）

我首先尝试使用以下作为我的 colModel：

{ name:'job_id', index:'job_id', edittype:'select', formatter:'showlink',
  formatoptions:{baseLinkUrl:'job.php'}, width:50, align:'center' }

但这会导致重定向到：

job.php?job_id=(row_id)

我搜索了一下，发现这个软件的开源版本的开发者发了一个帖子，建议使用下面的colModel和附加的JS：

{ name:'job_id', index:'job_id', edittype:'select', formatter:'showlink',
  formatoptions:{baseLinkUrl:'#'}, width:50, align:'center' }

loadComplete: function() {
    var myGrid = $("#home_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;
                location.href="job.php?id="+text;
            }
            e.preventDefault();
        });
    }   
}

但这与 IE 不兼容。除此之外，当在 jqGrid 中显示大量行时，加载需要非常长的时间，比如 5 秒 + 500 行。

我会继续努力，但这是其他人做过的事情吗？

Answer 1

您使用了来自my old answer 的代码示例，所以我决定应该回答您的问题。

我同意评论家对loadComplete 代码性能的看法。因此，我为您的问题 +1。长循环内的构造 $("#"+ids[i]+" a", myGrid[0]) 可以非常缓慢地工作。如果使用以下方法，可以轻松解决问题

var getColumnIndexByName = function (columnName) {
    var cm = $(this).jqGrid("getGridParam", "colModel"), l = cm.length, i;
    for (i = 0; i < l; i++) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
};

var myGrid = $("#list");
myGrid.jqGrid({
    ...
    loadComplete: function () {
        var i = getColumnIndexByName.call(this, 'Subcategory');
        // nth-child need 1-based index so we use (i+1) below
        $("tbody>tr.jqgrow>td:nth-child(" + (i+1) + ")>a", this).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();
        });
    }
});

您可以看到the demo 的改进版本与the original demo 完全相同。为了显示该方法在 1000 行上的性能，我创建了 one more demo。可以看出新方法的效果很快。

现在回到您的主要问题。如果您编写 custom formatter 和 unformatter 而不是使用预定义的格式化程序 showlink，我们将获得最佳性能。代码大概如下：

formatter: function (cellvalue, options, rowObject) {
    return "<a href=\"job.php?job_id=" + rowObject.job_id + "\">" + cellvalue + "</a>";
},
unformat: function (cellvalue, options, cellobject) {
   return cellobject.job_id;
}

确切的代码取决于您使用哪个datatype，是否使用loadonce:true，以及您使用哪个jsonReader。例如，rowObject 在您的情况下是数组，您必须使用 对应数据字段的数组索引（如rowObject[4]）而不是rowObject.job_id。

更新：我认为最好的实现方式是使用 onCellSelect 或 beforeSelectRow，而不是将点击事件绑定到列中的每个元素。我建议阅读以下答案以了解详细信息：this one、another one 和 one more old answer。