Question

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

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

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

如果有人遇到类似问题，请帮助。注意我使用的是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无法正确显示

1 个答案: