JqG​​rid 需要超链接 - 需要通过 Jquery 捕获价值

Posted

技术标签:

【中文标题】JqG​​rid 需要超链接 - 需要通过 Jquery 捕获价值【英文标题】:JqGrid need hyperlink - need to capture value through Jquery 【发布时间】:2013-01-09 20:42:14 【问题描述】:

我的代码中有以下内容:

       name: 'ID', index: 'ID', width: 40 , formatter: 'showlink', search: false, formatoptions:  baseLinkUrl: '/Program/EditMicro' ,

当我点击 PNum 时,会发生以下情况:我的控制器会执行以下操作:

    /Program/EditMicro

我想要的是通过 Jquery 捕获有关所选内容的信息(选择了什么 ID) 因为我想在将它发送到以下 ActionResult 之前做一些 json

    /Program/EditMicro

所以,回顾一下,是否有捕获超链接点击的值是什么,然后我可以在 Jquery 中捕获它。

提前谢谢你

【问题讨论】:

【参考方案1】:

在大多数情况下,使用类似的东西就足够了

formatter: "showlink",
formatoptions: 
    baseLinkUrl: "/Program/",
    showAction: "EditMicro",
    idName: "myId"

如果链接会像这样生成

<a href="/Program/EditMicro?myId=123">text from the cell</a>

如果您在操作中有行的 id,您可以直接从数据库中获取您需要的任何其他附加信息。

您也可以使用the answer 中描述的简单技巧。你定义 CSS 类

.myLink  text-decoration: underline; cursor: pointer; 

然后您可以使用如下自定义格式化程序

formatter: function (cellValue, options, rowObject) 
    return "<span class='myLink'>" + cellValue + "</span>";
,
cellattr: function () 
    return " title=\"Click here to go to EditMicro\"";

您将生成&lt;span&gt; 的方式,它会像链接一样寻找用户。您可以使用beforeSelectRowonCellSelect 回调捕获单元格上的单击事件。例如

beforeSelectRow: function (rowid, e) 
    var $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]);
    if (this.p.colModel[iCol].name === 'note') 
        window.location = "/Program/EditMicro/" +
            encodeURIComponent(rowid);
        return false;
    

如果需要,您可以使用getColgetRowData 从单击的行中获取任何其他数据并将信息附加到目标 URL。

【讨论】:

感谢 Oleg,您上面的 beforeSelectRow 方法运行良好。我还有另一个与此有关的问题。一旦用户转到 window.location = "/Program/EditMicro/" + encodeURIComponent(rowid);并填写表格,我的用户返回到他们在网格上的页面。这样,他们就不需要说去第102页了。有没有简单的方法可以做到这一点?谢谢 @NatePat:不客气!您可以使用the answer 中描述的方法。它允许将 jqGrid 的状态保存在localStorage 中。如果用户返回或再次打开同一页面,则 jqGrid 的先前状态将被恢复。 @Vieenay:不客气!我也很高兴能帮到你。【参考方案2】:

您可以将以下内容附加到您的 jqGrid 声明中,以防止触发默认单击操作。

.click(function (event)  event.preventDefault(); )

然后您可以通过

执行类似您自己的点击事件处理程序的操作
$('a').click(function ()  //ToDo: Extra actions before submitting to controller );

您还可以构建您自己的自定义格式化程序,以便在您将要显示的超链接中添加额外信息,以便在构建网格时完成这项工作。

编辑:工作示例,其中我禁用了默认单击功能并绑定我自己的以显示警报(作为示例显示您将在哪里编写自己的函数来完成您想要做的额外工作)。 http://jsfiddle.net/QEzhr/33/

【讨论】:

马克,这不起作用。当我单击超链接并单击它时,甚至没有向我显示警报消息 谢谢马克,你怎么能捕捉到点击的内容。像 Note1、Note2 等。 在上面的示例中,它传入了当前行的参数,因此您可以转身获取该行,然后对其进行操作 例如。 idRowData = $('#gridName').jqGrid('getRowData', rowid);(如果您查看示例中每个注释的href)

以上是关于JqG​​rid 需要超链接 - 需要通过 Jquery 捕获价值的主要内容,如果未能解决你的问题,请参考以下文章

JqG​​rid 如何更改编辑表单的宽度?

JqG​​rid 从服务器更新数据

JqG​​rid向数据库添加新行

JqG rid重新排序searchBox中的元素?

JqG rid寻呼机在每个页面中加载相同的数据

JqG​​rid 根据另一个 jqgrid 下拉列表中的选定数据在下拉列表中添加值