突出显示选定的 jsGrid 行

Question

我发现这个例子在选择一行后突出显示了一行，但问题在于它在选择另一行后保持前一行突出显示。

这是代码的一部分

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

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

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

我找不到取消突出显示先前选择的行的解决方案

Answer 1

这个聚会有点晚了，但是@Narenda 接受的答案并没有完全解决我的问题。这可能会帮助后来偶然发现的其他人。

如果您只需要一个选择，这里有一种方法：

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

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

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

    rowClick: function ( args ) {
        //Deselect all rows
        for(var i = 0; i<this.data.length; i++){
            this.rowByIndex(i).removeClass("jsgrid-highlight-row");
        }

        //Everything else as per the previous answer
        var $row = this.rowByItem(args.item),
        selectedRow = $("#jsGrid").find('table tr.jsgrid-highlight-row');

        if (selectedRow.length) {
            selectedRow.toggleClass('jsgrid-highlight-row');
        };
        $row.toggleClass("jsgrid-highlight-row");
        //Any other code to run on item click
    }

并添加一些 CSS。这模仿了默认主题中的行悬停：

    tr.jsgrid-highlight-row td.jsgrid-cell {
         background:#c4e2ff;
         border-color:#c4e2ff;
    }