请选择 进入手机版 | 继续访问电脑版

葡萄城产品技术社区

    注册

QQ登录

SpreadJS

纯前端控件,类似Excel,问题响应通道

ComponentOne WPF

前沿科技,针对WPF桌面,问题响应通道

C1FlexGrid视频教程

WinForm平台,功能强大的表格控件,初学者必看视频

ActiveReport视频教程

轻松搞定报表,从头开始学AR,视频教程

搜索
查看: 105|回复: 5

[处理中] FlexGrid点一下表头才能显示数据

[复制链接]

1

主题

3

帖子

38

积分

注册会员

积分
38
发表于 2017-9-8 09:32:14 | 显示全部楼层 |阅读模式
本帖最后由 nikankind 于 2017-9-8 09:49 编辑

Angular2中使用FlexGrid控件显示报表,用Rxjs在初始化时请求服务端数据。希望点击链接能立即看到数据内容,但现在需要点一下表头才可以,请问如何解决?谢谢
部分代码如下:
前端模板dlv-bid.component.html:
  1. <wj-flex-grid [allowDragging]="'Both'" [itemsSource]="treeData" style="height : 360px" [isReadOnly]="true">
  2.   <wj-flex-grid-column [header]="'发货单号'" [binding]="'dlvBilNo'" [width]="'*'"></wj-flex-grid-column>
  3.   <wj-flex-grid-column [header]="'出发地'" [binding]="'stLoc'" [width]="'*'"></wj-flex-grid-column>
  4.   <wj-flex-grid-column [header]="'目的地'" [binding]="'destLoc'" [width]="'*'"></wj-flex-grid-column>
  5.   <wj-flex-grid-column [header]="'发货时间'" [binding]="'elstDlvTim'" [width]="'*'"></wj-flex-grid-column>
  6.   <wj-flex-grid-column [header]="'到货时间'" [binding]="'elstArvTim'" [width]="'*'"></wj-flex-grid-column>
  7. </wj-flex-grid>
复制代码
组件文件dlv-bid.component.ts:
  1. @Component({
  2.   selector: 'app-dlv-bid',
  3.   templateUrl: './dlv-bid.component.html',
  4.   styleUrls: ['./dlv-bid.component.css']
  5. })
  6. export class DlvBidComponent implements OnInit {
  7.   dlvBidService: DlvBidService;
  8.   treeData: wjcCore.CollectionView;
  9.   constructor(@Inject(DlvBidService) dlvBidService: DlvBidService) {
  10.     this.dlvBidService = dlvBidService;
  11. }
  12. ngOnInit() {
  13.   this.dlvBidService.GetPreDlvBids();
  14.   this.treeData = new wjcCore.CollectionView(this.dlvBidService.tree);
  15. }
复制代码
数据服务dlv-bid.component.service.ts:
  1. @Injectable()
  2. export class DlvBidService {
  3. public tree = [];
  4. public GetPreDlvBids() {
  5.   return this.http
  6. .get(`${this.dlvBidURL}getDlvBids?token=${localStorage.getItem('access_token')}`)
  7.     .map((res: Response) => {
  8.       const rst = this.extractData(res);
  9.       console.log(rst);
  10.        if (rst.vali === false) {
  11.         alert('登录错误,请重新登录');
  12.         return;
  13.       } else if ( rst.succ === false) {
  14.          alert('信息提取错误');
  15.          return;
  16.        }
  17.        this.getTreeData(rst);
  18.     })
  19.      .subscribe();
  20. }
  21. getTreeData(src: any) {
  22.   let tmp: string;
  23.   let key: string;
  24.   let tmpObj: any;
  25.   let i: Number = 0;
  26.   tmp = JSON.stringify(src);
  27.   tmpObj = JSON.parse(tmp);
  28.   delete tmpObj.succ;
  29.   delete tmpObj.vali;
  30.   for ( key in tmpObj) {
  31.     // console.log(`\'${key}\'`);
  32.     this.tree.push(tmpObj[`${key}`]);
  33.   }
  34. }
  35. }
复制代码

回复

使用道具 举报

2

主题

1179

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
12345
发表于 2017-9-8 14:11:35 | 显示全部楼层
nikankind 发表于 2017-9-8 12:51
您好,我的后端时NodeJs平台的Express,响应时间在十几ms。如果将数据服务改为本地模拟的数据,就能够正 ...

您好,flexgrid没有表头点击事件的接口,您是服务器请求数据,建议下分页加载第一页数据后拿到前端,作为缓存数据,赋给flexgrid,这样可以更具CollectionView类的分页加载数据。具体我给你demo演示地址http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/#JYYKp,这个demo也是服务器请求数据模式,请参考。
请点击评分,对我的服务做出评价!
5分为非常满意!


葡萄城控件服务团队
官方网站: http://www.gcpowertools.com.cn
回复 支持 1 反对 0

使用道具 举报

2

主题

1179

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
12345
发表于 2017-9-8 12:02:36 | 显示全部楼层
您好,从您的代码中看不出来问题,能不能提供一个能独立运行的demo我帮您看看。
请点击评分,对我的服务做出评价!
5分为非常满意!


葡萄城控件服务团队
官方网站: http://www.gcpowertools.com.cn
回复 支持 反对

使用道具 举报

1

主题

3

帖子

38

积分

注册会员

积分
38
 楼主| 发表于 2017-9-8 12:51:00 | 显示全部楼层
JeffryLI 发表于 2017-9-8 12:02
您好,从您的代码中看不出来问题,能不能提供一个能独立运行的demo我帮您看看。

您好,我的后端时NodeJs平台的Express,响应时间在十几ms。如果将数据服务改为本地模拟的数据,就能够正常工作。我想模拟出点击表头的事件,请问可以调用FlexGrid中哪个函数来实现?
回复 支持 反对

使用道具 举报

1

主题

3

帖子

38

积分

注册会员

积分
38
 楼主| 发表于 2017-9-13 10:06:43 | 显示全部楼层
本帖最后由 nikankind 于 2017-9-14 11:00 编辑
JeffryLI 发表于 2017-9-8 14:11
您好,flexgrid没有表头点击事件的接口,您是服务器请求数据,建议下分页加载第一页数据后拿到前端,作为 ...

问题解决了。
问题原因:在Angular2下通过Rxjs请求数据发给FlexGrid时,前端取得数据后需要手动刷新CollectionView对象。
解决方法:在Service中,http Request方法取得数据后用EventEmitter发送事件,在Component中订阅该事件,触发时treeData.Refresh()。
回复 支持 反对

使用道具 举报

2

主题

1179

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
12345
发表于 2017-9-13 11:24:34 | 显示全部楼层
nikankind 发表于 2017-9-13 10:06
问题解决了。
问题原因:在Angular2下通过Rxjs请求数据发给FlexGrid时,前端取得数据后需要手动刷新Conn ...

好腻害,哈哈。
请点击评分,对我的服务做出评价!
5分为非常满意!


葡萄城控件服务团队
官方网站: http://www.gcpowertools.com.cn
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

欢迎关注葡萄城控件

小黑屋|手机版|Archiver|葡萄城控件官网 ( 沪ICP备05020274号

GMT+8, 2017-10-17 05:52 , Processed in 1.134809 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表