jquery – jqgrid showLink

前端之家收集整理的这篇文章主要介绍了jquery – jqgrid showLink前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我使用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’格式化程序时,我的表单数据似乎也没有发布到下一个屏幕.

最佳答案
你可以用不同的方式做到这一点.第一个是使用格式化程序:’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而不是格式化程序的使用:’showlink’.

在我看来,这两种方法的主要缺点是使用全局函数.此外,我更喜欢遵循unobtrusive JavaScript的概念.所以我可以建议你从my answer在trirand论坛上的另一种方式.我们的想法是使用预定义的格式化程序showlink和’#’作为href属性的值,并绑定到loadComplete函数链接的click事件:

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 answer中loadComplete的改进代码(来自性能方面).

原文链接:https://www.f2er.com/jquery/428880.html

猜你在找的jQuery相关文章