国家  china

Wijmo5 FlexGrid教程(1)- 在工程中绑定数据

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

http://www.gcpowertools.com.cn/products/download.aspx?pid=54

 

更多资源:

Wijmo中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.gcpowertools.com.cn/showforum-140.html

 

请参考Wijmo5技术文章汇总

 《wijmo5 flexgrid基础教程》系列文章

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/wijmo5_flexgrid_binding.aspx

不允许评论