Question

大家好，我在jqGrid工作，我在尝试自定义行编辑时遇到了一些问题。我想，当用户在一行上处于编辑模式时，禁用其他行上的编辑和删除按钮。这是一个显示类似情况的链接（https://stackoverflow.com/questions/20116442/jqgrid-how-to-customize-inline-actions-buttons）！

这是我用来禁用应用该课程的其他行的代码＆＃39; not-editable-row＆＃39;在未选择的行上，它工作正常，但问题是按钮仍处于活动状态，用户可以点击它们（这样也可以更改行上的按钮！）。没有执行任何操作，但我想知道是否有办法避免此行为。 强调文字

        .....
    autowidth: true,
    colNames: ["Options","Dec Id","Address1", "Address2","Rule","Action", "Subddress1", "Subddress2", "Recode","Maybereason","Maybeid"],
    colModel: [
         {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
                 formatoptions:{
                     editbutton:true,
                     delbutton:true,
                     restoreAfterError:false,
                     keys: false, // true if we want use [Enter] key to save the row and [Esc] to cancel editing.
                     onEdit:function(rowid) {
                        $('#decisionGridPager').hide();
                          var myGrid =$("#decisionGrid");
                          var grid = $('#decisionGrid')[0], rows = grid.rows,cRows = rows.length, iRow, row, trClasses;
                          for (iRow = 0; iRow < cRows; iRow++) {
                              row = rows[iRow]; // row.id is the rowid
                              //alert(row.id);
                              if(rowid!=row.id){
                                $(row).addClass('not-editable-row');
                                var v = myGrid.jqGrid ('getCell', row, 'act');

                              }//else{alert("current row");}
                          }
                     },
                     onSuccess:function(jqXHR) {
                         return true;
                     },
                     onError:function(rowid, jqXHR, textStatus) {
                          if(jqXHR.responseText !== ''){
                            alert(textStatus+": "+jqXHR.responseText);

                          }                                
                     },

                    afterSave:function(rowid) {
                         $('#decisionGridPager').show();
                         alert("record saved");
                     },
                     afterRestore:function(rowid) {
                         $('#decisionGridPager').show();
                         return false;
                     }
                 }},
        {name: "id", width: 20, hidden:true},
        {name: "address1",required:true,editable:true,edittype:'text',index:"address1",sortable:true,
          editoptions: {dataInit:vcode,size:10, maxlength: 6}, width: 20, editrules:{required:true}},
        {name: "address2", editable:true, width: 20, align: "right",editoptions: {dataInit:vcode,size:10, maxlength: 6}},
        //dataUrl:'/wacm/rulesrv?client=true' or dataUrl:'/wacm/rulesrv'

.......

为了避免在用户处理某行时进一步的交互，例如隐藏了寻呼机，然后在afterSave函数中再次显示，而如果在服务器端发生任何问题并且执行onError函数，则用户被迫解决问题继续之前。我的目标是强制用户一次处理一行。非常感谢任何建议。[/ p>

Answer 1

我修改了您添加if课程的not-editable-row语句。只需将#gridName替换为您的网格id：

if (rowid != row.id) {
    $(row).addClass('not-editable-row');
    var v = myGrid.jqGrid('getCell', row, 'act');

    // hide the edit/delete buttons on non-editable rows (not the row we are editing)
    $("#gridName tr#" + row.id + " .ui-inline-edit").hide();
    $("#gridName tr#" + row.id + " .ui-inline-del").hide();
}
else {
    // show the edit/delete buttons for the current row
    $("#gridName tr#" + row.id + " .ui-inline-edit").show();
    $("#gridName tr#" + row.id + " .ui-inline-del").show();
}

这有帮助吗？

Answer 2

我发现这个解决方案基于example：

          for (iRow = 0; iRow < cRows; iRow++) {
            row = rows[iRow]; // row.id is the rowid
            if(rowid!=row.id){
              if ($(row).hasClass("jqgrow")) {
                 $(row).hide();
               } 

          }

        }`

在调用onEdit函数时使用此代码，然后在afterSave函数内部恢复先前隐藏的行的可见性。我还尝试了另一个解决方案，在每行的单元格上添加css类addClass（'ui-state-disabled'）但当然用户仍然点击按钮，事实上'ui-state-disabled'它只是css而无法避免用户交互。我不喜欢在页面上添加和删除元素，但这是我发现的唯一解决方案，直到现在。感谢user3069459，我们将不胜感激。

Answer 3

这将隐藏整个网格的内联编辑图标

$('.ui-inline-edit').hide();

您可以将其添加为loadComplete事件的一部分，例如：

loadComplete: function () {
    $('.ui-inline-edit').hide(); 
},

jqGrid：在线编辑模式下禁用编辑和删除按钮

3 个答案: