Wijmo5 Flexgrid基础教程：数据绑定

<Wijmo Enterprise下载>

FlexGrid在JavaScript程序中启动

1. 添加Wijmo引用；
2. 添加wijmo控件的扩展；
3. 在JavaScript中初始化wijmo控件；
4. （可选）添加css和自定义的样式文件。

代码参考：

1 2 3 4 5 6 7 8 9 10 11 12

< 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属性设置数据源就可以实现简单的绑定，代码参考：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

< 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实现自定义绑定。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

< 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属性为特定的值。

代码参考：

1 2 3 4

columns: [ { header:  'id' , binding:  'id' , width : 50 ,isReadOnly:true}, { header:  'country' , binding:  'country' ,  width :  100 }, ],

示例参考： flexgrid_binding.zip (72.86 kb) 

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

本文转载自葡萄城