使jqGrid的cb列更宽

Question

我正在使用free-jqGrid，jqGrid可以选择将选择复选框放到网格上。在我的网格上，我在开头有两列，由jqGrid放置，而不是由我自己的数据备份：记录编号列'rn'和记录选择'cb'的复选框（多在我的情况下选择）。

我在引导程序网站上展示了jqGrid，所以当loadComplete事件发生时，我会将'from-control'类添加到很多编辑中，例如每列搜索框，基本上每个编辑我可以在页面上找到。 （我还将每个丑陋的小图标替换为glyphicons。我操纵工具栏按钮的DOM，使它们成为真正的按钮，因此它们看起来更好，chardin.js就可以很好地工作了。等等等等。最终的结果比原来的要好得多。顺便说一下，我不确定这是不是最好的做法，我找不到更好的方法让jqGrid更具引导性，但这可能是另一个问题）

当您将form-control类应用于复选框时，它会膨胀。这是有益的，因为它更容易点击它，你不需要放大镜玻璃（就像原来的小复选框）。我可以很好地调整我为其提供数据的所有数据列的列，但我无法弄清楚如何扩展cb列，以便它可以容纳膨胀的复选框。

1. 我尝试在colModel中添加该列的配置：

两个

{
    name: 'cb',
    width: 38,
    align: 'center',
    sortable: false,
}

和

{
    width: 38,
    align: 'center',
    sortable: false,
}

失败，我从jqGrid收到错误，指出colModels的数量与提供的数据数量不匹配。这是真的，因为cb列背后的数据没有由我支持。

1. 我尝试了loadComplete

   var $ajaxGrid = $("#ajaxGrid");
   $ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
   

那没有给我一个错误，但也没有改变任何东西。也许我应该将它放入另一个事件处理程序？哪个？

1. 然后我试着沿着艰难的操纵道路前进：

   $("#ajaxGrid_cb").css("width", "38px");
   $(".td_cbox").css("width", "38px");
   

如您所见，我单独加宽标题和td元素。但这会导致表格水平滚动条出现。呸！我试图更深入地进入黑洞，并使网格上更宽的列更窄以使滚动条消失，但这没有帮助：

$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");

一定有办法。现在它很难看。截图：



（您还可以看到另一个样式问题是我在Combined中指定的align: 'center'列colModel，但它没有效果。）

Answer 1

您可以使用multiselectWidth指定多选列的宽度：

multiselectWidth: 38

还有一个选择：您可以稍后使用setColWidth更改列宽，这是免费jqGrid的一部分。我最初在the answer中引入了方法作为旧jqGrid版本的插件。因此，例如，以下内容也将起作用：

onInitGrid: function () {
    $(this).jqGrid("setColWidth", "cb", 38);
}

onInitGrid回调或jQuery事件“jqGridInitGrid”是个好地方，你可以在加载数据之前修改网格。

P.S。我现在正在努力在自由jqGrid中包含更好的Bootstrap支持。可能你只需要在下一版本的jqGrid中使用guiStyle: "bootstrap"来使jqGrid成为“Bootstrap样式”。