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

Question

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

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

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

如果有人遇到过类似的问题，请帮忙。注意我正在使用 bootstrap 主题。

$("#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 修复程序才能获得最终解决方案。

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

free jqGrid, column chooser popup UI not appearing correctly

jqgrid

free-jqgrid