【问题标题】:How do you change the mouse over highlighting?你如何改变鼠标突出显示?
【发布时间】:2011-05-13 15:06:39
【问题描述】:

在 GWT 中,我使用的是 CellTable。

当您将鼠标悬停在 CellTable 上时,它会突出显示每一行。

如何改变鼠标悬停时突出显示的行为?具体来说:

  • 更改突出显示的颜色
  • 禁用/启用
  • 使其仅突出显示光标处的特定网格项(而不是整行)

(我目前的技巧是创建一堆 1 列宽的 CellTables 并将它们添加到 VerticalPanel 布局中......创建一个 CellTable 并根据您的光标突出显示每个网格的错觉。这很糟糕吗?为什么?性能?)

【问题讨论】:

    标签: gwt


    【解决方案1】:

    您会注意到 CellTable 使用 ResourceBundle,这意味着所有 css 样式都会被混淆......这使得覆盖样式变得更加困难。

    CellTable 构造函数实际上允许您覆盖默认的 ResourceBundle。所以首先,你需要像这样创建自己的资源包:

    public interface CellTableResources extends Resources {
    
            public CellTableResources INSTANCE =
                    GWT.create(CellTableResources.class);
    
            /**
             * The styles used in this widget.
             */
            @Source("CellTable.css")
            CellTable.Style cellTableStyle();
    }
    

    然后您需要创建自己的 CSS 文件。我建议将 CellTable 样式直接复制到您的项目中,并将其用作起点。你可以在这里找到它: http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTable.css

    确保先注入样式,然后将其输入到 CellTable 的构造函数中,如下所示:

       CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
       myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
    

    具体来说,您需要调整这些样式:

    • cellTableKeyboardSelectedRow
    • cellTableKeyboardSelectedRowCell
    • cellTableSelectedRow
    • cellTableSelectedRowCell
    • cellTableKeyboardSelectedCell

    请务必注意,单元格表区分“选定行”和“键盘选定行”。所选行是实际选择的行(即通过 SelectionModel)。键盘选择的行是指用户按下向上/向下键时突出显示的内容,但并不意味着实际选择了该行(如果有意义的话)。

    【讨论】:

    • 澄清一下,我建议复制 CellTableBasic.css 样式并将其用作基线:code.google.com/p/google-web-toolkit/source/browse/trunk/user/… ... 标准 CellTable.css 样式表包含图像资源,CellTableBasic.css 是纯的css 并且可能更容易修改
    • +1 为您解释“选定行”和“键盘选定行”之间的区别的最后一段。这是我第一次看到它的解释
    • 这对删除实际突出显示有何帮助?我尝试覆盖所有提到的样式(包括未提及的cellTableHoveredRowcellTableHoveredRowCell),但我无法让突出显示完全消失。我可以稍微改变一下,让它看起来不一样,但我不能删除它。也许有人可以分享实际的 CSS 来删除鼠标悬停在行上的突出显示?谢谢。
    • 这是我很久以前做的甘特图和表格项目的代码。 CellTableResources.INSTANCE.cellTableStyle().ensureInjected(); taskTable = new CellTable(Integer.MAX_VALUE,CellTableResources.INSTANCE); code.google.com/p/gwtgantt/source/browse/trunk/gwt-gantt/src/…code.google.com/p/gwtgantt/source/browse/trunk/gwt-gantt/src/…
    【解决方案2】:

    我只会在你的列表中添加 2),你可以简单地做

    cellList.setSkipRowHoverStyleUpdate(true)
    

    这完全禁用突出显示。 CellList 上还有另外两个与悬停相关的setSkip-functions。

    【讨论】:

      【解决方案3】:
      1. CellTable 可以通过 CSS 设置样式:How do I style a gwt 2.1 CellTables headers?

      2. 要禁用突出显示,只需将悬停 CSS 属性设置为空即可。

      3. 可能 - 尝试调整 .cellTableSelectedRow.cellTableSelectedRowCell

      这里是原始的 CellTable.css:http://www.google.com/codesearch/p?hl=en#A1edwVHBClQ/user/src/com/google/gwt/user/cellview/client/CellTable.css&q=cellTableLastColumn&d=8

      【讨论】:

      • 您能否提供一些有关如何在您的列表中执行第 2 项的详细信息,“只需将悬停 CSS 属性设置为空”?我在哪里设置该属性,在哪个 CSS 类等上?谢谢。
      猜你喜欢
      • 2010-12-24
      • 2019-01-19
      • 1970-01-01
      • 2020-10-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多