当前位置 : 主页 > 网页制作 > Dojo >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
项目中使用dojox.grid.DataGrid组件来渲染页面数据,尤其是db记录的查询或是数据源的组成一致的时候。下面把grid的几个基本应用说一下。 做过多年开发,这些数据显示的组件逻辑大都是

 

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

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

 

     1.html页面引入grid

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

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

  //通过setStructure之后,页面上就可以比较完整的显示grid的结构,除了数据之外。

this.defaultGrid.setStructure(this. _layout);

      this._layout = [ {

            name : “姓名”,

            field : 'name',

            width : '10%'

        }, {

            name : “性别”,

            field : 'sex',

            width : '15%'

        }, {

            name : “年龄”,

            field : 'age',

            width : '15%'

        }

 ];


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

 

//嵌入多选框

 this._layout = [   {

            type: "dojox.grid._CheckBoxSelector"

        },{

        cells : [ [ {

                   name : “姓名”,

                     field : 'name',

                     width : '10%'

                 }, {

                    name :“性别”,

                    field: 'sex',

                    width: '15%'

             }

      ] ]

}];

 

//嵌入日期

this._layout = [ {

      name : “日期”,

      field : 'date',

      width : '10%',

      formatter : formatDate

};

 
 varformatDate = function(){

      return new *.form.field.DateTimeField({

             constraints:{

                 min:new Date()   //限定可选则的最小时间

             },

             value:new Date()

       });

 };


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

  _buildWriteStore : function(items) {

        var store = new dojo.data.ItemFileWriteStore({

            data : {

                id : "id",

                items : items

            }

       });

        return store;

 },

 

//熟悉Windows编程的同学们也知道,store是这类grid组件必不可少的组成。

Var_items = 数据源 ;

this.defaultGrid.setStore(this._buildWriteStore(_items));

 

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

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

 

    getSelectedItem: function(){

        var rowIndex;

        var item;

        rowIndex= this.defaultGrid.selection.selectedIndex;

        item= this.defaultGrid.getItem(rowIndex);     

        return item;

  },

 
    getSelectedItems: function(){

        returnthis.defaultGrid.selection.getSelected();

 },

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

         建议大家看dojo 1.6 。

网友评论