2015-07-28 65 views
0

我有jqGrid的這種方式不工作有色行,爲什麼懸停在jqGrid的

<table id="grid"></table> 

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]]; 

$("#grid").jqGrid({ 
    datatype: "local", 
    height: 250, 
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'], 
    colModel: [{ 
     name: 'id', 
     index: 'id', 
     width: 60, 
     sorttype: "int"}, 
    { 
     name: 'thingy', 
     index: 'thingy', 
     width: 90, 
     sorttype: "date"}, 
    { 
     name: 'blank', 
     index: 'blank', 
     width: 30}, 
    { 
     name: 'number', 
     index: 'number', 
     width: 80, 
     sorttype: "float"}, 
    { 
     name: 'status', 
     index: 'status', 
     width: 80, 
     sorttype: "float"} 
    ], 
    caption: "Stack Overflow Example", 


    gridComplete: function() { 
     var rowIDs = $("#grid").getDataIDs(); 
      for (var i = 0; i < rowIDs.length; i++) { 
     $("#grid").jqGrid('setRowData', rowIDs[i], false, {background : '#FF3300'}); 
       var trid = $("#grid tr#"+rowIDs[i]); 
        if(trid.length > 0) 
         trid.addClass("manualreportgriderror"); 
      } 
     } 
}); 

var names = ["id", "thingy", "blank", "number", "status"]; 
var mydata = []; 

for (var i = 0; i < data.length; i++) { 
    mydata[i] = {}; 
    for (var j = 0; j < data[i].length; j++) { 
     mydata[i][names[j]] = data[i][j]; 
    } 
} 

for (var i = 0; i <= mydata.length; i++) { 
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]); 
} 

$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}}); 

我已經gridcomplete事件後與紅色網格行。

如果我刪除行上的顏色,懸停在網格上工作。

我嘗試添加這個CSS,

.ui-state-hover-grid{ 
background-color: yellow !important; 
} 

這是對我的整個應用程序採用黃色,不僅電網。

如何啓用彩色行上的懸停?並應用網格行懸停的黃色背景顏色?

HTML代碼:

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_grid" dir="ltr" style="width: 1539px;"><div class="ui-widget-overlay jqgrid-overlay" id="lui_grid"></div><div class="loading ui-state-default ui-state-active" id="load_grid" style="display: none;">Loading...</div><div class="ui-jqgrid-view" id="gview_grid" style="width: 1539px;"><div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix"><a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px;"><span class="ui-icon ui-icon-circle-triangle-n"></span></a><span class="ui-jqgrid-title">Stack Overflow Example</span></div><div class="ui-state-default ui-jqgrid-hdiv" style="width: 1539px;"><div class="ui-jqgrid-hbox"><table class="ui-jqgrid-htable" style="width: 1539px;" role="grid" aria-labelledby="gbox_grid" cellspacing="0" cellpadding="0" border="0"><thead><tr class="ui-jqgrid-labels" role="rowheader"><th id="grid_id" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 267px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span><div id="jqgh_grid_id" class="ui-jqgrid-sortable">Inv No<span class="s-ico" style=""><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="grid_thingy" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 401px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span><div id="jqgh_grid_thingy" class="ui-jqgrid-sortable">Thingy<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="grid_blank" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 134px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span><div id="jqgh_grid_blank" class="ui-jqgrid-sortable">Blank<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="grid_number" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 356px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span><div id="jqgh_grid_number" class="ui-jqgrid-sortable">Number<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="grid_status" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 356px;"><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span><div id="jqgh_grid_status" class="ui-jqgrid-sortable">Status<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th></tr></thead></table></div></div><div class="ui-jqgrid-bdiv" style="height: 250px; width: 1539px;"><div style="position:relative;"><div></div><table id="grid" tabindex="1" cellspacing="0" cellpadding="0" border="0" role="grid" aria-multiselectable="false" aria-labelledby="gbox_grid" class="ui-jqgrid-btable" style="width: 1539px;"><tbody><tr class="jqgfirstrow" role="row" style="height:auto"><td role="gridcell" style="height: 0px; width: 267px;"></td><td role="gridcell" style="height: 0px; width: 401px;"></td><td role="gridcell" style="height: 0px; width: 134px;"></td><td role="gridcell" style="height: 0px; width: 356px;"></td><td role="gridcell" style="height: 0px; width: 356px;"></td></tr><tr role="row" id="1" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr manualreportgriderror" style="background: rgb(255, 51, 0);"><td role="gridcell" style="" title="48803" aria-describedby="grid_id">48803</td><td role="gridcell" style="" title="DSK1" aria-describedby="grid_thingy">DSK1</td><td role="gridcell" style="" title="" aria-describedby="grid_blank">&nbsp;</td><td role="gridcell" style="" title="02200220" aria-describedby="grid_number">02200220</td><td role="gridcell" style="" title="OPEN" aria-describedby="grid_status">OPEN</td></tr><tr role="row" id="2" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr manualreportgriderror" style="background: rgb(255, 51, 0);"><td role="gridcell" style="" title="48769" aria-describedby="grid_id">48769</td><td role="gridcell" style="" title="APPR" aria-describedby="grid_thingy">APPR</td><td role="gridcell" style="" title="" aria-describedby="grid_blank">&nbsp;</td><td role="gridcell" style="" title="77733337" aria-describedby="grid_number">77733337</td><td role="gridcell" style="" title="ENTERED" aria-describedby="grid_status">ENTERED</td></tr></tbody></table></div></div></div><div class="ui-jqgrid-resize-mark" id="rs_mgrid">&nbsp;</div></div> 

在此先感謝。

+1

你可以提供你的'table'的HTML源代碼? –

+0

使用HTML編輯該問題源 – user1660325

+0

我無法找到想要着色的行。你能指出他們嗎?他們是''的'

回答

1

試試這個

<style> 
.ui-jqgrid .ui-state-hover { 
    background: yellow !important; 
} 

以上CSS工程jqGrid的所有元素。 如果您想停止標題的懸停此腳本將工作。

var $grid = $('#list'), // the grid 
 
     hdiv = $grid[0].grid.hDiv, // DOM of the hdiv - the div which contain headers 
 
     $columnHeaders = $("thead tr.ui-jqgrid-labels th", hdiv); // th elements 
 
     $columnHeaders.unbind('mouseenter'); 
 
     $columnHeaders.unbind('mouseleave');

+0

如何懸停只有網格行,而不是標題..與這種風格?你能點亮一下嗎? – user1660325

+0

我已根據您的要求更新了我的答案。請告訴我它是否適合您。 –