Flexgrid鼠标mouseenter和mouseleave

登录

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

Alice · Alice

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

复制代码

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

复制代码

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

Starry · Starry

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

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

<wj-flex-grid class="grid-table" [itemsSource]="cvPaging">
<wj-flex-grid-column [header]="'排序'" [binding]="'id'" [width]="60"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'编码'" [binding]="'code'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'名称'" [binding]="'name'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'描述'" [binding]="'description'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="''" [width]="50" [isReadOnly]="true">
<template wjFlexGridCellTemplate [cellType]="'Cell'">
<div class="wj-elem-down" (click)="selectOperation()">
<span>...</span>
</div>
</template>
</wj-flex-grid-column>
</wj-flex-grid>

复制代码

dexteryao · dexteryao

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

Starry · Starry

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

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

Alice · Alice

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

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

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

Starry · Starry

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

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

Starry · Starry

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

that.cvPaging2 = new wjcGrid.FlexGrid('#flexgrid', {
autoGenerateColumns: false,
columns: [
{ header: '编号', binding: 'id' ,width:60},
{ header: '编码', binding: 'code' },
{ header: '岗位', binding: 'name', },
{ header: '描述', binding: 'description', width: '*' },
{ header: ' ', binding: ' ', width: 30 },
],
itemsSource: this.dataSvc.getData(),
});
var hoverRow = -1;
that.cvPaging2.hostElement.addEventListener('mouseenter', function (e: MouseEventInit) {
var ht = that.cvPaging2.hitTest(e),
r = ht.row;
console.log(r);
if (r != hoverRow) {
that.cvPaging2.rows[r].cssClass = 'test';
console.info(that.cvPaging2.rows[r], 123);
hoverRow= r ;
}
})

复制代码

Alice · Alice

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

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

Starry · Starry

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

		自动登录	找回密码
密码			立即注册

10 个回复