世俱杯 2025

Wijmo5 Flexgrid基础教程：数据绑定

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

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

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

相关链接：

<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},
],

示例参考： 

PS: 关于ComponentOne，这些产品你可以关注>>
本文转载自
葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>
新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>

标签：JavaScript HTML5UI工具包

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

文章转载自：慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP