请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Starry

初级会员

8

主题

37

帖子

274

积分

初级会员

积分
274
Starry
初级会员   /  发表于:2017-4-19 11:23  /   查看:7368  /  回复:10


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




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

10 个回复

倒序浏览
Alice
社区贡献组   /  发表于:2017-4-19 14:22:26
沙发
谢谢您的反馈。
基本的思路就是处理鼠标事件,在鼠标事件里更改行背景色。
  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;
}
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
Starry
初级会员   /  发表于:2017-4-19 14:49:57
板凳
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>
复制代码
回复 使用道具 举报
dexteryao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-4-19 17:45:57
地板
如果您用的angular ,那么可以直接绑定 click 的事件
https://docs.angularjs.org/api/ng/directive/ngClick
回复 使用道具 举报
Starry
初级会员   /  发表于:2017-4-20 08:32:31
5#
dexteryao 发表于 2017-4-19 17:45
如果您用的angular ,那么可以直接绑定 click 的事件
https://docs.angularjs.org/api/ng/directive/ngCli ...

首先,非常感谢您的回复,其次。我想说的是我想要的是mouseenter和mouseleave,而不是click
回复 使用道具 举报
Alice
社区贡献组   /  发表于:2017-4-20 09:06:34
6#
Starry 发表于 2017-4-20 08:32
首先,非常感谢您的回复,其次。我想说的是我想要的是mouseenter和mouseleave,而不是click

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

https://docs.angularjs.org/api/ng/directive/ngMouseenter
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
Starry
初级会员   /  发表于:2017-4-20 10:07:08
7#
Alice 发表于 2017-4-20 09:06
您好。
click事件和enter,leave事件都是一样的。
也有mouseenter事件,可以参考:

我知道这个,但是目前无法获取这个flex对象 ,我那样的布局如何去获取对象呢?
回复 使用道具 举报
Starry
初级会员   /  发表于:2017-4-20 11:37:12
8#
非常感谢您的解答,我发现您推荐的这个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.         })
复制代码
回复 使用道具 举报
Alice
社区贡献组   /  发表于:2017-4-20 14:14:31
9#
Starry 发表于 2017-4-20 11:37
非常感谢您的解答,我发现您推荐的这个wijmo的鼠标事件并不符合我的需求,我想要的是表格每一个行移入和移 ...

这个问题和另一个帖子是同一个问题不?
http://gcdn.gcpowertools.com.cn/ ... &extra=page%3D1
在另一个帖子里的2楼,我同事给了解决方案,不知道对您的问题是否有帮助。
请点击评分,对我的服务做出评价!  5分为非常满意!

葡萄城控件服务团队

官方网站: http://www.gcpowertools.com.cn
回复 使用道具 举报
Starry
初级会员   /  发表于:2017-4-20 17:49:52
10#
Alice 发表于 2017-4-20 14:14
这个问题和另一个帖子是同一个问题不?
http://gcdn.gcpowertools.com.cn/forum.php?mod=viewthread&tid ...

我的demo地址 :
https://pan.baidu.com/s/1i51cdAP
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部