Wijmo5 Flexgrid基础教程(一)【数据绑定,DataMap】
汲睿
FlexGrid在JavaScript程序中启动
- 添加Wijmo引用；
- 添加wijmo控件的扩展；
- 在JavaScript中初始化wijmo控件；
- （可选）添加css和自定义的样式文件。
代码参考：
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/wijmo.css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/bootstrap.js" type="text/javascript"></script>
<script src="scripts/wijmo.js" type="text/javascript"></script>
<script src="scripts/wijmo.input.js" type="text/javascript"></script>
<script src="scripts/wijmo.grid.js" type="text/javascript"></script>
</head>简单数据绑定
使用flexgrid的itemsSource属性设置数据源就可以实现简单的绑定，代码参考：
<script type="text/javascript">
//初始化flexgrid
$(document).ready(function () {
var count = 10;
var data = [];
for (var i = 0; i < count; i++) {
data.push({
序号: "00" + (i + 1).toString(),
ID号: "21601"+i.toString(),
英文名: "TingTao Ge",
中文名: "听涛阁",
最小楼层: 2,
最大楼层: 12,
状态: true,
日期: new Date(2014, i % 12, i % 28),
});
}
// create CollectionView on the data (to get events)
var cv = new wijmo.collections.CollectionView(data);
var grid = new wijmo.grid.FlexGrid('#theGrid1', {
itemsSource: cv,
});
});
</script>自定义绑定
将flexgrid的AutoGenerateColumns设置为false，即可通过columns实现自定义绑定。
<script type="text/javascript">
$(document).ready(function () {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
ids = '001,001,002,002,003,003'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id:ids[i%ids.length],
country: countries[i % countries.length],
});
}
var cvTrackingChanges = new wijmo.collections.CollectionView(data);
var grid = new wijmo.grid.FlexGrid('#gsFlexGrid',{
autoGenerateColumns: false,
columns: [
{ header: 'id', binding: 'id'},
{ header: 'country', binding: 'country'},
],
});
grid.itemsSource = cvTrackingChanges;
})
</script>设置某列只读：将isReadOnly属性设置为true。
设置某列的宽度：设置width属性为特定的值。
代码参考：
columns: [
{ header: 'id', binding: 'id',width:50,isReadOnly:true},
{ header: 'country', binding: 'country', width: 100},
],在上一篇，我们了解了数据绑定。本文我们就来介绍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数据对应关系。
类似资料：