免费的jqGrid，列选择器弹出UI无法正确显示

Question

我正在使用免费的 jqgrid 和实现的列选择器来显示隐藏列，该功能按预期工作，但显示的弹出窗口没有正确的 UI 呈现。

我尝试了很多搜索并浏览了免费 jqgrid 的文档，但我不知道我做错了什么。

我能够在下面的 url 中重现演示中的错误。

如果有人遇到类似的问题，请提供帮助。注意我正在使用引导主题。

$("#sampleGrid").navButtonAdd('#sampleGridPager',{
caption: "",
title: "Choose Columns",
buttonicon: "fa fa-table",
onClickButton: function () {
$("#sampleGrid").jqGrid('columnChooser');
}
});

https://jsfiddle.net/1vk5ku2y/2/

Answer 1

需要将 jQuery UI CSS 添加到演示中，因为它是columnChooser所必需的。你应该添加一些jQuery UI主题，它对应于Bootsrap CSS主题。例如

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css

在那之后，https://jsfiddle.net/OlegKi/1vk5ku2y/4/已经得到了更好的结果。您需要添加次要的 CSS 修复才能获得最终解决方案。