如何强制操作按钮出现在 jqgrid 的同一行中

Question

使用下面的 colmodel 将操作按钮添加到 jqGrid 列。 列宽 45 足以容纳同一行中的两个按钮。 编辑和删除按钮出现在单独的行中，并且行高增加。 由于未知原因，两个按钮前都有空白，没有出现在列的左侧。

如果内联编辑开始，保存和取消按钮也会出现在单独的行中。

如何在增加列宽的情况下强制按钮出现在同一行？

grid.jqGrid({
  colModel: [{name:_actions,width:45,
  formatter:"actions",
  formatoptions:
    {keys:true}
}, ....

更新

工具栏包含按钮右侧的文本。从样式中删除 30px 会创建重叠按钮，因此我无法删除它。

根据我添加的 Oleg 建议

.ui-inline-edit, .ui-inline-del, .ui-inline-save, .ui-inline-cancel
{
    margin-right: 0px !important;
}

和

                colModel: [{"hidden":false,"label":" Muuda ","name":"_actions","width":($.browser.webkit == true? 58: 53)
,"align":"center","sortable":false,"formatter":"actions","formatoptions":{"keys":true,"delbutton":false,"onSuccess":function (jqXHR) {
actionresponse = jqXHR;
return true;
}
,"afterSave":function (rowID) {
cancelEditing($('#grid'));aftersavefunc(rowID,actionresponse)}
,"onError":errorfunc
,"extraparam":{"_dokdata":FormData
},"afterRestore":setFocusToGrid
,"onEdit":function (rowID) {
                            if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
                                       cancelEditing($('#grid'));
                           lastSelectedRow = rowID;
                                  }
}},

样式，但这不会改变任何东西，按钮仍然出现在两行中。如何解决？

更新 2

添加 fixed: true 将按钮放到同一行。 有两个问题：

按钮很小

列仅包含编辑按钮（使用了 delbutton:false 选项）。 编辑按钮宽度小，图标不居中。 如何将编辑按钮宽度增加到列宽 - 几个像素，以便单击列中的任意位置启动编辑模式并在列中心显示编辑图标？ 如何增加保存广告取消按钮的宽度，使两者都占用 50%- 几个像素的操作列宽度？

多次快速点击会导致编辑按钮停止工作

保存按钮与编辑按钮出现在同一位置，保存到服务器需要一些时间。 如果快速单击此位置，则在保存完成之前切换内联编辑模式并且自动完成控件 不再创建。 之后，编辑按钮根本不起作用。 如何防止多次保存按钮点击：如果点击一次或其他解决方案禁用保存按钮或整个网格并显示“正在保存...”消息直到保存完成？

使用的样式：

td.ui-pg-button > div.ui-pg-div { margin-right: 30px } 

colmodel：

colModel: [{
fixed:true,
label:" Change ",
name:"_actions",
width:($.browser.webkit == true? 58: 53)
,align:"center",
sortable:false,
formatter:"actions",
formatoptions:{"keys":true,"delbutton":false,
  "onSuccess":function (jqXHR) {actionresponse = jqXHR;return true;}
  ,"afterSave":function (rowID) {
      cancelEditing($('#grid'));aftersavefunc(rowID,actionresponse);actionresponse=null; }
  ,"onError":errorfunc
  ,"extraparam":{"_dokdata":FormData
  },
afterRestore:setFocusToGrid
,onEdit:function (rowID) {
     if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
        cancelEditing($('#grid'));
     lastSelectedRow = rowID;
   }
}}

Answer 1

我发现formatter:"actions" 的列宽度为 45px，有点小。在我看来，53px 或 58px 看起来更好。计算如下：每个按钮都有 16px。将同时显示两个按钮。第二个按钮（删除或取消）有left-margin:5px。此外，所有按钮都将放置在具有margin-left: 8px; 的 div 内。如果你想在第二个按钮的右侧有相同的边距，总宽度应该是 8+16+5+16+8=53px。在使用 Webkit 浏览器的情况下，由于列宽的其他计算，它应该多 5px（计算将没有边距和填充，默认为 5px）。所以我建议你使用

width: ($.browser.webkit == true? 58: 53)

您存在主要问题是因为您在 CSS 中设置了 ui-pg-div 类的 margin-right:30px。我之所以能看到这一点，是因为您之前将演示页面的 URL 发给了我。

所有动作按钮都使用ui-pg-div 和ui-inline-edit, ui-inline-del, ... 作为动作按钮。所以你必须：要么删除ui-pg-div类的margin-right:30px设置，要么覆盖ui-inline-edit、ui-inline-del、ui-inline-save和ui-inline-cancel的ui-inline-cancel附加属性的margin-right。