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）小提琴：https://jsfiddle.net/vth5wn64/2/
free-jqGrid（4.13.6）小提琴：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

首先，这两个演示都使用了类glyphicon，glyphicon-check和form-control。因此，我认为你还使用了Bootstrap CSS来实现jQuery UI CSS。

我不确定，您希望拥有哪种确切的布局，但有一点肯定是一个问题。您在捕获（标题）div中使用带有float:right的内部div。众所周知，使用float属性的块的经典对齐存在问题。一个人通常通过包含一些具有clear: both;的辅助元素（例如一个div）来解决它。 jQuery UI CSS包含ui-helper-clearfix类，它简化了将浮动包装属性应用于父元素。

简而言之，您只需添加其他

即可

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

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

背景颜色不出现在jqGrid 4.6.0

1 个答案: