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

Question

使用 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");

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

1. 用户可以点击重新发送按钮
2. 用户可以点击取消 按钮
3. 用户可以单击 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 提供的宝贵帮助！

Answer 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 和自定义格式化程序的优势。