Wijmo5 FlexGrid教程（1）- 在工程中绑定数据

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

发布于 2015/10/13 00:00

WijmoJS

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感兴趣，可以到如下链接下载：

/download/?pid=54

WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型，推荐如下方式，加速产品评估进度：