jQuery-jqGrid-在每一行中提交按钮 [英] jQuery - jqGrid - submit buttons in each row

问题描述

使用jqGrid 4.5.2& jQuery 1.9.1版.我在网页中有一个jqGrid，它显示查询返回的数据行.网格中的每一行都有2个submit按钮，这些按钮默认情况下处于禁用状态，但在jqGrid的onSelectRow事件中变为启用状态.

Using jqGrid 4.5.2 & jQuery 1.9.1. I have a jqGrid in a web page that displays rows of data returned from a query. Each row in the grid will have 2 submit buttons that by default are disabled, but become enabled within the onSelectRow event of the jqGrid.

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

I am adding the buttons in the code below:

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});
    }

请注意，默认情况下 disabled 会弹出submit按钮.

Please note that the submit buttons come up disabled by default.

当选择在网格的行，我想要的两个按钮的该行仅以被.在onSelectRow事件中也发生了我设置变量供以后使用的地方.

When a row in the grid is selected, I want the two buttons for that row only to be enabled. Also taking place in the onSelectRow event are where I set variables for use later on.

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

我想要在onSelectRow-

不想单击该行-必须单击2个提交按钮之一才能转到网格中的另一行. 一个提交者采取一套行动，然后重置网格(未选择任何内容，并且禁用所有行上的所有按钮).
另一个提交按钮(Cancel按钮)在上一步中不执行操作，但是会重置网格(未选择任何内容并且禁用了所有行上的所有按钮).

Do not want to be able to click off the row - one of the 2 submit buttons must be clicked to go to another row in the grid. One submit takes one set of action & then resets the grid (nothing is selected & all buttons on all rows are disabled).
The other submit button (a Cancel button) does not take the action in the previous step, but does reset the grid (nothing is selected & all buttons on all rows are disabled).

我已经尝试了各种方法来启用所选行上的按钮，但是它要么仅启用第一行，要么启用所有行，要么不启用任何行.我已经查看了&上方的srow中的值.可以确认它具有该行的正确ID.

I've tried various things to enable the buttons on the selected row, but it either enables the first row only, all rows, or no rows. I've looked at the value in srow above & can confirm it has the correct id for the row.

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

How do you target the submit buttons in the selected row to enable them (and to keep all other buttons in the grid disabled)?

谢谢！

感谢@Oleg&他的建议和后续行动，我能够解决我的问题. @Oleg的回复将我带入了正确的轨道.

Thanks to @Oleg & his suggestions & follow-up, I was able to resolve my question. @Oleg's responses put me onto the right track.

在colModel中，我将msgAct放在每行&与该行相关联.

In the colModel I put the msgAct to get the buttons on each row & associated with that row.

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

In the OnSelectRow, I also used his suggestion to switch off all the buttons in the jqGrid & then switch on the ones in the row I had selected.

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

我还在那里有其他代码来禁用页面上的任何其他下拉菜单，因此只能发生以下三种情况之一:

I also had other code in there to disable any other drop downs on the page, so that only one of three things could happen:

1. 用户可以单击重新发送"按钮
2. 用户可以单击取消" 按钮
3. 用户可以在jqGrid上单击另一行

1. the user can click the Re-Send button
2. the user can click the Cancel button
3. the user can click another row on the jqGrid

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

Since #3 above would trigger another OnSelectRow event, I wanted the user to have to do something with the selected row.

使用@Oleg的建议关闭所有&然后仅打开所选行的按钮，我还将每个单击事件的代码都放在onSelectRow事件中.

Using @Oleg's suggestion to turn off all & then turn on only the selected row's buttons, I also put the click event code for each of them in the onSelectRow event.

$(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 ....
    });
},

网格现在可以执行我想要的操作.例如-

The grid now does what I want it to do. For example -

• 加载网格时，网格中的所有行都有一个msgAct列，并且 该列中有一个重新发送"和取消"按钮，两者 存在，但显示为灰色.
• 如果选择了第3行，则第3行的msgAct重新发送&取消按钮是 现在已激活，可以单击.网格中的所有其他行 这些行中的按钮仍显示为灰色.
• 如果用户单击重新发送"或取消"，则将采取适当的措施 网格中的该行发生.重新发送将另一行添加到 网格，而取消"则重置选择&网格按原样显示 是在加载时完成的.
• 用户唯一可用的选项是单击重新发送"，取消" 或选择其他行.然后选择另一行 启用该行上的按钮(禁用上一行中的按钮 选择)，然后点击其中任意一个即可启动相应的 该行的操作.

• When the grid loads, all rows in the grid have a msgAct column, and that column has in it a Re-Send and a Cancel button, both of which are present, but greyed out.
• If Row #3 is selected, Row #3's msgAct Re-Send & Cancel buttons are now activated and can be clicked. All other rows in the grid each have the buttons in those rows still greyed out.
• If the user clicks either Re-Send or Cancel, the appropriate action for that row in the grid takes place. Re-send adds another row to the grid, while Cancel resets the selection & the grid appears as it did when it was loaded.
• The only options available to the user are to click Re-Send, Cancel or to select a different row. Selection of a different row then enables the buttons on that row (disabling the ones on the previous selection), and clicking on either of them initiates the appropriate action for that row.

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

The question now might be - is there a better way to do this?

感谢@Oleg的宝贵帮助！

Thank you @Oleg for your valuable help!

推荐答案

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

The main problem is creating wrong HTML data.

您在网格的所有行中添加具有相同 ID(id='resendMsg'和id='cancelMsg')的按钮，但是id属性在整个HTML页面上必须是唯一的.如果您尝试通过按ID索引来启用按钮，则可能只会找到第一个具有ID的按钮.通常，它是从第一行开始的按钮.您可以使用name属性代替id属性

You add buttons with the same ids (id='resendMsg' and id='cancelMsg') in all rows of the grid, but id attribute must be unique over the whole HTML page. If you would try enable the button by indexing it by id you will find probably only the first button having the id. It will by typically buttons from the first row. You can use name attribute instead of id attribute

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

Another problem is the usage of wrong value for disabled attribute. You should use disabled='disabled' instead of disabled='true' if you want that the code works correctly in all web browsers.

创建此类按钮的最佳方法是使用自定义格式化程序.您可以在msgAct中添加formatter属性，该属性将直接创建按钮 .该代码可能与以下内容有关

The best way to create such buttons is to use custom formatter. You can add formatter property in the msgAct which would create the buttons directly. The code could be about the following

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

答案描述了使用gridview: true和自定义格式化程序的优点.

The answer described advantages of usage gridview: true and custom formatters.

这篇关于jQuery-jqGrid-在每一行中提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！