Question

我发现this example在选定一行后突出显示了一行，但是问题是在选择了另一行之后，它保持了上一行突出显示。

这是代码的一部分

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

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

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

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

Answer 1

您可以通过以下步骤实现

第一次单击行，您需要像这样

var selectedRow = $("#jsGrid").find('table tr.highlight')。
然后您可以使用

selectedRow.toggleClass('highlight') or selectedRow.removeClass('highlight')

演示

$("#jsGrid").jsGrid({
    width: "100%",
    height: "auto",
    paging: false,

    //for loadData method Need to set auto load true
    autoload: true,

    noDataContent: "Directory is empty",

    controller: {
        loadData: function(filter) {
            var data = [{
                nickname: "Test",
                email: "t@gmail.com"
            }, {
                nickname: "Test 1",
                email: "t1@gmail.com"
            }, {
                nickname: "Test 2",
                email: "t2@gmail.com"
            }, {
                nickname: "Test 3",
                email: "t3@gmail.com"
            }];
            return data;
        }
    },

    rowClick: function(args) {
        var $row = this.rowByItem(args.item),
            selectedRow = $("#jsGrid").find('table tr.highlight');

        if (selectedRow.length) {
            selectedRow.toggleClass('highlight');
        };
        
        $row.toggleClass("highlight");
    },

    fields: [{
        name: "nickname",
        type: "text",
        width: 80,
        title: "Name"
    }, {
        name: "email",
        type: "text",
        width: 100,
        title: "Email Address",
        readOnly: false
    }]
});

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>


<div id="jsGrid"></div>

Answer 2

在这个聚会上晚了一点，但是@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;
    }

Answer 3

在乌拉圭回合的解决方案1 linhaéselecionada e quetambémdesseleciona a mesma linha，aquiestáasolução：

如果您要寻找一种解决方案，其中仅选择了1行，并且还取消选择了同一行，则为解决方案：

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

突出显示选定的jsGrid行

3 个答案: