使用GET从jqGrid中的列值链接到新页面 [英] Linking from a column value in jqGrid to a new page using GET

问题描述

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

I have created a jqGrid that contains some fields such as:

job_id，name等

job_id, name, etc

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

What I am trying to do is make so that when the click on the value in the job_id column, it will redirect them to:

job.php？job_id =（value他们点击了）

job.php?job_id=(value that they clicked on)

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

I started by trying to use the following as my 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）

job.php?job_id=(row_id)

我做了一些搜索，发现开放的开发者的帖子建议使用以下colModel和其他JS的软件源代码：

I did some searching, and found a post by the developer of the open source version of this software who suggested using the following colModel and additional 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行。

But this is not compatible with IE. In addition to this, when displaying a large number of rows in the jqGrid, it takes a extremely long time to load, say 5 seconds + for 500 rows.

我'我将继续努力，但这是否是其他人所做的事情？

I'm going to keep working on this, but is this something that anyone else has done?

推荐答案

您使用了我的老答案所以我决定回答你的问题。

You used code example from my old answer so I decide I should answer on you question.

我同意批评者关于 loadComplete 代码的执行情况。所以我的+1给你的问题。长循环内部的构造 $（＃+ ids [i] +a，myGrid [0]）可以非常缓慢地工作。如果将使用以下内容，可以轻松解决问题

I agree with the critic about performance of the code of the loadComplete. So +1 from me for your question. The construct $("#"+ids[i]+" a", myGrid[0]) inside of long loop can work very slowly. One can easy fix the problem if one will use the following

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行上显示该方法的性能，我创建了另外一个演示。可以看出新方法很快就能运行。

You can see that the improved version of the demo works exactly as the original demo. To show the performance of the method on 1000 rows I created one more demo. One can see that the new method works quickly.

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

Now back to your main problem. The best performance we will receive if you write your custom formatter and unformatter instead of the usage of the predefined formatter showlink. The code can be about following:

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 。

The exact code depend on which datatype you use, whether you use loadonce:true or not and which jsonReader you use. It can be for example, that rowObject is array in your case and you have to use array index of the corresponding data field (like rowObject[4]) instead of rowObject.job_id.

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

UPDATED: I think the best implementation way will be the usage of onCellSelect or beforeSelectRow instead of binding click event to every element in the column. I recommend to read the following answers for details: this one, another one and one more old answer.

这篇关于使用GET从jqGrid中的列值链接到新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！