使用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

你使用了旧答案的代码示例,所以我决定回答你的问题.

我同意批评者关于代码的表现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行上显示该方法的性能,我又创建了一个演示.可以看出新方法很快就能运行.

现在回到你的主要问题.如果您编写自定义格式化程序和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,而不是将click事件绑定到列中的每个元素.我建议您阅读以下答案以获取详细信息:这一个,另一个和另一个旧答案.