dojo datagrid学习（一）
基础datagrid表单创建
1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 <link rel="stylesheet" href="https://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/../dijit/themes/claro/claro.css"> 6 <style type="text/css"> 7 @import "https://dojotoolkit.org/reference-guide/1.10/_static/js/dojox/grid/resources/claroGrid.css"; 8 9 /*Grid needs an explicit height by default*/ 10 #gridDiv { 11 height: 20em; 12 } 13 </style> 14 <script>dojoConfig = {async: true, parseOnLoad: false}</script> 15 <script src='https://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/dojo.js'></script> 16 17 <script> 18 require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dojo/domReady!'], 19 function(lang, DataGrid, ItemFileWriteStore, dom){ 20 21 //数据源 22 var data = { 23 identifier: "id", 24 items: [] 25 }; 26 var data_list = [ 27 { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91}, 28 { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33}, 29 { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34} 30 ]; 31 var rows = 60; 32 for(var i = 0, l = data_list.length; i < rows; i++){ 33 data.items.push(lang.mixin({ id: i+1 }, data_list[i%l])); 34 } 35 var store = new ItemFileWriteStore({data: data}); 36 37 //表头 38 var layout = [[ 39 {'name': 'Column 1', 'field': 'id', 'width': '100px'}, 40 {'name': 'Column 2', 'field': 'col2', 'width': '100px'}, 41 {'name': 'Column 3', 'field': 'col3', 'width': '200px'}, 42 {'name': 'Column 4', 'field': 'col4', 'width': '150px'} 43 ]]; 44 45 //创建表格 46 var grid = new DataGrid({ 47 id: 'grid', 48 store: store, 49 structure: layout, 50 rowSelector: '20px'}); 51 52 //表格绑定到div 53 grid.placeAt("gridDiv"); 54 55 //渲染表格 56 grid.startup(); 57 }); 58 </script> 59 </head> 60 <body class="claro"> 61 <div id="gridDiv"></div> 62 </body> 63 </html>
