dojo 表格控件

zsuny 贡献于2012-09-14

作者 Administrator  创建于2012-03-13 06:18:00   修改者USER  修改于2012-03-25 12:56:00字数1242

文档摘要:dojo表格控件DataGrid的使用方法及不能完整显示的解决基本类和函数为了显示ListView风格的控件,在dojo中可以使用dojox.grid.DataGrid类构造Grid表格对象。通过向构造函数传递初始化对象,指定数据、表头、显示风格等。
关键词:

dojo表格控件DataGrid的使用方法及不能完整显示的解决 1. 基本类和函数 为了显示ListView风格的控件,在dojo中可以使用dojox.grid.DataGrid类构造Grid表格对象。通过向构造函数传递初始化对象,指定数据、表头、显示风格等。 2. 示例代码 通过生成60条模拟数据并在Grid中显示 /* 创建模拟数据 */ var sample_data = [ { col1: "normal", col2: false, col3: 'But are not', col4: 29.91}, { col1: "important", col2: false, col3: 'always indicates', col4: 9.33}, { col1: "important", col2: false, col3: 'can be selectively', col4: 19.34} ]; var rows = 60; var store = new dojo.data.ItemFileWriteStore({'data':{ identifier: "id", items: [] }}); for(var i = 0, l = sample_data.length, obj = null; i < rows; i++){ obj = dojo.mixin({ id: i+1 }, sample_data[i%l]); store.newItem(obj); } /* 表头 */ var column = [[ {'name': 'Column 1', 'field': 'id', 'width': '100px'}, {'name': 'Column 2', 'field': 'col2', 'width': '100px'}, {'name': 'Column 3', 'field': 'col3', 'width': '200px'}, {'name': 'Column 4', 'field': 'col4', 'width': '150px'} ]]; /* 创建DataGrid */ var grid = new dojox.grid.DataGrid({ id: 'gridOpenfile', store: store, structure: column, width: '700px',/* not working */ height: '400px', rowSelector: '20px'} ); /* 附加到DIV */ grid.placeAt("divOpenfile"); /* 初始化并自动绘制*/ grid.startup(); 3. 不能显示的问题及解决 嵌入Dialog或ContentPane对象时,Grid不能完整显示。 解决办法: 1.通过css设置Grid父容器的宽度和高度。 2.通过resize重新设置gird的宽度和高度,并调用update()刷新即可显示。 /* 设置大小使内容显示 */ dojo.style("divOpenfile", {width: '720px', height: '420px'}); grid.resize({w:'700px', h:'400px'}) grid.update()

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享文档获得金币 ] 1 人已下载

下载文档