JQGrid 自定义格式化程序 - 没有格式化程序的编辑/保存/取消：'action'

Question

我目前正在与 asp.net 合作开发一个页面，用户将在其中与 jqgrid 版本 4.4.4 进行交互。由于版本的原因，我不能使用格式化程序：'action'。我有一个自定义格式化程序，它显示了一个编辑/保存链接。

我现在有这个

return "<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow('" + rowobject.id + "')\">" + 'edit' + "</a>" +" | "
          +"<a href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow('" + rowobject.id + "')\">" + 'save' + "</a>";

此代码确实添加了一个编辑/保存按钮，该按钮能够编辑/保存行。但是，我希望通过一次只显示其中一个来改进功能。例如，如果用户单击编辑，则会出现保存/取消，而编辑将消失。

为此，我尝试为 html 链接提供一个 id，但是在执行 $('id').hide() 之后只有第一行会消失。

有没有办法给每个链接一个唯一的 id，或者有更好的方法吗？

感谢您的帮助！！

Answer 1

jqGrid 4.4.4 已经五年半了！很久不支持了。我猜你通过 NuGet 包jQuery.jqGrid 获得了 jqGrid 4.4.4。在这种情况下，我建议您卸载软件包并安装free-jqGrid 4.15.4。之后您可以使用formatter: "actions" 或template: "actions"。

如果您仍想了解如何使用自定义格式化程序来实现您的要求，那么您有一些选择。第一种方法是使用您的旧代码，但修改editRow（或saveRow）的调用

return "<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow('" + rowobject.id + "')\">" + 'edit' + "</a>" +" | "
      +"<a href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow('" + rowobject.id + "')\">" + 'save' + "</a>";

到

return "<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow.call(this,'" + rowobject.id + "')\">edit</a>"+
      "<a style='display:none' href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow.call(this,'" + rowobject.id + "')\">save</a>";

onclick 方法将被调用，this 初始化为用户单击的<a> 的 DOM 元素。

在全局函数editRow 和saveRow 中，您可以使用$(this).next().show(); 或$(this).prev().show(); 显示第二个链接，并使用$(this).hide() 隐藏当前链接。 editRow 和 saveRow 最简单的代码如下：

function editRow (rowid) {
    $(this).hide()
        .next().show()
        .closest(".ui-jqgrid-btable").jqGrid("editRow", rowid);
}
function saveRow (rowid) {
    $(this).hide()
        .prev().show()
        .closest(".ui-jqgrid-btable").jqGrid("saveRow", rowid);
}

另一种方法是不要使用任何内联onclick 属性。点击事件支持event bubbling。这意味着在网格的任何 DOM 元素内单击都会将事件传播到父级树。因此，在网格的主要<table> 元素上定义click 事件就足够了。 jqGrid 已经这样做了。可以使用beforeSelectRow 回调函数，该函数将在jqGrid 注册的click 事件处理程序内部调用。 Event 对象的target 属性（beforeSelectRow 的第二个参数）将是被点击的元素。因此，您只需验证e.target 是否具有用于链接的类usergroup_name，如果是，则完成您的主要工作：启动editRow（或saveRow），隐藏/显示链接和很快。查看the old answer，它演示了该方法。