背景颜色未出现在 jqGrid 4.6.0 中的 free-jqGrid 中

Question

我正在将现有的 jqGrid (4.6.0) 迁移到 free-jqGrid（4.13.6 或更高版本）。以下两个小提琴具有相同的 JavaScript 和 HTML – 但一个使用 4.6.0 jqGrid，另一个使用 free-jqGrid（现在是 4.13.6）

jqGrid (4.6.0) Fiddle: https://jsfiddle.net/vth5wn64/2/
free-jqGrid (4.13.6) Fiddle: https://jsfiddle.net/vth5wn64/3/

free-jqGrid 字幕区域没有所需的背景颜色。这里缺少什么？如何解决这个问题？

JavaScript

function getCurrentPractice ()
{
    return "Test";
}

function getGridCaption() {
    return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" +
    "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" +
   "<div style='float:right;width:550px;  padding-bottom:20px;'>" +
        "<input type='text' class='form-control' id='filter' placeholder='Search'  style='width:250px; height:30px; float:right; ' />" +
    " </div>" +
    "</div>";
}

$(function () {

    ////Grid
    var myData = [
                       { "Practice": "Test1", "ProviderID": 1, "IsPartner": true, "IsActive": true },
                       { "Practice": "Test2", "ProviderID": 2, "IsPartner": true, "IsActive": true }
    ]

    var currentPractice = "P";
    var grid = $("#list2");
    grid.jqGrid({
        datatype: 'local',
        data: myData,
        additionalProperties: ["IsActive", "IsPartner"],
        //additionalProperties is needed since the name is different
        postData:
        {
            practiceName: function () { return currentPractice }
        },

        colNames: [
                    'Practice',
                    'ProviderID'
        ],
        colModel: [
            { name: 'Practice', width: 220 },
            { name: 'ProviderID', width: 320 }
        ],
        ignoreCase: true,
        loadonce: true,
        rowNum: 25,
        rowList: [15, 25, 35, 50],
        pager: '#pager2',
        viewrecords: true,
        sortable: true,
        caption: getGridCaption(),
         beforeSelectRow: function (rowid, e) {
            //Avoid selection of row
            return false;
        },
        loadComplete: function () {

        }


    });
    grid.jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

    //Filter Toolbar
    //grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
    $("#advancedSearch").click(function () {
        grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
    });


    //Top Search
    $("#filter").on('keyup', function () {
        var searchFiler = $("#filter").val(), f;

        //alert(searchFiler);

        if (searchFiler.length === 0) {
            grid[0].p.search = false;
            $.extend(grid[0].p.postData, { filters: "" });
        }
        f = { groupOp: "OR", rules: [] };
        f.rules.push({ field: "Practice", op: "cn", data: searchFiler });
        grid[0].p.search = true;
        $.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
        grid.trigger("reloadGrid", [{ page: 1, current: true }]);
    });


});

HTML

<div style="float:left;">
    <div id="divGrid" style="width: 680px; min-height: 50px; float: left;">
        <table id="list2"></table>
        <div id="pager2"></div>
    </div>
</div>

Answer 1

首先，两个演示都使用classes glyphicon、glyphicon-check和form-control。因此，我假设您除了 jQuery UI CSS.

之外还使用 Bootstrap CSS

我不确定您想要哪种布局，但有一件事绝对是个问题。您在捕获（标题）div 内部使用带有 float:right 的内部 divs。众所周知，使用 float 属性的块的 classic 对齐存在问题。通常通过包含一些具有 clear: both; 的辅助元素（例如，再添加一个 div）来解决它。 jQuery UI CSS 包含 ui-helper-clearfix class，这简化了将浮动包装属性应用于 parent 元素。

简而言之，您只需添加额外的

<div class='ui-helper-clearfix'></div>

在内容的末尾，您在 jqGrid 的标题中插入。参见 https://jsfiddle.net/vth5wn64/5/

背景颜色未出现在 jqGrid 4.6.0 中的 free-jqGrid 中

Background color not appearing in free-jqGrid that is present in jqGrid 4.6.0

jqgrid

free-jqgrid