使 jqGrid 的 cb 列更宽
Make jqGrid's cb column wider
我正在使用 free-jqGrid
,jqGrid
可以选择为您在网格上放置 selection 复选框。在我的网格上,我的开头有两列,它们由 jqGrid
放置并且没有由我自己的数据支持:记录编号列 'rn'
和记录复选框 selection 'cb'
(在我的例子中是多个 select)。
我在 bootstrap 网站上展示了 jqGrid
,所以当 loadComplete
事件发生时,我将 'from-control' class 添加到很多编辑中,例如每列搜索框和基本上我可以在页面上找到的每个编辑。 (我也将每个丑陋的小图标替换为 glyphicons
。我操纵工具栏按钮的 DOM 使它们成为真正的按钮,因此它们看起来更好并且 chardin.js 工作得很好例如。依此类推。最终结果比原来的要好得多。顺便说一句,我不确定这是否是最佳实践,我找不到更好的方法来使 jqGrid 更多 bootstrappy,但这可以是另一个问题).
当您将 form-control
class 应用于复选框时,它会膨胀。这是有益的,因为点击它更容易,您不需要放大镜(就像原来的小复选框一样)。我可以很好地调整我为其提供数据的所有这些数据列的列的大小,但我不知道如何加宽 cb
列,以便它可以容纳膨胀的复选框。
- 我尝试在
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");
如您所见,我分别加宽了 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".
我正在使用 free-jqGrid
,jqGrid
可以选择为您在网格上放置 selection 复选框。在我的网格上,我的开头有两列,它们由 jqGrid
放置并且没有由我自己的数据支持:记录编号列 'rn'
和记录复选框 selection 'cb'
(在我的例子中是多个 select)。
我在 bootstrap 网站上展示了 jqGrid
,所以当 loadComplete
事件发生时,我将 'from-control' class 添加到很多编辑中,例如每列搜索框和基本上我可以在页面上找到的每个编辑。 (我也将每个丑陋的小图标替换为 glyphicons
。我操纵工具栏按钮的 DOM 使它们成为真正的按钮,因此它们看起来更好并且 chardin.js 工作得很好例如。依此类推。最终结果比原来的要好得多。顺便说一句,我不确定这是否是最佳实践,我找不到更好的方法来使 jqGrid 更多 bootstrappy,但这可以是另一个问题).
当您将 form-control
class 应用于复选框时,它会膨胀。这是有益的,因为点击它更容易,您不需要放大镜(就像原来的小复选框一样)。我可以很好地调整我为其提供数据的所有这些数据列的列的大小,但我不知道如何加宽 cb
列,以便它可以容纳膨胀的复选框。
- 我尝试在
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");
如您所见,我分别加宽了 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".