项目中用转dojox.grid.DataGrid的几点必知

        项目中使用dojox.grid.DataGrid组件来渲染页面数据，尤其是db记录的查询或是数据源的组成一致的时候。下面把grid的几个基本应用说一下。

        做过多年开发，这些数据显示的组件逻辑大都是一样的。通过指定数据源中的field来加载数据源中特定数据列，这样server端的数据就能简单的显示出来了。

 

     1.html页面引入grid。

[html] view plain copy print ?

1. <div data-dojo-type="dojox.grid.DataGrid"data-dojo-attach-point="defaultGrid"  style="width: 100%;"></div>    

      2.在grid加载完之后，要对grid组件进行数据源的field绑定，并且给grid指定Structrue。

[javascript] view plain copy print ?

1. //通过setStructure之后，页面上就可以比较完整的显示grid的结构，除了数据之外。  
2.   
3. is.defaultGrid.setStructure(this. _layout);  
4.   
5.     this._layout = [ {  
6.   
7.           name : “姓名”,  
8.   
9.           field : 'name',  
10.   
11.           width : '10%'  
12.   
13.       }, {  
14.   
15.           name : “性别”,  
16.   
17.           field : 'sex',  
18.   
19.           width : '15%'  
20.   
21.       }, {  
22.   
23.           name : “年龄”,  
24.   
25.           field : 'age',  
26.   
27.           width : '15%'  
28.   
29.       }  
30.   
31. ;  

          如果，想在grid中每一行前面嵌入多选框，则可以这样来做。就是将其他组件嵌入到grid的layout中即可。有些业务上要求，在grid中每行嵌入日期、button执行逻辑操作，也可以通过这种方式来做。

 

[javascript] view plain copy print ?

1. //嵌入多选框  
2.   
3.  this._layout = [   {  
4.   
5.             type: "dojox.grid._CheckBoxSelector"  
6.   
7.         },{  
8.   
9.         cells : [ [ {  
10.   
11.                    name : “姓名”,  
12.   
13.                      field : 'name',  
14.   
15.                      width : '10%'  
16.   
17.                  }, {  
18.   
19.                     name :“性别”,  
20.   
21.                     field: 'sex',  
22.   
23.                     width: '15%'  
24.   
25.              }  
26.   
27.       ] ]  
28.   
29. }];  
30.   
31.    
32.   
33. //嵌入日期  
34.   
35. this._layout = [ {  
36.   
37.       name : “日期”,  
38.   
39.       field : 'date',  
40.   
41.       width : '10%',  
42.   
43.       formatter : formatDate  
44.   
45. };  
46.   
47.    
48.  varformatDate = function(){  
49.   
50.       return new *.form.field.DateTimeField({  
51.   
52.              constraints:{  
53.   
54.                  min:new Date()   //限定可选则的最小时间  
55.   
56.              },  
57.   
58.              value:new Date()  
59.   
60.        });  
61.   
62.  };  

      3.通过加载静态数据源或动态获取数据，将数据封装成特定对象，供grid使用。

[javascript] view plain copy print ?

1.   _buildWriteStore : function(items) {  
2.   
3.         var store = new dojo.data.ItemFileWriteStore({  
4.   
5.             data : {  
6.   
7.                 id : "id",  
8.   
9.                 items : items  
10.   
11.             }  
12.   
13.        });  
14.   
15.         return store;  
16.   
17.  },  
18.   
19.    
20.   
21. //熟悉Windows编程的同学们也知道，store是这类grid组件必不可少的组成。  
22.   
23. Var_items = 数据源 ;  
24.   
25. this.defaultGrid.setStore(this._buildWriteStore(_items));  

 

      4.对grid一些常用的操作：

      前3点，就是从grid数据显现的准备到数据的获取和显示。如果业务上只要求数据的简单显示，那这样也就可以了。要是还要对数据进行操作，那我们可以自己封装getSelectItem/getSelectItems方法。

 

[javascript] view plain copy print ?

1.   getSelectedItem: function(){  
2.   
3.       var rowIndex;  
4.   
5.       var item;  
6.   
7.       rowIndex= this.defaultGrid.selection.selectedIndex;  
8.   
9.       item= this.defaultGrid.getItem(rowIndex);       
10.   
11.       return item;  
12.   
13. },  
14.   
15.   
16.   getSelectedItems: function(){  
17.   
18.       returnthis.defaultGrid.selection.getSelected();  
19.   
20. ,  

         其他的常见应用可以查Dojo API，http://dojotoolkit.org/api/ 。

         建议大家看dojo 1.6 。