javascript - 在 JQGrid 中创建链接

Question

我需要在 JQgrid 中创建一个列的所有单元格，一个链接，该链接使用单元格值调用 JavaScript 函数，以传递给服务器端的某些查询。我见过html link column in jqGrid 但它没有奏效。这是我所拥有的，

colModel:[
{name:'name',width:300,formatter:link}
]

链接函数是

function link(cellvalue, options, rowObject) {


alert('<a href="javascript:logForProv(\''+cellvalue+'\',\''+$('#datepicker1').val()+'\',\''+$('#datepicker2').val()+'\');">');
return "<a href='javascript:logForProv(\''+cellvalue+'\',\''+$('#datepicker1').val()+'\',\''+$('#datepicker2').val()+'\');'>";
        }

这样做时，我没有在列中获得任何数据，我还尝试使用预定义的格式化程序链接和 showlink，但它们将 href 和 id 附加到困惑的 URL 中。

请帮忙。

Answer 1

当点击providerId编辑列时，您将重定向到editProvider的编辑页面。 在 providerId colModel 处提及 formatter: editLink 用于调用 editLink 函数。这样就在jqGrid中创建了链接。

代码:

$(document).ready(function(){
        //jqGrid
        $("#providerList").jqGrid({
            url:'<%=request.getContextPath() %>/Admin/getProvidersList',
            datatype: "json",               
            colNames:['Id','Edit','Provider Name'],
            colModel:[
                {name:'providerId',search:false,index:'providerId',hidden:true},
                {name:'providerId',search:false,index:'providerId', width:30,sortable: false, formatter: editLink},
                {name:'providerName',index:'providerName', width:200},
                rowNum:20,
                rowList:[10,20,30,40,50],
                rownumbers: true,  
                pager: '#pagerDiv',
                sortname: 'providerName',  
                viewrecords: true,  
                sortorder: "desc",  
        }); 
        $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
        $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
        $('#load_providerList').width("130");   
        $("#providerList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
        $(".inline").colorbox({inline:true, width:"20%"});
    });
    function editLink(cellValue, options, rowdata, action)
    {
        return "<a href='<%=request.getContextPath()%>/Admin/editProvider/" + rowdata.providerId + "' class='ui-icon ui-icon-pencil' ></a>";
    }