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

问题描述：

我正在将现有的jqGrid（4.6.0）迁移到free-jqGrid（4.13.6或更高版本）。下面的两个小提琴具有相同的JavaScript和HTML - 但是一个与4.6.0的jqGrid和其他与*的jqGrid（4.13.6现在）没有出现在jqGrid中的free-jqGrid中的背景颜色4.6.0

的jqGrid（4.6.0）小提琴：https://jsfiddle.net/vth5wn64/2/
*的jqGrid（4.13.6）小提琴：https://jsfiddle.net/vth5wn64/3/

的*的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>

答

首先所有，这两个演示使用类,glyphicon-check和form-control。因此，我想你可以使用Bootstrap CSS作为jQuery UI CSS的补充。

我不确定，你想要的确切布局，但有一件事是明确的问题。在捕获（标题）div内使用内部div与float:right。众所周知，使用float属性的块的经典对齐存在问题。一般通过包含一些辅助元素（例如一个div）来解决它，其具有clear: both;。 jQuery UI CSS包含ui-helper-clearfix类，它简化了将浮动包装属性应用于父元素。

总之，你只需要添加额外的

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

在对内容结束后，你在jqGrid的的标题插入。见https://jsfiddle.net/vth5wn64/5/

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

相关推荐