Question

使用jqGrid 4.5.2＆amp; 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个提交按钮之一才能转到网格中的另一行。一个提交采取一套行动＆amp;然后重置网格（没有选择任何内容并且所有行上的所有按钮都被禁用）另一个提交按钮（Cancel按钮）不执行上一步中的操作，但会重置网格（未选择任何内容，并禁用所有行上的所有按钮）。

我已经尝试了各种方法来启用所选行上的按钮，但它只启用第一行，所有行或没有行。我已经查看了srow上面的值＆amp;可以确认它具有该行的正确ID。

如何定位所选行中的提交按钮以启用它们（以及禁用网格中的所有其他按钮）？

谢谢！

编辑：

感谢@Oleg＆amp;他的建议和跟进，我能够解决我的问题。 @ Oleg的回应让我走上正轨。

在colModel我放msgAct以获取每行上的按钮＆amp;与该行相关联。

{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＆amp;中的所有按钮。然后打开我选择的行中的那些。

// 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建议关闭所有＆amp;然后只打开所选行的按钮，我还在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列，并且该列中有一个Re-Send和Cancel按钮，两者都有在场，但是灰暗了。

如果选择了行＃3，则行＃3的msgAct重新发送＆amp;取消按钮是现在已激活，可以点击。每个网格中的所有其他行这些行中的按钮仍然是灰色的。

如果用户单击“重新发送”或“取消”，则执行相应的操作对于网格中的那一行发生。重新发送添加另一行取消重置选择＆amp;网格显示为它当它被装上时做了。

用户可用的唯一选项是单击“重新发送”，“取消” 或选择不同的行。然后选择不同的行启用该行上的按钮（禁用前一行上的按钮）选择），并点击其中任何一个启动适当的该行的行动。

现在的问题可能是 - 有更好的方法吗？

感谢@Oleg的宝贵帮助！

Answer 1

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

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

另一个问题是disabled属性使用了错误的值。如果您希望代码在所有网络浏览器中正常运行，则应使用disabled='disabled'代替disabled='true'。

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

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

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

1 个答案: