我试图根据某些行值为jqgrid行提供背景颜色。我使用的代码如下。还应该提到的是,表生成的代码对我来说是锁定的,我只添加了jqgrid部分。 rowaatr中的回调函数正常工作(使用调试器进行检查)。 问题是背景颜色没有变化。 我使用了一个类和一个直接的样式分配没有结果。此外,我已经使用了!重要的颜色,没有运气。
我使用的是jqGrid 4.6.0,Firefox 31和Chrome 37,jquery 1.10.2和jquery-ui-1.10.3。
function BuildTable(airmoves) {
/* Removing previous table if exists */
if ($('#airmovestablewrapper').get(0)){
$('#airmovestablewrapper').remove();
}
/* adding a table wrapper */
$('#divsearchresults').append('<div id="airmovestablewrapper"></div>');
$('#airmovestablewrapper').append('<table id="tblairmoves"></table>');
row = '<thead><tr><th>callsign</th><th>ADEP</th><th>ADEST</th><th>MoveTime</th><th>AircraftRegistration</th><th>Type</th></tr></thead>';
$('#tblairmoves').append(row);
for (i=0;i<airmoves.length;i++)
{
row = '<tr>';
row = row + '<td>' + airmoves[i].callsign + '</td>';
row = row + '<td>' + airmoves[i].ADEP + '</td>';
row = row + '<td>' + airmoves[i].ADEST + '</td>';
row = row + '<td>' + airmoves[i].MoveTime + '</td>';
row = row + '<td>' + airmoves[i].AircraftRegistration + '</td>';
row = row + '<td>' + airmoves[i].Type + '</td>';
row = row + '</tr>';
$('#tblairmoves').append(row);
}
row = '</tbody>';
$('#tblairmoves').append(row);
$('#divsearchresults').append('<div id="pager"></div>');
tableToGrid('#tblairmoves',{
dataType: 'local',
rowNum: 20,
rowList: [20,30,40],
pager: '#pager',
height: '100%',
width: 'autowidth',
viewrecords: true,
gridview: true,
colNames:['Type','Χαρακτηριστικό', 'ADEP','ADEST','Ώρα κίνησης', 'Νηολόγιο'],
colModel:[
{name:'Type',index:'Type', width:150},
{name:'callsign',index:'callsign', width:100},
{name:'ADEP',index:'ADEP', width:50, align:'center'},
{name:'ADEST',index:'ADEST', width:50, align:'center'},
{name:'MoveTime',index:'MoveTime', width:150, align:'center'},
{name:'AircraftRegistration',index:'AircraftRegistration', width:120, align:'center'}
],
rowattr: function (rd)
{
if (rd.Type === "0") {
//return {"style": "background-color:#F4AC91;"};
return {"class": "arrivals"};
}
else {
if (rd.Type === "1") {
//return {"style": "background-color:#EAE69D;"};
return {"class": "departures"};
}
else {
//return {"style": "background-color:#32E69D;"};
return {"class": "other"};
}
}
},
caption: "Κινήσεις αεροσκαφών"
});
/* Center jqGrid caption starts */
$("#tblairmoves").closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-titlebar")
.css("text-align", "center")
.children("span.ui-jqgrid-title")
.css("float", "none");
/* Center jqGrid caption ends */
$("#pager_left, #pager_center", "#pager").width(0);
/* hinding columns starts */
$("#tblairmoves").jqGrid('hideCol','Type');
/* hinding columns ends */
/* maximum lines per screen 20 starts */
$('#tblairmoves').setGridParam({ rowNum: 20 }).trigger("reloadGrid");
/* maximum lines per screen 20 ends */
}
使用过的课程。我也在课堂上尝试了.ui-widget-content而没有再好运。
.arrivals {
background-color: rgb(244, 172, 145);
}
.departures {
background-color: rgb(234, 230, 157);
}
.other {
background-color: rgb(50, 230, 157);
}
最终更新
针对上述问题的工作功能。
function BuildTable1(airmoves) {
$('#tblairmoves').jqGrid('GridUnload');
jQuery("#tblairmoves").jqGrid({
datatype: 'local',
data: airmoves,
height: '100%',
colNames:['Type','Χαρακτηριστικό', 'ADEP','ADEST','Ώρα κίνησης', 'Νηολόγιο'],
colModel:[
{name:'Type',index:'Type', width:150, hidden: true},
{name:'callsign',index:'callsign', width:100},
{name:'ADEP',index:'ADEP', width:50, align:'center'},
{name:'ADEST',index:'ADEST', width:50, align:'center'},
{name:'MoveTime',index:'MoveTime', width:150, align:'center'},
{name:'AircraftRegistration',index:'AircraftRegistration', width:120, align:'center'}],
afterInsertRow : function(rowid, data) {
var trElement = jQuery("#"+ rowid,jQuery('#tblairmoves'));
trElement.removeClass('ui-widget-content');
if (data.Type === "0") {
trElement.addClass('arrivals');
}
else {
if (data.Type === "1") {
trElement.addClass('departures');
}
else {
trElement.addClass('other');
}
}
},
rowNum:20,
rowList:[10,20,30],
pager: '#pager',
viewrecords: true,
caption: "Κινήσεις αεροσκαφών" });
$("#pager_left, #pager_center", "#pager").width(0);
}
样式
.arrivals {
background-color: rgb(244, 172, 145) !important;
background-image: none;
}
.departures {
background-color: rgb(234, 230, 157) !important;
background-image: none;
}
.other {
background-color: rgb(50, 230, 157) !important;
background-image: none;
}