FlexGrid点一下表头才能显示数据

收藏

本帖最后由 nikankind 于 2017-9-8 09:49 编辑

Angular2中使用FlexGrid控件显示报表，用Rxjs在初始化时请求服务端数据。希望点击链接能立即看到数据内容，但现在需要点一下表头才可以，请问如何解决？谢谢
部分代码如下：
前端模板dlv-bid.component.html：

<wj-flex-grid [allowDragging]="'Both'" [itemsSource]="treeData" style="height : 360px" [isReadOnly]="true">
<wj-flex-grid-column [header]="'发货单号'" [binding]="'dlvBilNo'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'出发地'" [binding]="'stLoc'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'目的地'" [binding]="'destLoc'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'发货时间'" [binding]="'elstDlvTim'" [width]="'*'"></wj-flex-grid-column>
<wj-flex-grid-column [header]="'到货时间'" [binding]="'elstArvTim'" [width]="'*'"></wj-flex-grid-column>
</wj-flex-grid>

复制代码

组件文件dlv-bid.component.ts:

@Component({
selector: 'app-dlv-bid',
templateUrl: './dlv-bid.component.html',
styleUrls: ['./dlv-bid.component.css']
})
export class DlvBidComponent implements OnInit {
dlvBidService: DlvBidService;
treeData: wjcCore.CollectionView;
constructor(@Inject(DlvBidService) dlvBidService: DlvBidService) {
this.dlvBidService = dlvBidService;
}
ngOnInit() {
this.dlvBidService.GetPreDlvBids();
this.treeData = new wjcCore.CollectionView(this.dlvBidService.tree);
}

复制代码

数据服务dlv-bid.component.service.ts:

@Injectable()
export class DlvBidService {
public tree = [];
public GetPreDlvBids() {
return this.http
.get(`${this.dlvBidURL}getDlvBids?token=${localStorage.getItem('access_token')}`)
.map((res: Response) => {
const rst = this.extractData(res);
console.log(rst);
if (rst.vali === false) {
alert('登录错误，请重新登录');
return;
} else if ( rst.succ === false) {
alert('信息提取错误');
return;
}
this.getTreeData(rst);
})
.subscribe();
}
getTreeData(src: any) {
let tmp: string;
let key: string;
let tmpObj: any;
let i: Number = 0;
tmp = JSON.stringify(src);
tmpObj = JSON.parse(tmp);
delete tmpObj.succ;
delete tmpObj.vali;
for ( key in tmpObj) {
// console.log(`\'${key}\'`);
this.tree.push(tmpObj[`${key}`]);
}
}
}

复制代码

JeffryLI · JeffryLI

nikankind 发表于 2017-9-8 12:51
您好，我的后端时NodeJs平台的Express，响应时间在十几ms。如果将数据服务改为本地模拟的数据，就能够正 ...

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

JeffryLI · JeffryLI

您好，从您的代码中看不出来问题，能不能提供一个能独立运行的demo我帮您看看。

nikankind · nikankind

JeffryLI 发表于 2017-9-8 12:02
您好，从您的代码中看不出来问题，能不能提供一个能独立运行的demo我帮您看看。

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

nikankind · nikankind

本帖最后由 nikankind 于 2017-9-14 11:00 编辑

JeffryLI 发表于 2017-9-8 14:11
您好，flexgrid没有表头点击事件的接口，您是服务器请求数据，建议下分页加载第一页数据后拿到前端，作为 ...

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

JeffryLI · JeffryLI

nikankind 发表于 2017-9-13 10:06
问题解决了。
问题原因：在Angular2下通过Rxjs请求数据发给FlexGrid时，前端取得数据后需要手动刷新Conn ...

好腻害，哈哈。

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

FlexGrid点一下表头才能显示数据

5 个回复

元老葡萄