Javascript 突出显示选定的jsGrid行

我找到了在选中某行后高亮显示该行的方法，但该方法的问题是，在选中另一行后，该方法会保持前一行高亮显示

这是部分代码

//js
rowClick: function(args) {
        var $row = this.rowByItem(args.item);

      $row.toggleClass("highlight");
    }, 

//css
tr.highlight td.jsgrid-cell {
    background-color: green;
}

---

我找不到取消高亮显示以前选择的行的解决方案

您可以通过以下步骤实现

首先在行上单击，您需要获得如下所示的选定行

var selectedRow=$（“#jsGrid”）.find（'table tr.highlight'）

然后你可以用

selectedRow.toggleClass（'highlight'）或selectedRow.removeClass（'highlight'）

演示

$（“#jsGrid”）.jsGrid({
宽度：“100%”，
高度：“自动”，
分页：false，
//对于loadData方法，需要将自动加载设置为true
自动加载：对，
noDataContent:“目录为空”，
控制器：{
loadData:函数（过滤器）{
风险值数据=[{
绰号：“测试”，
电子邮件：“t@gmail.com"
}, {
昵称：“测试1”，
电子邮件：“t1@gmail.com"
}, {
昵称：“测试2”，
电子邮件：“t2@gmail.com"
}, {
昵称：“测试3”，
电子邮件：“t3@gmail.com"
}];
返回数据；
}
},
行单击：函数（args）{
var$row=this.rowByItem（args.item），
selectedRow=$（“#jsGrid”）.find（'table tr.highlight'）；
如果（已选择的移动长度）{
selectedRow.toggleClass（'highlight'）；
};
$row.toggleClass（“突出显示”）；
},
字段：[{
姓名：“昵称”，
键入：“文本”，
宽度：80，
标题：“姓名”
}, {
名称：“电子邮件”，
键入：“文本”，
宽度：100，
标题：“电子邮件地址”，
只读：false
}]
});
tr.highlight td.jsgrid-cell{
背景颜色：绿色；
}
在这一次聚会上迟到了一点，但是@Narenda接受的答案并没有完全解决我的问题。这可能会帮助以后偶然发现这一点的其他人

如果您只需要单选，以下是一种方法：

使用按索引查找行的方法扩展jsGrid插件：

jsGrid.Grid.prototype.rowByIndex=function（arg）{
//this._content.find（“tr”）[arg]返回一个DOM元素，而不是jQuery对象
//将DOM元素传递给find方法以获取表示它的jQuery对象
返回此.u content.find（此.u content.find（“tr”）[arg]）；
};

修改@Narenda答案中的rowClick函数：

行单击：函数（args）{
//取消选择所有行
对于（var i=0；iSe vocèveio em busca de uma soluèon a qual apenas 1 linhaéseleconada e que também deseleciona a mesma linha，aqui estáa soluèo:

如果您来寻找的解决方案中只选择了一行，同时也取消选择了同一行，那么以下是解决方案：

selectedVal = null;

$(document).ready(function(){
jsGrid.Grid.prototype.rowByIndex = function(arg) {
         //this._content.find("tr")[arg] returns a DOM element instead of a jQuery object
         //Pass the DOM element to the find method to get a jQuery object representing it
         return this._content.find(this._content.find("tr")[arg]);
     };
});

rowClick: function (args) {

             selectedVal = args.item;

             let $row = this.rowByItem(args.item);

             if ($row.hasClass("highlight") === false) {
                 //Deseleciona todas as linhas
                 for (let i = 0; i < this.data.length; i++) {
                     this.rowByIndex(i).removeClass("highlight");
                 }
                 $row.toggleClass("highlight");

             } else {
                 selectedVal = null;
                 $row.toggleClass("highlight");

             }
             console.log(selectedVal);
         }

selectedVal=null；
$（文档）.ready（函数（）{
jsGrid.Grid.prototype.rowByIndex=函数（arg）{
//this._content.find（“tr”）[arg]返回一个DOM元素，而不是jQuery对象
//将DOM元素传递给find方法以获取表示它的jQuery对象
返回此.u content.find（此.u content.find（“tr”）[arg]）；
};
});
行单击：函数（args）{
selectedVal=args.item；
设$row=this.rowByItem（args.item）；
if（$row.hasClass（“highlight”）==false）{
//德塞莱西奥纳·托达斯·林哈斯
for（设i=0；i
单击“循环所有行”以删除
首先突出显示
类。然后将类添加到单击的行。我更喜欢此行。+1