0
기존 jqGrid (4.6.0)을 free-jqGrid (4.13.6 이상)로 마이그레이션 중입니다. 두 개의 바이올린에 이어 같은 자바 스크립트와 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는 캡션 영역에서 필요한 배경 색상이 없습니다. 여기서 누락 된 것은 무엇입니까? 이 문제를 해결하는 방법?
의 자바 스크립트
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>