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，這些產品你能夠關注>>

本文轉載自葡萄城