dojo自定义表格组件

table.js组件定义

define(["dijit/registry", "dojo/_base/array", "dojo/dom",'dojo/_base/kernel', 'dojo/_base/loader'],
    function(registry,array, dom,dojo){
        /**
         * 创建表格组件
         * items 协议标准
         * {
         *      _header:"标题一",  //表格标题
         *      _align:"right",    //排列方式  目前排列方式  居中center,居右right
         *      _name:"xxx",        //字段名称
         *      _sticking:"xxxx",  //粘贴  替换表格数据中原有的值
         *      _colspan:"2"        //将列分割  可与 _sticking属性连用   <xx>xxx<xx>|<xxx>xxx<xxx> 可分为多个
         * }
         */
        dojo.declare("util.table",null,{
            applyTo:null,//绑定的id
            url:null,//请求地址
            items:null,//元素集合
            constructor:function(args){  //构造函数
                dojo.safeMixin(this, args);//此处将上面得到的方法（及属性）与要声明类本身所拥有的方法（及属性）进行合并
            },
            init:function(){
                var tableHtml = '<table width="100%" border="0" cellspacing="0" cellpadding="2" class="tab01">';
                var tableHeader = '<tr bgcolor="#0a486b">';
                var arrItems = new Array();//将每个items放入数组中
                var _items =   this.items;
                var datas = loadJson(this.url);//获取后台json数据
                //header
                array.forEach(_items,function(item,space){
                    if(space == _items.length-1){
                        tableHeader += '<th class="none" ';
                    }else{
                        tableHeader += '<th ';
                    }
                    if(typeof(item._colspan) != 'undefined' && parseInt(item._colspan) >= 2){
                        tableHeader += ' colspan="2"  ';
                    }
                    tableHeader +=  ' >'+item._header+'</th>';
                    arrItems.push(item);
                });
                tableHeader +='</tr>';
                //body
                var tableTr = '';
                array.forEach(datas,function(_data,x){
                    //集合中的每行元素
                    if( x%2 == 0){
                        tableTr +=  '<tr bgcolor="#0a486b" ';
                    }else{
                        tableTr +=  '<tr bgcolor="#085987" ';
                    }
                    var tableTd = '';
                    //根据items中的条件进行表格元素的判断
                    array.forEach(arrItems,function(_item,n){
                        if(typeof(_item._colspan) != 'undefined' && parseInt(_item._colspan) >= 2){
                            if(typeof(_item._sticking)=='undefined'){
                                tableTd += '<td  bgcolor="#f43d3d" >'+_data[_item._name]+'</td>';
                                tableTd += '<td  bgcolor="#36b7f0" >'+_data[_item._name]+'</td>';
                            }else{
                                var  json  = '{"sticking":'+  _item._sticking+'}';   //讲function字符串变为json形式 用于转换为对象
                                var  obj  = eval("("+json+")");
                                var  _sticking =  obj.sticking(_data[_item._name]);
                                var __stickings = _sticking.split('|');
                                for(var i=0;i<__stickings.length;i++){
                                    if(i%2 == 0){
                                        tableTd += '<td  bgcolor="#36b7f0" ';
                                    }else{
                                        tableTd += '<td  bgcolor="#f43d3d" ';
                                    }
                                    if(i == __stickings.length - 1){
                                        tableTd += '  class="none" >'+__stickings[i]+'</td> ';
                                    } else{
                                        tableTd += ' >'+__stickings[i]+'</td> ';
                                    }
                                }
                            }
                        }else{
                            if(_item._align == 'right'){//排列方式
                                tableTd +='<td class="r" ';
                            }else{
                                tableTd +='<td  '
                            }
                            if(_item._header == '操作'){
                                tableTd += ' bgcolor="#36b7f0"  ';
                            }
                            if(typeof(_item._sticking) != 'undefined'){//粘板
                                var  json  = '{"sticking":'+  _item._sticking+'}';   //讲function字符串变为json形式 用于转换为对象
                                var  obj  = eval("("+json+")");
                                var  _sticking =  obj.sticking(_data[_item._name]);
                                _data[_item._name] = _sticking;
                            }
                            if(n == data.length){
                                tableTd += '   class="none" >'+ _data[_item._name] + '</td>';
                            }else{
                                tableTd += ' >'+ _data[_item._name] + '</td>';
                            }
                        }
                    });
                    //header
                    if(x == datas.length-1){
                        tableTr += ' class="none">'+tableTd+'</tr>';
                    }else{
                        tableTr += ' >'+tableTd+'</tr>';
                    }
                });
                tableHtml += tableHeader + tableTr + '</table>' ;
                arrItems.splice(0,arrItems.length);
                dojo.byId(this.applyTo).innerHTML =  tableHtml;
                //console.log(tableHtml);
            }
        });
        //获取后台数据
        function loadJson(url){
             var data = null;
             dojo.xhrPost({
                 url:url,
                 handleAs: 'json',
                 sync:true ,
                 content:{
                     act:'info'
                 },
                 load:function(response, ioArgs){
                     if(response.result===0){
                         data = response.datas;
                     };
                 },
                 error:function(response, ioArgs){

                 }
             });
             return data;
        }
    });

 

调用组件

define(["dijit/registry","dojo/_base/array","dojo/dom","src/table","src/master"], function(registry,array,dom,master){
    return {
        init: function() {
          //操作
          operation =function(val){
              var text = '卖出';
              if(val == 3){
                  text += 3;
              }
              return '<a href="#">'+text+'</a>|<a href="#">流水</a>';
          }
          var orderTabel = new util.table({
              applyTo:'_table',
              url:'server/test/hq.jsp',
              items:[
                  {_header:"标题一",_align:"right",_name:"name1"},
                  {_header:"标题二",_align:"center",_name:"name2"},
                  {_header:"操作",_align:"center",_name:"name3",_sticking:operation,_colspan:"2"}
              ]
          });
            orderTabel.init();
        }
    };
});

 

html声明

<html>
<body>
<!-- 容器 -->
<div  id="_table" data-dojo-type="dojox.mobile.ScrollableView">

</div>
<!-- 容器end -->
</body>
</html>