Flexgrid鼠标mouseenter和mouseleave

这是我目前的表格效果，现在做一个改动，要求鼠标进入哪一行，表格的这个行背景色变其他色，同时最右边的单元格实现图标浮出,就像下面这个一样

谢谢您的反馈。
基本的思路就是处理鼠标事件，在鼠标事件里更改行背景色。

1. // hit test a point when the user clicks on the grid
   
2. flex.hostElement.addEventListener('click', function (e) {
   
3.   var ht = flex.hitTest(e.pageX, e.pageY);
   
4.   console.log('you clicked a cell of type "' +
   
5.     wijmo.grid.CellType[ht.cellType] + '".');
   
6. });

复制代码

就可以通过行的cssClass样式修改。

1. rows[i].cssClass = 'redRow';

复制代码

css代码：
.redRow:not(.wj-state-selected) {
    background-color:rgb(250, 210, 210) !important;
    color:black !important;
}

Alice 发表于 2017-4-19 14:22
谢谢您的反馈。
基本的思路就是处理鼠标事件，在鼠标事件里更改行背景色。

我不知道怎么去或者这个flex对象？ 我的 布局是这样的

1. <wj-flex-grid class="grid-table" [itemsSource]="cvPaging">
   
2.                         <wj-flex-grid-column [header]="'排序'" [binding]="'id'" [width]="60"></wj-flex-grid-column>
   
3.                         <wj-flex-grid-column [header]="'编码'" [binding]="'code'"></wj-flex-grid-column>
   
4.                         <wj-flex-grid-column [header]="'名称'" [binding]="'name'"></wj-flex-grid-column>
   
5.                         <wj-flex-grid-column [header]="'描述'" [binding]="'description'" [width]="'*'"></wj-flex-grid-column>
   
6.                         <wj-flex-grid-column [header]="''" [width]="50" [isReadOnly]="true">
   
7.                             <template wjFlexGridCellTemplate [cellType]="'Cell'">
   
8.                                 <div class="wj-elem-down" (click)="selectOperation()">
   
9.                                     <span>...</span>
   
10.                                 </div>
    
11.                             </template>
    
12.                         </wj-flex-grid-column>
    
13.                     </wj-flex-grid>

复制代码

如果您用的angular ，那么可以直接绑定 click 的事件
https://docs.angularjs.org/api/ng/directive/ngClick

dexteryao 发表于 2017-4-19 17:45
如果您用的angular ，那么可以直接绑定 click 的事件
https://docs.angularjs.org/api/ng/directive/ngCli ...

首先，非常感谢您的回复，其次。我想说的是我想要的是mouseenter和mouseleave,而不是click

Starry 发表于 2017-4-20 08:32
首先，非常感谢您的回复，其次。我想说的是我想要的是mouseenter和mouseleave,而不是click

您好。
click事件和enter，leave事件都是一样的。
也有mouseenter事件，可以参考：

https://docs.angularjs.org/api/ng/directive/ngMouseenter

Alice 发表于 2017-4-20 09:06
您好。
click事件和enter，leave事件都是一样的。
也有mouseenter事件，可以参考：

我知道这个，但是目前无法获取这个flex对象 ，我那样的布局如何去获取对象呢？

非常感谢您的解答，我发现您推荐的这个wijmo的鼠标事件并不符合我的需求，我想要的是表格每一个行移入和移出时发生变化，发现当鼠标没有移出表格时，很难再一次触发鼠标移入和移出事件。请问是我写的有问题还是这个表格不具备这个功能呢？

1. that.cvPaging2 = new wjcGrid.FlexGrid('#flexgrid', {
   
2.             autoGenerateColumns: false,
   
3.             columns: [
   
4.                 { header: '编号', binding: 'id' ,width:60},
   
5.                 { header: '编码', binding: 'code' },
   
6.                 { header: '岗位', binding: 'name',  },
   
7.                 { header: '描述', binding: 'description', width: '*' },
   
8.                 { header: ' ', binding: ' ', width: 30 },
   
9.             ],
   
10.             itemsSource: this.dataSvc.getData(),   
    
11.         });
    
12.         var hoverRow = -1;
    
13.         that.cvPaging2.hostElement.addEventListener('mouseenter', function (e: MouseEventInit) {
    
14.             var ht = that.cvPaging2.hitTest(e),
    
15.                 r = ht.row;
    
16.             console.log(r);
    
17.             if (r != hoverRow) {  
    
18.                 that.cvPaging2.rows[r].cssClass = 'test';
    
19.                 console.info(that.cvPaging2.rows[r], 123);
    
20.                 hoverRow= r ;   
    
21.             }
    
22.         })

复制代码

Starry 发表于 2017-4-20 11:37
非常感谢您的解答，我发现您推荐的这个wijmo的鼠标事件并不符合我的需求，我想要的是表格每一个行移入和移 ...

这个问题和另一个帖子是同一个问题不？
http://gcdn.gcpowertools.com.cn/ ... &extra=page%3D1
在另一个帖子里的2楼，我同事给了解决方案，不知道对您的问题是否有帮助。

Alice 发表于 2017-4-20 14:14
这个问题和另一个帖子是同一个问题不？
http://gcdn.gcpowertools.com.cn/forum.php?mod=viewthread&tid ...

我的demo地址 ：
https://pan.baidu.com/s/1i51cdAP