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

我创建了一个jqGrid，其中包含以下字段：

工作id、姓名等

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

job.php？job_id=他们单击的值

我开始尝试使用以下作为我的模型：

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

但这会导致重定向到：

job.php？job\u id=row\u 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中显示大量行时，加载需要非常长的时间，例如500行需要5秒以上的时间

---

我将继续研究这个问题，但这是其他人都做过的吗？

您使用了来自的代码示例，所以我决定回答您的问题

我同意批评家关于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();
        });
    }
});

您可以看到，的改进版本的工作原理完全相同。在我创建的1000行上显示方法的性能。可以看出，新方法很快就能奏效

现在回到你的主要问题。如果您编写和而不是使用预定义的格式化程序，我们将获得最佳性能。代码可以是关于以下内容：

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;
}

确切的代码取决于您使用的数据类型、是否使用loadonce:true以及使用的jsonReader。例如，rowObject在您的案例中是数组，您必须使用 对应数据字段的数组索引，如rowObject[4]，而不是rowObject.job_id

---

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

嗨，奥列格，谢谢你的回答。我已经测试了你的两个网站，发现了以下几点。与Internet Explorer兼容，但使用Mozilla Firefox返回未定义的行。原始版本与Firefox兼容，但与IE不兼容。我将很快回到本期，但我想我会让您知道这一点。@Linnay:谢谢您的反馈。我把这两个都修好了。现在两者都可以在所有浏览器中工作。@Oleg:我不想成为你的个人测试人员，但他们仍然会抛出问题。当我在我的web应用程序中修补您的代码时，我也遇到了同样的问题。一个使用IE，一个使用Firefox。当以另一种方式比较它们时，会得到一个未定义的变量错误。单击id为1的行。Link contain'undefined'@Linnay:您确定使用这两个代码的新版本，而不是从缓存中使用吗？在新版本中，您应该可以找到var text=this.textContent | | this.innerText；而不是var text=this.textContent；或var text=this.innerText；。如果任何版本不起作用，请确切说明您使用的浏览器版本。在我看来，它在IE8、FF 3.6.13和Chrome 9中都能正常工作。@Oleg:在测试您的页面之前，我已经通过缓存清除了，并且它们都没有显示var text=this.textContent | | this.innerText；。但我会尝试一下这个片段，并在这里报告。谢谢。