jquery jqGrid colModel 某一列添加超链接_jqgrid <trirand:jqgridcolumn 链接列-优快云博客

本文介绍如何在jqGrid插件展示的列表中为特定列添加超链接，以便直接跳转到编辑页面。通过自定义单元格格式函数实现，展示了具体的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hi 今天收到一个开发请求，说是在与原来的展示列表中的一列添加超链接：

代码如下所示：

$(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>";
    }