您的位置：首页 > 其它

dojo自定义表格组件

2013-11-21 10:59 375 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航