jqgrid showLink

时间:2010-12-08 18:40:31

标签: jquery jqgrid

我使用showlink formatter将列作为链接​​。有什么方法可以在我点击它时调用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。相反,我可以在点击URL时调用Javascript函数吗?当我使用'showlink'格式化程序时,我的表单数据似乎也没有发布到下一个屏幕。

1 个答案:

答案 0 :(得分:11)

您可以通过不同方式执行此操作。第一个是使用formatter:'showlink'形式,如下所示

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

(有关详情,请参阅我的old answer)。它会与

生成<a>链接
href="javascript:MyBase.GetAndShowUserData(jQuery('#userlist'),'?id=rowId');"

其中rowId将是相应网格行的id。在自定义全局函数MyBase.GetAndShowUserData内,您应该从第二个参数中剪切"?id="前缀。因此,您将能够访问网格,并且您将知道所选的ID。

另一种方法是自己编写custom formatter而不是使用formatter:'showlink'

我认为这两种方法的主要缺点是使用全局功能。此外,我更喜欢遵循unobtrusive JavaScript的概念。所以我可以在三角形论坛上以my answer的另一种方式向你推荐。我们的想法是使用预定义格式化程序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();
        });
    }   
}

查看实时演示here。在演示中,如果您点击表格中的“物理”这样的文本,它将打开将构建动态的网址http://en.wikipedia.org/wiki/Physics。我添加了一个额外的警报,以显示如何解码有关行id的信息。

更新:查看another answerloadComplete的改进代码(来自效果方面)。