jQuery - jqGrid - 在每一行提交按钮

Posted 2023-05-07

【中文标题】jQuery - jqGrid - 在每一行提交按钮

【英文标题】：jQuery - jqGrid - submit buttons in each row

【发布时间】：2013-05-19 00:30:49

【问题描述】：

使用 jqGrid 4.5.2 和 jQuery 1.9.1。我在网页中有一个 jqGrid，它显示从查询返回的数据行。网格中的每一行都有 2 个submit 按钮，默认情况下这些按钮是禁用的，但会在 jqGrid 的 onSelectRow 事件中启用。

我在下面的代码中添加按钮：

var ids = $("#myGrid").jqGrid("getDataIDs");
for (var i=0;i < ids.length;i++) 
    var cl = ids[i];
    sm = "<input id='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='true'  />";
    ca = "<input id='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='true' />";
    $("#myGrid").jqGrid("setRowData",ids[i], msgAct:sm+ca);
    

请注意submit 按钮默认禁用。

选择网格中的行时，我希望只有的两个按钮为enabled。在onSelectRow 事件中也发生了我设置变量以供以后使用的地方。

var gridRow = $(this).jqGrid("getRowData",id);
var srow = $(this).jqGrid("getGridParam","selrow");

我希望onSelectRow 中的其他行为 -

不希望能够单击该行 - 必须单击 2 个提交按钮之一才能转到网格中的另一行。 一次提交会执行一组操作，然后重置网格（未选择任何内容，并且所有行上的所有按钮都被禁用）。 另一个提交按钮（Cancel 按钮）不会执行上一步中的操作，但会重置网格（未选择任何内容，并且所有行上的所有按钮都被禁用）。

我尝试了各种方法来启用所选行上的按钮，但它要么只启用第一行、所有行，要么不启用任何行。我查看了上面srow 中的值，可以确认它具有正确的行ID。

如何定位所选行中的提交按钮以启用它们（并使网格中的所有其他按钮保持禁用状态）？

谢谢！

编辑：

感谢@Oleg 以及他的建议和跟进，我能够解决我的问题。 @Oleg 的回答让我走上了正轨。

在colModel 中，我放置了msgAct 以获取每行上的按钮并与该行相关联。

name: "msgAct",
    width: col4width,
    align: "center",
    formatter: function() 
    return "<input name='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled' />" +
       "<input name='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled' />" 
    

在OnSelectRow 中，我还使用了他的建议来关闭jqGrid 中的所有 按钮，然后打开我选择的行中的按钮。

// disable all resendMsg & cancelMsg buttons in the grid
$(this).find("input[name=resendMsg]").attr("disabled","disabled");
$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
// now enable the buttons for the current row only
$(tr).find("input[name=resendMsg]").removeAttr("disabled");
$(tr).find("input[name=cancelMsg]").removeAttr("disabled");

我还有其他代码可以禁用页面上的任何其他下拉菜单，因此只会发生以下三种情况之一：

用户可以点击重新发送按钮 用户可以点击取消 按钮 用户可以单击 jqGrid 上的另一行

由于上面的#3 会触发另一个OnSelectRow 事件，我希望用户必须对选定的行执行某事。

使用@Oleg 的建议关闭所有然后只打开选定行的按钮，我还将每个按钮的点击事件代码放在onSelectRow 事件中。

$(tr).find("input[name=cancelMsg]").click(function() 
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    ....do other stuff .....
    ReloadGrid();
    );
$(tr).find("input[name=resendMsg]").click(function() 
    ReSend(gridRow.Col1, gridRow.Col2);
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    .... do other stuff ....
    );
,

网格现在做我想做的事。例如 -

加载网格时，网格中的所有行都有一个 msgAct 列，并且 该列中有一个重新发送和一个取消按钮，这两个按钮 存在，但呈灰色显示。 如果选择第 3 行，第 3 行的 msgAct 重新发送和取消按钮 现已激活并可点击。网格中的所有其他行 让这些行中的按钮仍然显示为灰色。 如果用户单击“重新发送”或“取消”，则相应的操作 对于网格中的那一行发生。重新发送将另一行添加到 网格，而 Cancel 重置选择 & 网格显示为 加载时完成。 用户可用的唯一选项是单击重新发送、取消 或选择不同的行。然后选择不同的行 启用该行上的按钮（禁用上一个 选择），并单击其中任何一个启动适当的 该行的操作。

现在的问题可能是 - 有没有更好的方法来做到这一点？

感谢@Oleg 提供的宝贵帮助！

【参考方案1】：

主要问题是创建错误的 html 数据。

您在网格的所有行中添加具有相同 id（id='resendMsg' 和id='cancelMsg'）的按钮，但id 属性在整个HTML 页面中必须是唯一的。如果您尝试通过按 id 对其进行索引来启用该按钮，您可能会发现可能只有第一个具有该 id 的按钮。它通常会通过第一行的按钮。您可以使用name 属性代替id 属性

另一个问题是disabled 属性使用了错误的值。如果您希望代码在所有网络浏览器中都能正常工作，您应该使用 disabled='disabled' 而不是 disabled='true'。

创建此类按钮的最佳方法是使用custom formatter。您可以在msgAct 中添加formatter 属性，这将直接创建按钮。代码可能如下

colModel: [
    ...
     name: "msgAct", width: 150,
        formatter: function () 
            return "<input name='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled'/>" +
                "<input name='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled'/>"
        
],
onSelectRow: function (rowid) 
    var tr = $(this).jqGrid("getInd", rowid, true);

    // first disable all "resendMsg" buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled", "disabled");

    // then enable the button from the current row only
    $(tr).find("input[name=resendMsg]").removeAttr("disabled");
,
gridview: true

The answer 描述了使用 gridview: true 和自定义格式化程序的优势。

【讨论】：

这解释了为什么它在行中的按钮上是第一个/全部/无。每个提交按钮的点击事件属于哪里？选择该行后，我无法点击任一按钮触发。

@steve_o：$(tr).find("input[name=resendMsg]").removeAttr("disabled") 来自onSelectRow 的行确实启用了按钮。这是你的问题，不是吗？我不知道你打算用submit 按钮做什么。我个人更喜欢使用<span> 作为按钮。可以使用beforeSelectRow 或onCellSelect 捕捉对网格任何元素的点击。有关详细信息，请参阅 the answer 和 another one。可以在网格内创建按钮、链接等并处理click 事件。

行 $(tr).find........removeAttr("disabled") 确实启用了正确行中的按钮，这是我的问题的一部分。但是，现在，在选择行后，我无法触发任何一个按钮。我对提交按钮所做的是允许用户重新发送之前发送的项目，或者他们可以通过点击取消按钮来选择不重新发送（用户将只有触摸屏并且没有键盘）。一旦他们点击提交，该项目将被重新发送并且 jqGrid 被重新加载，没有任何选择。取消重置选择并重新加载网格。

@steve_o：好的，但我仍然不明白您打算如何控制提交的内容和方式。您是否将jQuery.submit 绑定到按钮？您是否查看了我引用的显示如何使用 beforeSelectRow 或 onCellSelect 的答案？

我已经阅读了这些链接，但显然不理解某些内容。最初，我通过显示一个带有 2 个提交按钮的 DIV 来完成这项工作，该按钮显示在网格下方。 OnSelectRow 会触发，显示 DIV 会捕捉到按钮的点击。现在需要将该功能移动到网格的每一行。现在，在重新发送时，它将从所选行中获取 col1 和 col2 值并将该项目重新发送到表格，完成后刷新网格。取消将重置选择和刷新网格。功能与以前相同，但现在按钮绑定到每一行。