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选项）。编辑按钮宽度很小，图标不居中。如何将编辑按钮宽度增加到列宽 - 几个像素，以便单击列中的任何位置开始编辑模式并在列的中心显示编辑图标？如何增加保存广告cancle按钮的宽度，使两者占据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

我发现45px是列的宽度，formatter:"actions"略小。在我看来，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 中设置了margin-right:30px类的ui-pg-div，因此存在主要问题。我之所以能看到，只是因为您之前向我发送了您的演示页面的URL。

所有操作按钮都会将ui-pg-div与ui-inline-edit，ui-inline-del，...一起用于操作按钮。因此，您必须：删除margin-right:30px类的ui-pg-div设置或覆盖margin-right，ui-inline-edit，ui-inline-del的{{1}}和关于ui-inline-save附加属性的ui-inline-cancel。

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

1 个答案: