dojo DataGrid使用三

来源：互联网发布：驾校时间安排知乎编辑：程序博客网时间：2024/05/20 21:24

dojo DataGrid使用三-----通过外部文件构建数据

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <link rel="stylesheet" href="js/dojo/dojo/resources/dojo.css"> <link rel="stylesheet" href="js/dojo/dojox/grid/resources/tundraGrid.css">  <script type="text/javascript" src="js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>   <script type="text/javascript">   dojo.require("dojo.data.ItemFileWriteStore");   dojo.require("dojox.grid.DataGrid");   // 下面两个包用来创建右键弹出菜单 dojo.require("dijit.Menu");   dojo.require("dojox.widget.PlaceholderMenuItem");   // 使用dataGrid.txt中的数据作为填充DataGrid 的数据 var jsonStore = new dojo.data.ItemFileWriteStore({ url:'dataGrid.txt'});   var layout = [   {field: 'emp_no', name: 'Employee Number'},   {field: 'name', name: 'Name', editable: true },  //该列可编辑 {field: 'gender', name: 'Gender', editable:true,type:dojox.grid.cells.Select, options:['F','M'] }, //编辑该列时使用下拉菜单 {field: 'dept_no', name: 'Deptment Number', editable:true,type:dojox.grid.cells.Select, options:['730','731','732','733','734','735']},   {field: 'bonus', name: 'Bonus', editable: true }   ];   dojo.addOnLoad(function(){   var grid = new dojox.grid.DataGrid({   query: { emp_no: '*' },  //查询字符串 id: 'grid',            //DataGrid的 id   autoWidth:true,        //自动调整宽度 store: jsonStore,       //使用jsonStore 对象 structure: layout,       // 使用layout对象定义的结构 rowsPerPage: 20,       // 每页读取20条记录，保证Web浏览器的性能 headerMenu: gridMenu  // 指定头菜单为 gridMenu   });   /*append the new grid to the div*/ grid.placeAt("gridNode"); grid.startup(); //grid生效 });   </script>  </head><body class="tundra">   <div class="heading">Data Grid Menu</div>   <div dojoType="dijit.Menu" jsid="gridMenu" id="gridMenu" style="display: none;">   <div dojoType="dojox.widget.PlaceholderMenuItem" label="GridColumns" ></div>   </div>   <div id="gridNode" style="height:350px;" />   </body>  </html>

外部文件dataGrid.txt内容如下：

<span style="font-family:Microsoft YaHei;font-size:14px;">{  identifier: 'emp_no',  label: 'emp_no',  items: [       {emp_no:'2100', name:'Matt', gender:'M', dept_no:730,bonus:647},      {emp_no:'2200', name:'Lisa', gender:'F', dept_no:731, bonus:608},       {emp_no:'2300', name:'Mick', gender:'M', dept_no:732, bonus:532},       {emp_no:'2400', name:'John', gender:'M', dept_no:733, bonus:1840},       {emp_no:'2500', name:'Jan', gender:'M', dept_no:734,bonus:1040},       {emp_no:'2101', name:'Jeff', gender:'M', dept_no:730, bonus:647},        {emp_no:'2202', name:'Frank', gender:'M',dept_no:731, bonus:608},       {emp_no:'2303', name:'Fred', gender:'M', dept_no:732, bonus:532}   ]}  </span>