dojo DataGrid使用三

最新推荐文章于 2016-06-02 13:06:40 发布

疯丫头666

最新推荐文章于 2016-06-02 13:06:40 发布

阅读量2.2k

点赞数

分类专栏： Django 文章标签： Dojo DataGrid

本文链接：https://blog.csdn.net/wangli61289/article/details/9987947

版权

Django 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

疯丫头666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dojo DataGrid使用三

dojo DataGrid使用三-----通过外部文件构建数据 dojo.require("dojo.data.ItemFileWriteStore"); dojo.require("dojox.grid.DataGrid"); // 下面两个包用来创建右键弹出菜单 dojo.require("dijit.Menu");
复制链接

扫一扫

专栏目录