使 jqGrid 的 cb 列更宽

Make jqGrid's cb column wider

我正在使用 free-jqGridjqGrid 可以选择为您在网格上放置 selection 复选框。在我的网格上,我的开头有两列,它们由 jqGrid 放置并且没有由我自己的数据支持:记录编号列 'rn' 和记录复选框 selection 'cb'(在我的例子中是多个 select)。

我在 bootstrap 网站上展示了 jqGrid,所以当 loadComplete 事件发生时,我将 'from-control' class 添加到很多编辑中,例如每列搜索框和基本上我可以在页面上找到的每个编辑。 (我也将每个丑陋的小图标替换为 glyphicons。我操纵工具栏按钮的 DOM 使它们成为真正的按钮,因此它们看起来更好并且 chardin.js 工作得很好例如。依此类推。最终结果比原来的要好得多。顺便说一句,我不确定这是否是最佳实践,我找不到更好的方法来使 jqGrid 更多 bootstrappy,但这可以是另一个问题).

当您将 form-control class 应用于复选框时,它会膨胀。这是有益的,因为点击它更容易,您不需要放大镜(就像原来的小复选框一样)。我可以很好地调整我为其提供数据的所有这些数据列的列的大小,但我不知道如何加宽 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");
    

如您所见,我分别加宽了 header 和 td 元素。但这会导致 table 水平滚动条出现。呸!我试图更深入地进入黑客漏洞,并使网格上更宽的列更窄以使滚动条消失,但这没有帮助:

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

一定有办法的。现在丑了截图:

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

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

multiselectWidth: 38

另一种选择:您可以稍后使用免费 jqGrid 的一部分 setColWidth 更改列宽。我最初在 the answer 中介绍了该方法作为旧 jqGrid 版本的插件。因此,例如,以下内容也将起作用:

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

onInitGrid 回调或 jQuery 事件 "jqGridInitGrid" 是很好的地方,您可以在加载数据之前修改网格。

P.S。我现在正在努力在免费的 jqGrid 中包含对 Bootstrap 的更好支持。可能你只需要在下一个版本的 jqGrid 中使用 guiStyle: "bootstrap" 来使 jqGrid 成为 "in Bootstrap style".