如何更改 Tree dgrid 中的 dgrid-expando-icon答案

【问题标题】：How to change the dgrid-expando-icon in Tree dgrid如何更改 Tree dgrid 中的 dgrid-expando-icon
【发布时间】：2016-05-03 22:47:37
【问题描述】：

请您帮忙，如何将三角形图标展开/折叠更改为我在树网格中的自定义图标 (+,-)。另外，如何去除grid中所有的表格边框，希望可以通过css来完成。

@Himanshu - 这不是一个 dojoxGrid 而是一个 dgrid。我在 dgrid.css 中查找，如果我能找到类似的东西，并找到了这些。我如何表示扩展（正常，悬停）和折叠（正常，悬停）这四种状态。

 .dgrid-expando-icon {
 width: 16px;
 height: 16px;
}    
ui-icon {
 width: 16px;
  height: 16px;
  background-image: url("images/ui-icons_222222_256x240.png");
}

【问题讨论】：

标签： dojo dgrid

【解决方案1】：

使用以下 CSS 来更改 dojox.grid.TreeGrid 的默认图标。

!important 允许您覆盖默认的 CSS 属性值。

.dojoxGridExpandoNode {
    background-image: url('http://findicons.com/files/icons/2625/google_plus_interface_icons/18/star.png') !important;
}

现场示例，将加号图标改为开头：

http://jsfiddle.net/zx4g3z02/2/

【讨论】：

感谢您的提示。我使用的是 dgrid 而不是 dojox TreeGrid。让我在 Tree Grid 上尝试您的示例，看看它是否有效。我想我还需要操纵 2 个图标展开和折叠，用 !important 覆盖。
.ui-icon-triangle-1-e { 背景位置：-32px -16px;背景图像： url("images/relate_plus.png") !important; } .ui-icon-triangle-1-se { 背景位置：-48px -16px;背景图像： url("images/relate_minus.png") !important; }

【解决方案2】：

展开/折叠图标来自div 的background-image 属性，对应于类dojoxGridExpandoNode。因此，您可以覆盖其 CSS 并应用您自己的 background-image 属性。

默认情况下，图像是四个图像的组合，其中有两个用于展开（正常和悬停）的图像和两个用于折叠（正常和悬停）的图像，并且在 onmouseover 期间仅更改 background-position 属性和图标节点上的onlcick。因此，您必须相应地制作自定义图像。或者覆盖展开/折叠节点的onmouseover 和onclick 功能以相应地操作图像。

【讨论】：

@Himanshu ，请再次查看我编辑的问题。感谢你的帮助。此外，我能够使用 .claro .dgrid-cell {border:none;} 删除边框
哦，我还以为是dojox.grid.TreeGrid。好吧，因为它是dgrid，您可以看到用于background-image 的图像具有dgrid 中所需的所有图像。要进行更改，这里有两种可能的方法。一种是将图像中的图标更改为您需要的图标。在这里，您不需要进行任何其他更改。第二种方法是查看展开和折叠的功能，以及更改 CSS 以操作 background-position 的位置，此时也更改 background-image 并显示您的图像。