jqgrid showLink

Question

Я использую средство форматирования showlink, чтобы сделать столбец в качестве ссылки. Есть ли способ, которым я могу вызвать функцию JavaScript, когда я нажимаю на это.

Прямо сейчас это код, который у меня есть

$("#list").jqGrid(  

{
     url: '..',
    datatype: 'json', //We specify that the datatype we will be using will be JSON
    colNames:['ID', 'User Name'],      
                colModel :[
     {name:'id',index:'id', width:110, sorttype:"string", formatter: 'showlink', formatoptions:{baseLinkUrl:'index.cfm'}},

...

Я не хочу использовать baselinkUrl. Вместо этого я могу вызвать функцию Javascript при нажатии на URL? Кроме того, данные моей формы не отображаются на следующем экране, когда я использую форматтер showlink.

Answer 1

Вы можете сделать это по-разному.Первый - использовать formatter:'showlink' в форме, подобной следующей

formatoptions: {
    baseLinkUrl: 'javascript:',
    showAction: "MyBase.GetAndShowUserData(jQuery('#list'),'",
    addParam: "');"
}

(подробности см. В моем старом ответе ).Он создаст ссылку <a> с

href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'?id=rowId');"

, где rowId будет идентификатором соответствующей строки сетки.Внутри вашей пользовательской функции global MyBase.GetAndShowUserData вы должны вырезать префикс "?id=" из второго параметра.Таким образом, вы сможете получить доступ к сетке и узнать выбранный идентификатор.

Еще один способ - написать собственный пользовательский форматер вместо использования formatter:'showlink'.

Основным недостатком обоих подходов, на мой взгляд, является использование глобальных функций.Более того, я предпочитаю следовать концепции ненавязчивого JavaScript .Поэтому я могу предложить вам другой способ из моего ответа на форуме trirand.Идея состоит в том, чтобы использовать предопределенный форматер showlink с '#' в качестве значения атрибута href и для привязки к событию click ссылки внутри функции loadComplete:

colModel: [
    { name: 'Subcategory', formatter:'showlink',formatoptions:{baseLinkUrl:'#'}
...
loadComplete: function() {
    var myGrid = $("#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 || this.innerText;
                alert("clicked the row with id='"+id+"'. Link contain '"+text+"'");
                location.href="http://en.wikipedia.org/wiki/"+text;
            }
            e.preventDefault();
        });
    }   
}

см. Живое демо здесь .В демоверсии, если вы щелкнете по тексту типа «Физика» в таблице, откроется URL-адрес http://en.wikipedia.org/wiki/Physics, который будет динамически создаваться.Я включил дополнительное предупреждение, чтобы показать, как дополнительно декодировать информацию об идентификаторе строки.

ОБНОВЛЕНО: Посмотрите на улучшенный код (со стороны производительности) loadComplete в другой ответ .