Проблемы с Free JqGrid и использованием InlineNav, Frozen Columns и заголовков групп
Я использую бесплатную JqGrid 4.15 и имею графические глюки с InlineNav, Frozen Columns и заголовками групп.
Первая проблема заключается в том, что столбцы накладываются друг на друга. Вторая проблема заключается в том, что в верхнем левом углу есть маленькие квадраты, которые просто остаются на том же месте при использовании горизонтальной полосы прокрутки. Я не уверен, как исправить эти проблемы.
Вот скрипта js, которая показывает, в чем проблемы https://jsfiddle.net/jaredml/r4bda5pL/18/
вот код также
$(function() {
//debugger;
$("#grid").jqGrid({
url: "/Home/GetBidValues",
datatype: 'json',
mtype: 'Get',
//table header name
colNames: ['Client Cost', 'ElementId', 'Note', 'Area', 'Element', 'Item', 'Qty', 'Description', 'Project Mgmt', 'Principle', //MGMT
'Concept Art', '3D Modeling', 'Inhouse CAD', 'Tech/Cad', 'Jr. Engineering', 'Sr.Engineering', 'Eng. Sub', 'Comptr Mat.', 'Design Materials', //Design & Engineering
'Materials', 'Lead', 'Materials', 'Lead', 'Materials', 'Lead', 'Materials', 'Lead', 'Materials', 'Lead' //Construction
], //Othr Misc
//colModel takes the data from controller and binds to grid
colModel: [{
name: "Sum",
// formatter: sumFmatter,
editable: "hidden",
frozen: true,
width: 70,
align: 'center'
}, {
key: true,
hidden: true,
name: 'ElementId',
index: 'ElementId',
frozen: true,
editable: false
}, {
key: false,
name: 'Note',
index: 'Note',
frozen: true,
editable: true,
width: 70,
align: 'center'
}, {
key: false,
name: 'Area',
index: 'Area',
frozen: true,
editable: true,
width: 70,
align: 'center'
}, {
key: false,
name: 'Element',
index: 'Element',
frozen: true,
editable: true,
width: 70,
align: 'center'
}, {
//hidden: true,
name: 'Item',
index: 'Item',
frozen: true,
editable: true,
width: 70,
align: 'center'
}, {
key: false,
name: 'Qty',
index: 'QTY',
frozen: true,
editable: true,
width: 70,
align: 'center'
}, {
key: false,
name: 'Description',
index: 'Description',
frozen: true,
editable: true,
width: 70,
align: 'center'
},
//Fabrication
{ //MGMT
key: false,
name: 'FabMGMTProjMG',
index: 'FabMGMTProjMG',
editable: true,
width: 70,
align: 'center'
}, {
//key: true,
//hidden: true,
name: 'FabMGMTPrinc',
index: 'FabMGMTPrinc',
editable: true,
width: 70,
align: 'center'
},
{ //Design & Engineering
key: false,
name: 'FabDAEConcArt',
index: 'FabDAEConcArt',
editable: true,
width: 70
}, {
key: false,
name: 'FabDAE3DMod',
index: 'FabDAE3DMod',
editable: true,
width: 70
}, {
key: false,
name: 'FabDAEInCad',
index: 'FabDAEInCad',
editable: true
}, {
//key: true,
//hidden: true,
name: 'FabDAETechCad',
index: 'FabDAETechCad',
editable: true
}, {
key: false,
name: 'FabDAEJrEng',
index: 'FabDAEJrEng',
editable: true
}, {
key: false,
name: 'FabDAESrEng',
index: 'FabDAESrEng',
editable: true
}, {
key: false,
name: 'FabDAEEngSub',
index: 'FabDAEEngSub',
editable: true
}, {
// key: true,
//hidden: true,
name: 'FabDAECmptrMat',
index: 'FabDAECmptrMat',
editable: true
}, {
key: false,
name: 'FabDAEDesMat',
index: 'FabDAEDesMat',
editable: true
},
{ //Construction
key: false,
name: 'FabConCarpMat',
index: 'FabConCarpMat',
editable: true
}, {
key: false,
name: 'FabConCarpLead',
index: 'FabConCarpLead',
editable: true
}, {
//key: true,
//hidden: true,
name: 'FabConMetMat',
index: 'FabConMetMat',
editable: true
}, {
key: false,
name: 'FabConMetLead',
index: 'FabConMetLead',
editable: true
}, {
key: false,
name: 'FabConElecMat',
index: 'FabConElecMat',
editable: true
}, {
key: false,
name: 'FabConElecLead',
index: 'FabConElecLead',
editable: true
}, {
//key: true,
//hidden: true,
name: 'FabConMechMat',
index: 'FabConMechMat',
editable: true
}, {
key: false,
name: 'FabConMechLead',
index: 'FabConMechLead',
editable: true
}, {
key: false,
name: 'FabConCNCH20Mat',
index: 'FabConCNCH20Mat',
editable: true
}, {
key: false,
name: 'FabConCNCH20Lead',
index: 'FabConCNCH20Lead',
editable: true
}
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30, 40],
gridview: true,
ignoreCase: true,
rowNumbers: false,
shrinkToFit: false,
height: '100%',
width: 1000,
viewrecords: true,
//footerrow: true,
//userDataOnFooter: true,
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
}
});
$('#grid').jqGrid('navGrid', '#pager', {
edit: false,
add: false,
del: false,
search: false,
view: false
});
$("#grid").jqGrid('setFrozenColumns');
$('#grid').jqGrid('inlineNav', '#pager', {
edit: true,
add: true,
del: true,
cancel: true,
search: true,
refresh: true,
editparams: {
keys: true
}
}, {
// edit options
zIndex: 100,
url: '/Home/EditBid',
//closeOnEscape: true,
//closeAfterEdit: true,
recreateForm: true,
afterComplete: function(response) {
if (response.responseText) {
alert(response.responseText);
}
}
}, {
// add options
zIndex: 100,
url: "/Home/CreateBid",
//closeOnEscape: true,
//closeAfterAdd: true,
afterComplete: function(response) {
if (response.responseText) {
alert(response.responseText);
}
}
}, {
// delete options
zIndex: 100,
url: "/Home/DeleteBid",
//closeOnEscape: true,
//closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this task?",
afterComplete: function(response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
//group headers
$("#grid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [{
startColumnName: 'FabMGMTProjMG',
numberOfColumns: 22,
titleText: 'Fabrication'
}]
});
$("#grid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [{
startColumnName: 'FabMGMTProjMG',
numberOfColumns: 2,
titleText: 'MGMT'
},
{
startColumnName: 'FabDAEConcArt',
numberOfColumns: 10,
titleText: 'Design & Engineering'
},
{
startColumnName: 'FabConCarpMat',
numberOfColumns: 10,
titleText: 'Construction'
}
]
});
$("#grid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [ //Fabrication
//construction
{
startColumnName: 'FabConCarpMat',
numberOfColumns: 2,
titleText: 'Carpentry'
},
{
startColumnName: 'FabConMetMat',
numberOfColumns: 2,
titleText: 'Metal'
},
{
startColumnName: 'FabConElecMat',
numberOfColumns: 2,
titleText: 'Electrical'
},
{
startColumnName: 'FabConMechMat',
numberOfColumns: 2,
titleText: 'Mech.'
},
{
startColumnName: 'FabConCNCH20Mat',
numberOfColumns: 2,
titleText: 'CNC & H20 Jet'
}
]
});
$("#grid_Sum,#grid_Note,#grid_Area,#grid_Element,#grid_Item,#grid_Qty,#grid_Description").attr("rowspan", "2");
var $frozenHDiv = $("#grid").closest(".ui-jqgrid-view");
$frozenHDiv.find(".frozen-div.ui-jqgrid-hdiv");
// remove unneeded rowspan attribute
$frozenHDiv.find("tr.ui-jqgrid-labels");
$frozenHDiv.children("th");
$frozenHDiv.removeAttr("rowspan");
$frozenHDiv.find("tr.ui-jqgrid-labels").height(45);
$frozenHDiv.find("tr.ui-search-toolbar").height(22);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.src.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>