轉帖|使用教程|編輯:龔雪|2016-01-26 09:11:52.000|閱讀 961 次
概述:本文主要為大家介紹如何使用Wijmo5 Flexgrid進行數(shù)據(jù)綁定。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
FlexGrid在JavaScript程序中啟動
代碼參考:
<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屬性設置數(shù)據(jù)源就可以實現(xiàn)簡單的綁定,代碼參考:
<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,
狀態(tài): 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實現(xiàn)自定義綁定。
<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},
],
示例參考:
本站文章除注明轉載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件網