Wijmo5 Flexgrid基础教程:数据绑定

转帖|使用教程|编辑:龚雪|2016-01-26 09:11:52.000|阅读 444 次

概述:本文主要为大家介绍如何使用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,这些产品你可以关注>>
本文转载自葡萄城
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!优惠详情点击查看>>
新年新禧新气象,送礼送福送优惠!优惠详情点击查看>>


标签:JavaScript HTML5UI工具包

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


慧都网友 2016-01-26 10:06:03.000
0

比较基础的教程,还附有代码和示例,非常不错哈!


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
WijmoJS

新一代的HTML5/JavaScript UI控件,为您的企业应用提供更加灵活的体验。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat