Wijmo5 Flexgrid基础教程：数据绑定

<Wijmo Enterprise下载>

FlexGrid在JavaScript程序中启动

1. 添加Wijmo引用；

2. 添加wijmo控件的扩展；

3. 在JavaScript中初始化wijmo控件；

4. （可选）添加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_binding.zip (72.86 kb) 

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

本文转载自葡萄城