JQuery 中的超链接答案

【问题标题】：hyperlink in JQueryJQuery 中的超链接
【发布时间】：2012-08-30 02:00:10
【问题描述】：

我在 MVC3 中使用 JQuery 创建了一个网格，该网格显示来自模型的数据，但现在我打算在网格中放置一个指向其中一列的超链接，这样当用户单击该链接时，他应该能够查找与行值有关的数据。下面是显示我的网格的代码。

<script type="text/javascript">
$(document).ready((function () {
    $("#list").jqGrid({
        url: '/list/GetDet/', 
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Code', 'Name', 'Location'], //column name
        colModel: [
      { name: 'Code', index: 'Code', width: 100, align: 'right' },
      { name: 'Name', index: 'Name', width: 100, align: 'left' },
      { name: 'location', index: 'location', width: 100, align: 'left'}],

        pager: $('#pager'),
        rowNum: 5,
        rowList: [5, 10, 20, 50],            
        sortname: 'Code',
        sortorder: "desc",
        viewrecords: true,
        caption: 'Details'            
    });
})); 
</script>

如果我打算创建指向名称列的链接，我该如何提供

【问题讨论】：

标签： c# asp.net asp.net-mvc-3 jquery-plugins jqgrid

【解决方案1】：

在声明列的起始字时，name 和 index、don't use capital letter 列使用驼峰式。如果使用网格不加载。

例子：

{ name: 'code', index: 'code', width: 100, align: 'right' }, { name: 'name', index: 'name', width: 100, align: 'left' }, { name: 'location', index: 'location', width: 100, align: 'left'}],

您的问题与之前提出的问题 Retrieve value of cells, when in edit mode in JqGrid 已回答 How to return row values using hyperlink in jqgrid 有关

在editLink 函数中使用列索引名称来获取行值。

function editLink(cellValue, options, rowdata, action)
{
    alert('Name: '+ rowdata.name);//alerts row value of column
    //return "<a href='/Admin/editProvider/" + rowdata.providerId + "' class='ui-icon ui-icon-pencil' ></a>";
}

【讨论】：

【解决方案2】：

在您放置实际链接或要链接的 ID 的 getData 操作中，在您创建单元格的位置使用完整的 html 字符串。服务器可以将<a href="/controller/action/id">View</a> 发送给客户端，它会显示为一个链接。这不会影响任何搜索或排序，因为它们是在实际索引而非超链接上完成的。

我通常会在服务器端准备我的操作，但如果您想在客户端执行此操作，您可以使用指定自定义函数作为格式化程序并以您想要的任何方式格式化值。 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options 看看格式化程序选项

【讨论】：

如果您使用的是 MVC3，我建议您查看包含所有 jqGrid 选项的 Lib.Web.MvC nuget 包，以从强类型模型生成 HTML 和 Javascript。 nuget.org/packages/Lib.Web.Mvc

【解决方案3】：

您可以使用getCell 方法（as mentioned in the jqGrid docs）。一旦你在你的 javascript 中有这个值，你可以用任何你喜欢的方式处理它。

【讨论】：

但是我如何将行 id 和列 id 传递给 get cell 方法......对不起，这对你来说是一个基本问题......这是我第一次处理 Jquery无法解决...请您帮忙下面是我生成超链接的代码 { name: 'Name', index: 'Name', width: 100, align: 'left', formatter: 'showlink', formatoptions: { baseLinkUrl: '商店/详情/'
哦，我想我误解了你的问题。这似乎与其他 SO 问题类似：stackoverflow.com/questions/5010761/… 如果有帮助，请告诉我。

【解决方案4】：

我认为您在发送 URL 时遇到了问题。
这是解决该问题的Link。

【讨论】：