Question

我有2个jqgrid，1个有一个QuestionID列，另一个表QuestionID是它的行。

Grid for Quiz1
rownumber  | QuestionID  | Text
    1      |     12      | What color do you like?
    2      |     15      | Where do you stay?
    3      |     21      | What's your favorite food?
....

Grid2
rownumber  | Student | Q1 *QuestionID = 12* | Q2 *QuestionID = 15* | Q3 *QuestionID = 21*|..
     1     | Mary    |      Correct         |       Wrong          |       Correct       |
     2     | John    |      Wrong           |       Correct        |       Correct       |
     3     | Tim     |      Wrong           |       Wrong          |       Correct       |

当我在Quiz1中鼠标悬停一行时，如何为Grid 2添加colModel属性 classes 。例如，如果用户鼠标悬停在Quiz1中的row3 = QuestionID = 21，那么在Grid2中，第Q3列将突出显示。

这是我的javascript

$("#tbl_Quiz tr").mouseover(function (e) {
         $("#tbl_Grid2 tr").jqGrid('setColProp', 'Q3', { classes: 'colHighlight' });
});

上面的代码只是测试它是否会突出显示列，如果成功，我需要动态突出显示该列。

有办法做到这一点吗？真的很感激，如果有人可以帮我这个。

Answer 1

我建议你在colModel中为第二个网格中的每一列设置一个类值，使用该问题的ID值。

这样，您可以在第一个网格的鼠标悬停中使用jQuery类选择器，为第二个网格（您要查找的列）中的所有匹配条目应用额外的“突出显示”类条目。您也可以在mouseout上删除此突出显示。

虽然只是警告，但我还没有检查过这种方法的性能。

    var grid = jQuery('#tbl_Quiz');

    //Example grid configuration just to illustrate
    var grid2 = jQuery('#tbl_Grid2');
    grid2.jqGrid({
        data: myData,
        height: 'auto',
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        pager: '#pager',
        colNames: ['Student', 'Q1 *QuestionId = 12*', 'Q2 *QuestionId = 15*'
            , 'Q3 *QuestionId = 21*'],
        colModel: [
            { name: 'StudentId', index: 'StudentId', key:true, width: 50, 
                sorttype: 'int', hidden: true }
            { name: 'Student', index: 'Student', width: 50, 
                class: 'Student' },
            { name: 'Q1', index: 'Q1', width: 120, class: 'Q12' },
            { name: 'Q2', index: 'Q2', width: 120, class: 'Q15' },
            { name: 'Q3', index: 'Q3', width: 120, class: 'Q21'  }
        ]
    });

grid.mouseover(function (e) {
    //Get the QuestionId value for the currently selected row and highlight columns with that class ID
    //http://stackoverflow.com/questions/11762757/how-to-retrieve-the-cell-information-for-mouseover-event-in-jqgrid
    var tr = jQuery(e.target).closest('tr.jqgrow');
    var rowId = tr.attr('id');
    if (rowId) {
        var questionId = grid.jqGrid('getCell', rowId, 'QuestionID');
        jQuery('.Q'+questionId).addClass('highlight');
    }
}

grid.mouseout(function (e) {
    //Get the QuestionId value for the currently selected row and un-highlight columns with that class ID
    var tr = jQuery(e.target).closest('tr.jqgrow');
    var rowId = tr.attr('id');
    if (rowId) {
        var questionId = grid.jqGrid('getCell', rowId, 'QuestionID');
        jQuery('.Q'+questionId).removeClass('highlight');
    }
}

jqgrid colModel类

1 个答案: