Jqgrid：基于所选行的导航答案

【问题标题】：Jqgrid: navigation based on the selected rowJqgrid：基于所选行的导航
【发布时间】：2011-03-02 17:33:10
【问题描述】：

我试图启用基于选定行的导航。因此，用户从 jQgrid 中选择一行，当按下显示时（是否有网格的显示按钮，我看到了编辑、添加等），它需要根据 url 转到一个新页面（行的一部分)。

$(document).ready(function () {
    function getLink() {
//      var rowid = $("#customer_list").jqGrid('getGridParam', 'selrow');
        var rowid = $("#customer_list").getGridParam('selrow');
        var MyCellData = $("#customer_list").jqGrid('getCell', rowid, 'dataUrl');
        return MyCellData;
    }

    $("#customer_list").jqGrid({
        url:'mytestList',
        editurl:'jq_edit_test',
        datatype: "json",
        colNames:['Call Id','Title','dataUrl'],
        colModel:[
          {name:'callId', width:80, search:false},
          {name:'title', width:200, sortable:false},
          {name:'dataUrl',hidden:true}
        ],
        rowNum:10,
        sortname:'lastUpdated',
        sortorder: 'desc',
        pager:'#customer_list_pager',
        viewrecords: true,
        gridview: true
    }).navGrid('#customer_list_pager',
      {add:true,edit:true,del:false,search:true,refresh:true}, 
      {closeAfterEdit:true, afterSubmit:afterSubmitEvent}, // edit options
      {addCaption:'Create New something', afterSubmit:afterSubmitEvent,
       savekey:[true,13]}, // add options
      {afterSubmit:afterSubmitEvent}  // delete options
    );
    $("#customer_list").jqGrid('filterToolbar');
});

因此，每行的 url 作为 dataUrl 传递。我正在尝试阅读它并设置为按钮。通过firebug调试时，rowid为223（网格中只有12行），单元格值为空。目前该按钮保留在网格之外，但最好将其作为 vavGrid 的一部分

谢谢。

【问题讨论】：

标签： jqgrid

【解决方案1】：

您可以让显示按钮成为网格中每一行的一部分，并使用custom formatter 将其转换为 URL。

根据 wiki 中的示例，您可能需要类似以下内容的内容

function myformatter ( cellvalue, options, rowObject )
{
    return "<a href=\"" + cellvalue + "\">Show</a>";
}

【讨论】：

我尝试了一种类似的方法，将其中一个单元格设为链接（格式化程序：'showlink'，formatoptions: getLink()）。我可以按照您的建议将 url 列转换为链接，但可能会浪费一些空间。仍然不确定 getCell 方法有什么问题！
@bsreekanth：我想这取决于你的桌子有多宽。 Show 列只会增加 50px 左右的宽度。但是，它将允许人们在新窗口而不是当前窗口中打开链接（虽然不确定该功能对您有多重要）。否则，Oleg 的解决方案看起来会奏效。

【解决方案2】：

下面的代码可以解决你的问题

$("#customer_list").jqGrid ('navButtonAdd', '#customer_list_pager',
    { caption: ""/*"Show"*/, buttonicon: "ui-icon-extlink", title: "Show Link",
      onClickButton: function() {
          var grid = $("#customer_list");
          var rowid = grid.jqGrid('getGridParam', 'selrow');
          window.location = grid.jqGrid('getCell', rowid, 'dataUrl');
      }
    });

【讨论】：

效果很好.. 感谢您展示如何设置 jqueryui 图标.. 我遇到了 JSON 数据问题，这就是为什么 url 最初读取不正确.. 再次感谢