javascript - 让jqGrid的cb列更宽

Question

我正在使用 free-jqGrid 并且 jqGrid 可以选择将选择复选框放置到网格上。在我的网格中，开头有两列，由 jqGrid 放置，并且没有由我自己的数据备份:记录编号列 'rn' 和记录复选框选择'cb'(在我的例子中是多选)。

我在 bootstrap 网站上展示了 jqGrid，因此当 loadComplete 事件发生时，我将“from-control”类添加到大量编辑中，例如 per列搜索框以及基本上我可以在页面上找到的所有编辑。 (我还将每个丑陋的小图标替换为 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 列后面的数据不是我备份的。

我尝试在loadComplete

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

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

然后我尝试走上崎岖的操纵之路:

$("#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 列，我在 colModel 中指定 align: 'center' 但它有没有效果。)

Answer 1

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

multiselectWidth: 38

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

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

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

附注我现在正在努力在免费的 jqGrid 中提供对 Bootstrap 的更好支持。也许您只需要在下一版本的 jqGrid 中使用 guiStyle: "bootstrap" 即可使 jqGrid 成为“Bootstrap 样式”。