Wijmo5 Flexgrid基础教程：数据绑定-控件新闻-慧都网

Wijmo5 Flexgrid基础教程：数据绑定

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

概述：本文主要为大家介绍如何使用Wijmo5 Flexgrid进行数据绑定。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

相关链接：

<Wijmo Enterprise下载>

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_binding.zip (72.86 kb)

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

本文转载自葡萄城

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>

标签：JavaScript HTML5 UI工具包

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：慧都控件网

上一篇：.NET开发人员必看：提高ASP.NET Web应用性能的24种方法和技巧下一篇：Qt使用教程：创建Qt Quick应用程序（二）

在线采购

中文文档库

试用/Demo下载

开发社群

Wijmo5 Flexgrid基础教程：数据绑定

简单数据绑定

自定义绑定

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

本文转载自葡萄城

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>

用科技创就卓越

Create excellence with technology

在线采购

中文文档库

试用/Demo下载

开发社群

Wijmo5 Flexgrid基础教程：数据绑定

简单数据绑定

自定义绑定

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

本文转载自葡萄城

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>

为你推荐

用科技创就卓越

Create excellence with technology