Ссылка из значения столбца в jqGrid на новую страницу с помощью GET

Question

Я создал jqGrid, который содержит некоторые поля, такие как:

идентификатор вакансии, имя и т. д.

Я пытаюсь сделать так, чтобы при нажатии на значение в столбце 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 строк, я создал еще одну демонстрацию. Видно, что новый метод работает быстро.

Теперь вернемся к вашей главной проблеме. Наилучшее быстродействие мы получим, если вы напишите свой собственный форматер и форматер вместо использования предопределенного форматера 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 к каждому элементу в столбце. Я рекомендую прочитать следующие ответы для деталей: этот, еще один и еще один старый ответ.