JQGrid 自定义格式化程序 - edit/save/cancel 没有格式化程序：'action'

Question

我目前正在与 asp.net 合作开发一个页面，用户将在该页面上与 jqgrid 4.4.4 版进行交互。由于版本原因，我无法使用格式化程序：'action'。我有一个自定义格式化程序，它显示了 edit/save link.

我目前有这个

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>";

此代码确实添加了一个 edit/save 按钮，该按钮能够 edit/save 行。但是，我希望通过一次只显示其中一个来改进功能。例如，如果用户点击edit，那么save/cancel就会出现，edit就会消失。

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

有没有办法给每个 link 一个唯一的 ID，或者有更好的方法吗？

感谢您的帮助！！

Answer 1

jqGrid 4.4.4 已经有五年半了！很长一段时间以来都不支持它。我猜你是通过 NuGet 包 jQuery.jqGrid. In the case, I'd recommend you uninstall the package and install free-jqGrid 4.15.4 获得 jqGrid 4.4.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(); 来显示第二个 link 并使用 $(this).hide() 隐藏当前 link。 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. It means that a click inside of any DOM element of the grid propagates the event the the tree of parents. Thus it's enough to define click event on the main <table> element of the grid. jqGrid does that already. One can use beforeSelectRow callback function which will be called inside of click event handler registered by jqGrid. The target property of the Event object (the second parameter of beforeSelectRow) will be the clicked element. Thus you can just verify whether e.target has the class usergroup_name, which you use for your links and, if it's so, do your main job: start editRow (or saveRow), hide/show the links and so on. Look at ，演示方法

JQGrid 自定义格式化程序 - edit/save/cancel 没有格式化程序：'action'

JQGrid custom formatter - edit/save/cancel without formatter: 'action'

javascript

jquery

asp.net

jqgrid

visual-web-developer-2010