javascript - 为什么悬停不能处理 jqgrid 中的彩色行

Question

我正在以这种方式使用 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>

提前致谢。

Answer 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');