不应用jqGrid样式中的rowaatr

时间:2014-09-12 06:50:51

标签: css jqgrid

我试图根据某些行值为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; 
}

0 个答案:

没有答案