javascript 单击时突出显示 slickgrid 行

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8593454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 03:55:58  来源:igfitidea点击:

Highlighting a slickgrid row when clicked

javascriptslickgrid

提问by jdivock

Humor me here. It seems like other grids like ExtJs do this out of the box, but for the life of me I can't find any solution to having a grid remain highlighted after a user clicks it. My interim solution is just a quick css rule to highlight a row on mouseover.

在这里逗我。看起来像 ExtJs 这样的其他网格开箱即用,但在我的生活中,我找不到任何解决方案来让用户单击网格后保持突出显示。我的临时解决方案只是一个快速的 css 规则,用于在鼠标悬停时突出显示一行。

Are there really no options to just set this? It seems like I'm going to have to go through a rowSelection model and set it up so that only one row can be selected at a time, is that right?

真的没有选项可以设置吗?似乎我将不得不通过 rowSelection 模型并进行设置,以便一次只能选择一行,对吗?

回答by Tin

Your negative tone aside, I see nothing wrong with using the provided Slick.RowSeletionModel and setting multiSelect in grid options to false.

撇开你的消极语气不谈,我认为使用提供的 Slick.RowSeletionModel 并将网格选项中的 multiSelect 设置为 false 没有任何问题。

回答by njr101

You can do something like this (JSFiddle demo here) :

您可以执行以下操作(此处为 JSFiddle 演示):

/////////////////////////////////////////////////////////////////////
// Augment grid object with a method to highlight the currently active row
//
mygrid.highlightActiveRow = function () {
  var currentCell;
  var $canvas = $(this.getCanvasNode());

  currentCell = this.getActiveCell();

  $canvas.find(".slick-row").removeClass("active");
  if (currentCell) {
    $canvas.find(".slick-row[row=" + currentCell.row + "]").addClass("active");
  }
};

mygrid.onActiveCellChanged.subscribe(function () {
  this.highlightActiveRow();
});

This marks the current row with the class activewhich can be styled as required:

这用active可以根据需要设置样式的类标记当前行:

/* Currently selected row */    
#mygrid .slick-row.active
{    
  background: #ff0000;
}

/* Currently selected cell */
#mygrid .slick-cell.active
{
  background: #00ff00;
}

There may be better ways to do this but this worked for me.

可能有更好的方法来做到这一点,但这对我有用。