JqGrid - 如何使清晰的搜索按钮可见？答案

【问题标题】：JqGrid - how to make the clear search button visible?JqGrid - 如何使清晰的搜索按钮可见？
【发布时间】：2016-04-21 09:51:02
【问题描述】：

我的 JqGrid 中有一个过滤器工具栏，但未显示 Clearfield“x”超链接。没有足够的空间供 ui-search-clear 单元格显示。如果我可以使用类 ui-search-input 控制单元格内搜索的输入文本框的大小，那么它将显示。我原以为这会默认工作。那么我该如何解决呢？我的网格定义如下；

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["No", "Company", "Trade", "Recommendation", ""],
        colModel: [
            { name: "AssessmentNo", label: "AssessmentNo", width:80, align:"center" },
            { name: "Company", label: "Company", width:400, searchoptions: { sopt: ["cn"] } },
            { name: "Trade", label: "Trade", width: 220, searchoptions: { sopt: ["cn"] } },
            { name: "Recommendation", label: "Recommendation", width: 150 },
            { name: "Links", label: "Links", search: false, align: "center" }
        ],
        cmTemplate: { width: 100, autoResizable: true },
        loadonce: true,
        forceClientSorting: true,
        rowNum: 20,
        pager: "#pager",
        gridview: true,
        ignoreCase: true,
        shrinkToFit: false,
        rownumbers: true,
        sortname: "AssessmentNo",
        viewrecords: true,
        sortorder: "asc",
        height: "100%"
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
}

我的工具栏看起来像；

【问题讨论】：

您使用哪个版本的 jqGrid 以及来自哪个 jqGrid 分支？您包含了forceClientSorting: true 选项，该选项仅存在于我开发的free jqGrid 中，但我无法在免费的jqGrid 中重现该问题（例如，请参见the demo）。您能否提供重现您问题的演示？
我使用的是 jqGrid 4.13.2，免费版。
您能否提供重现您的问题的演示？我想您在页面上包含的其他 CSS 可能会产生一些问题。
我已经在问题中放入了来自 IE 开发人员工具的网格标题的 HTML。
看不到如何将JqGrid放入JsFiddle

标签： jquery jqgrid

【解决方案1】：

我遇到了同样的问题，但仅当 jQgrid 呈现为子网格时。包含过滤器重置图标的表格单元格的样式设置为一个像素。以下 jQuery 解决了 jqGrid 4.15.5 的问题 - 免费：

$("td.ui-search-clear").attr('style', 'width:10px;');

【讨论】：

【解决方案2】：

 grid.jqGrid({

}).navGrid('#grid', {search: true}

在您的 filterGrid 中写入 search:true

【讨论】：

这不是答案，因为搜索按钮存在，但它们大多不可见，因为它们所在的表格单元格不够宽，无法显示它们。
我已经在我的项目中解决了这个问题 Update latest js and CSS of jqgrid click hear
那是我买不到的付费版本。事实上，免费版本非常好，除了这个小故障。

【解决方案3】：

我发现了问题。我的一个 CSS 样式表有这个设置；

table {
    margin: 1em;
    border-collapse: collapse;
    table-layout: inherit;
}

所以我删除了边距，问题解决了，并且学到了关于上述通用样式设置的重要一课。

【讨论】：