1

在我拥有的 gridview 中，我试图让它在用户选中该行的复选框时突出显示该行。现在，这个 GridView 是条纹的（意味着偶数行有一种背景颜色，奇数行有另一种背景颜色）。执行此操作的代码以各种形式在网络上漂浮......


var color = '';
function changeColor(obj) {
  var rowObject = getParentRow(obj);
  var parentTable = document.getElementById("gvCategories");
  if(color == ''){
    color = getRowColor();
  }
  if(obj.checked){
    rowObject.style.backgroundColor = 'Yellow';
  }
  else{
    rowObject.style.backgroundColor = color;
    color = '';
  }

  // private method
  function getRowColor(){
  if(rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor;
  else return rowObject.style.backgroundColor;
  }
}

// This method returns the parent row of the object
function getParentRow(obj){
  do{
    obj = obj.parentElement;
  }
  while(obj.tagName != "TR")
  return obj;
}

这是从这里直接复制和粘贴... http://aspadvice.com/blogs/azamsharp/archive/2007/06/26/Highlight-GridView-Rows-Using-CheckBox.aspx

如果您的 GridView 没有条纹，这很好。然而，正如我之前提到的，我的是条纹的。这里的问题是，如果您根据选择项目的顺序取消选中某个框，则行背景颜色可能会恢复为不正确的颜色。

我已经尝试过考虑一些算法来做到这一点，但我运气不佳。我最初的想法是堆栈的一些诡计，但我很快意识到这将要求用户以他们检查项目的相反顺序取消检查。

我能想到的唯一另一件事是以某种方式检查行索引是奇数还是偶数，如果奇数恢复为特定颜色，是否偶数恢复为特定颜色。但是，我不确定如何从 javascript 检查 gridview 的特定索引。

我最终将为此使用 jQuery，因此任何关于带有或不带有 jquery 的 javascript 的建议都可以。关于如何实现这一目标的任何想法？

编辑： 所以我仍然没有运气，我想我会发布我目前拥有的东西。


function highlightRow(object) {
    if ($(object).attr("checked") == true) {
        alert('is checked!'); // this will fire
        $(object).parent('tr').addClass("highlightedRow");
    }
    else {
        alert('is not checked!');
        $(object).parent('tr').removeClass("highlightedRow");
    }
}

正如那里的评论所说，我可以判断是否正在检查某个项目，但似乎没有应用类切换。突出显示的行在它应该在 CSS 文件中覆盖的类之后声明。这是否提供了有关可能出现问题的任何额外信息？

4

4 回答 4

2

我认为在选中复选框时应用和删除设置背景颜色的类会更好。这样，您可以在未选中时简单地删除该类，并应用原始 CSS。只需确保“突出显示”的类出现在 CSS 文件中的其他类之后，以便它覆盖它们的设置。这应该很容易（更容易）使用 jQuery 来完成。

以下假设该类rowCheckbox已应用于所有复选框，但您可以根据需要选择它们。它依赖于highlight定义的类来覆盖选定行的背景颜色。您的正常行着色也将通过类应用。

$(document).ready( function() {
    $('.rowCheckbox').click( function() {
       if (this.checked) {
           $(this).parent('tr').addClass('highlight');
       }
       else {
           $(this).parent('tr').removeClass('highlight');
       }
    });
});
于 2009-01-23T01:07:46.000 回答
1

对我来说，直到我将父母改为父母，它才起作用：

       $(this).parents('tr').addClass('highlight');

与父母一起，它没有正确找到 tr

于 2010-09-30T18:43:49.277 回答
0

一种方法（可能不是最好的方法）....您可以修改上面的方法，以便使用类似“哈希表”的结构，并将行（tr）的ID与其原始颜色存储起来，这样在取消选中该复选框时，您可以查找其原始颜色并进行相应设置...

于 2009-01-23T01:13:03.573 回答
0

我终于有时间回到这个问题上，我想通了。出于某种原因，这里有点...

$(object).parent('tr')

没有抓住这一行。老实说，我没有深入研究为什么，因为这导致我遇到了真正的问题。

发生的事情是已经设置的背景颜色样式没有被通过...设置的样式覆盖

.addClass('highlight');

因此，给“highlight”类背景样式赋予重要标签就可以了。

.SpatialDataHighlightedRow {
    background-color: #DDDDDD !important;
}
于 2009-02-18T23:41:29.873 回答