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属性连用   xxx|xxx 可分为多个* }*/dojo.declare("util.table",null,{applyTo:null,//绑定的idurl:null,//请求地址items:null,//元素集合constructor:function(args){  //构造函数dojo.safeMixin(this, args);//此处将上面得到的方法（及属性）与要声明类本身所拥有的方法（及属性）进行合并
            },init:function(){var tableHtml = '';var tableHeader = '';var arrItems = new Array();//将每个items放入数组中var _items =   this.items;var datas = loadJson(this.url);//获取后台json数据//headerarray.forEach(_items,function(item,space){if(space == _items.length-1){tableHeader += '';arrItems.push(item);});tableHeader +='';//bodyvar tableTr = '';array.forEach(datas,function(_data,x){//集合中的每行元素if( x%2 == 0){tableTr +=  ';}else{tableTr +=  ';}var tableTd = '';//根据items中的条件进行表格元素的判断array.forEach(arrItems,function(_item,n){if(typeof(_item._colspan) != 'undefined' && parseInt(_item._colspan) >= 2){if(typeof(_item._sticking)=='undefined'){tableTd += '';tableTd += '';}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 += ' ';} else{tableTd += ' >'+__stickings[i]+' ';}}}}else{if(_item._align == 'right'){ //排列方式tableTd +='';}else{tableTd += ' >'+ _data[_item._name] + '';}}});//headerif(x == datas.length-1){tableTr += ' class="none">'+tableTd+'';}else{tableTr += ' >'+tableTd+'';}});tableHtml += tableHeader + tableTr + '
;}else{tableHeader += '
;}if(typeof(item._colspan) != 'undefined' && parseInt(item._colspan) >= 2){tableHeader += ' colspan="2"  ';}tableHeader +=  ' >'+item._header+'
'+_data[_item._name]+'
'+_data[_item._name]+'
;}else{tableTd += '
;}if(i == __stickings.length - 1){tableTd += '  class="none" >'+__stickings[i]+'
;}else{tableTd +='
}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] + '
' ;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 ''+text+'|流水';}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声明