Getting Started
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)
如果你对Wijmo5感兴趣,可以到如下链接下载:
更多资源:
Wijmo中文官网:/developer/wijmojs
Wijmo5在线示例:/developer/wijmojscore
Wijmo5产品文档:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html
请参考Wijmo5技术文章汇总
《wijmo5 flexgrid基础教程》系列文章