使用 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、姓名等

我想要做的是使当点击 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=(他们点击的值)

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

确切的代码取决于您使用的 datatype、是否使用 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.

UPDATED:我认为最好的实现方式是使用 onCellSelect 或 beforeSelectRow 而不是将单击事件绑定到列中的每个元素.我建议阅读以下答案以了解详细信息:这个，另一个和另一个旧答案.

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屋！