Wijmo5 Flexgrid基础教程：DataMap-控件新闻-慧都网

Wijmo5 Flexgrid基础教程：DataMap

转帖|使用教程|编辑：龚雪|2016-01-27 09:05:08.000|阅读 774 次

概述：flexgrid在winForm平台下有一个功能，叫做DataMap。对于flexgrid的某一列，显示的文字和存储的值不一致，就可以使用DataMap功能。这个功能在基于HTML5平台的flexgrid中也可以使用。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

相关链接：

在上一篇，我们了解了数据绑定。本文我们就来介绍flexgrid的一个重要功能：dataMap。

flexgrid在winForm平台下有一个功能，叫做DataMap。对于flexgrid的某一列，显示的文字和存储的值不一致，就可以使用DataMap功能。这个功能在基于HTML5平台的flexgrid中也可以使用。本文使用的框架是纯JavaScript。

实现步骤如下：

1.创建字段

创建id和name两个字段，并且赋值。代码参考：

actions = [{ id: 3, name: 'Invite' },
{ id: 26, name: 'Finalize' },
{ id: 1, name: 'Withdraw' }],

2.创建数据源

创建数据源里的一个字段actionId，它的值是之前的id。代码参考：

for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i % countries.length],
actionId: actions[i % actions.length].id
});
}

3.DataMap创建关系

通过DataMap创建id和name的关系。代码参考：

var actionsMap = new wijmo.grid.DataMap(actions, "id", "name");

4.设置dataMap

使用列的dataMap属性设置dataMap。代码参考：

var col = grid.columns.getColumn('actionId');
col.dataMap = actionsMap;

到此，就实现了列的DataMap数据对应关系。

本文的详细源代码请下载：

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>

标签：JavaScript HTML5 UI工具包

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@hmdbvip.cn

文章转载自：慧都控件网

上一篇：LoadRunner教程：Vuser脚本回放（三）下一篇：LoadRunner教程：Vuser脚本回放（二）

永利最大(官方)网站

在线采购

中文文档库

试用/Demo下载

开发社群