jqgrid colModel 类答案

【问题标题】：jqgrid colModel classesjqgrid colModel 类
【发布时间】：2013-11-18 02:36:39
【问题描述】：

我有 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 属性类。例如，如果用户在 Quiz1 中将鼠标悬停在 row3 = QuestionID = 21，那么在 Grid2 中，Q3 列将被突出显示。

这是我的javascript

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

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

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

【问题讨论】：

标签： jquery class jqgrid

【解决方案1】：

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

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

只是一个警告，我还没有检查过这个方法的性能。

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

【讨论】：