JS GridView
/*--------------------------------------------------
* Class: GridView
* @Parameter: container 控件容器
* @Parameter: datasource 数据源(类型为DataTable)
* @Parameter: TableId 数据容器ID
*------------------------------------------------------*/
var GridView=function(container,datasource,TableId){
this.container=(typeof container=='undefined' || typeof container!='object')?document.body:container;
this.dt=datasource;
this.rowsCount=this.dt.Rows.length;
//创建数据容器
this.id=(TableId!=null && TableId!='')?TableId:this.container.id+'_UNDEDINEDID';
if($(this.id)!=null){
this.Table=$(this.id);
this.Table.removeChild(this.Table.getElementsByTagName('tbody')[0]);//清除现有数据,处理方法有待改进
}else{
var table=document.createElement('table');
table.id=this.id;
this.container.appendChild(table);
this.Table=table;
}
this.Header=this.Table.insertRow(0); //数据头部行
this.Fields=new Array(); //数据绑定列
this.FormatColumns=new Array(); //格式化绑定列
//数据容器样式
this.Border=0; //边框
this.BackColor='#000'; //表格背景颜色
this.RowsBackColor='#fff'; //行背景颜色
this.RowsHeight='20px'; //行高
};
GridView.prototype={
/*
设置数据容器模板
width: 表格宽度
height: 高度
cssName: 样式
cellPadding
cellSpacing
*/
ItemTemplate:function(width,height,cssName,cellPadding,cellSpacing){
if(width!=null && width!='' && parseInt(width)!=0)this.Table['style']['width']=width+'px';
if(height!=null && height!='' && parseInt(height)!=0)this.Table['style']['height']=height+'px';
if(cssName!=null && typeof(cssName=='string') && cssName!='')this.Table.className=cssName;
if(cellPadding!=null && typeof(cellPadding)=='number')this.Table.cellPadding=cellPadding;
if(cellSpacing!=null && typeof(cellSpacing)=='number')this.Table.cellSpacing=cellSpacing;
},
/*
设置头部模板
height:头部高度
backgroundcolor:头部背景颜色
cssName:头部样式
*/
HeaderTemplate:function(height,backgroundcolor,cssName){
if(height!=null && height!='' && parseInt(height)!=0)this.Header['style']['height']=height+'px';
if(cssName!=null && typeof(cssName=='string') && cssName!='')this.Header.className=cssName;
if(backgroundcolor!=null && typeof(backgroundcolor=='string') && backgroundcolor!='')this.Header['style']['backgroundColor']=backgroundcolor;
},
/*
AddColumn 设置头部列以及列属性
columnText 头部文字
columnName 绑定字段
width 列宽
formatString 格式化字符 如:<a href="index.aspx?ID={0}&Name={1}">删除</a>
replaceText 替换列文字
*/
AddColumn:function(columnText,columnName,width,formatString){
var index=this.Header.getElementsByTagName('td').length;
var cell=this.Header.insertCell(index);
cell.innerHTML=columnText;
if(width!=null && width!='' && parseInt(width)!=0)cell.style.width=width+'px';
this.Fields[index]=columnName;
if(formatString==null)formatString='';
this.FormatColumns[index]=formatString;
},
/*添加行事件,用户自己重构*/
RowsEvent:function(row){},
/*
数据绑定
*/
DataBind:function(){
/*先设置表格样式*/
this.Table['style']['border']=this.Border;
this.Table['style']['backgroundColor']=this.BackColor;
this.columnsCount=this.Fields.length; //表格的列数
//开始绑定数据
for(var i=0;i<this.rowsCount;i++){
var r=this.Table.insertRow(i+1);
for(var j=0;j<this.Fields.length;j++){
var cell=r.insertCell(j);
if(this.FormatColumns[j]!=''){ //格式化显示数据
var str=this.FormatColumns[j];
var matchs=str.match(//{/d/}/ig);
for(var k=0;k<this.Fields[j].length;k++){
str=str.replace(eval('///{'+k+'//}/ig'),this.dt.Rows[i][this.Fields[j][k]]);
}
cell.innerHTML=str;
}else{ //显示原始数据
for(var k=0;k<this.Fields[j].length;k++){
cell.innerHTML+=this.dt.Rows[i][this.Fields[j][k]];
}
}
}
this.RowsEvent(r); //绑定行事件
r['style']['backgroundColor']=this.RowsBackColor; //设置行背景颜色
r['style']['height']=this.RowsHeight;
}
}
};
* Class: GridView
* @Parameter: container 控件容器
* @Parameter: datasource 数据源(类型为DataTable)
* @Parameter: TableId 数据容器ID
*------------------------------------------------------*/
var GridView=function(container,datasource,TableId){
this.container=(typeof container=='undefined' || typeof container!='object')?document.body:container;
this.dt=datasource;
this.rowsCount=this.dt.Rows.length;
//创建数据容器
this.id=(TableId!=null && TableId!='')?TableId:this.container.id+'_UNDEDINEDID';
if($(this.id)!=null){
this.Table=$(this.id);
this.Table.removeChild(this.Table.getElementsByTagName('tbody')[0]);//清除现有数据,处理方法有待改进
}else{
var table=document.createElement('table');
table.id=this.id;
this.container.appendChild(table);
this.Table=table;
}
this.Header=this.Table.insertRow(0); //数据头部行
this.Fields=new Array(); //数据绑定列
this.FormatColumns=new Array(); //格式化绑定列
//数据容器样式
this.Border=0; //边框
this.BackColor='#000'; //表格背景颜色
this.RowsBackColor='#fff'; //行背景颜色
this.RowsHeight='20px'; //行高
};
GridView.prototype={
/*
设置数据容器模板
width: 表格宽度
height: 高度
cssName: 样式
cellPadding
cellSpacing
*/
ItemTemplate:function(width,height,cssName,cellPadding,cellSpacing){
if(width!=null && width!='' && parseInt(width)!=0)this.Table['style']['width']=width+'px';
if(height!=null && height!='' && parseInt(height)!=0)this.Table['style']['height']=height+'px';
if(cssName!=null && typeof(cssName=='string') && cssName!='')this.Table.className=cssName;
if(cellPadding!=null && typeof(cellPadding)=='number')this.Table.cellPadding=cellPadding;
if(cellSpacing!=null && typeof(cellSpacing)=='number')this.Table.cellSpacing=cellSpacing;
},
/*
设置头部模板
height:头部高度
backgroundcolor:头部背景颜色
cssName:头部样式
*/
HeaderTemplate:function(height,backgroundcolor,cssName){
if(height!=null && height!='' && parseInt(height)!=0)this.Header['style']['height']=height+'px';
if(cssName!=null && typeof(cssName=='string') && cssName!='')this.Header.className=cssName;
if(backgroundcolor!=null && typeof(backgroundcolor=='string') && backgroundcolor!='')this.Header['style']['backgroundColor']=backgroundcolor;
},
/*
AddColumn 设置头部列以及列属性
columnText 头部文字
columnName 绑定字段
width 列宽
formatString 格式化字符 如:<a href="index.aspx?ID={0}&Name={1}">删除</a>
replaceText 替换列文字
*/
AddColumn:function(columnText,columnName,width,formatString){
var index=this.Header.getElementsByTagName('td').length;
var cell=this.Header.insertCell(index);
cell.innerHTML=columnText;
if(width!=null && width!='' && parseInt(width)!=0)cell.style.width=width+'px';
this.Fields[index]=columnName;
if(formatString==null)formatString='';
this.FormatColumns[index]=formatString;
},
/*添加行事件,用户自己重构*/
RowsEvent:function(row){},
/*
数据绑定
*/
DataBind:function(){
/*先设置表格样式*/
this.Table['style']['border']=this.Border;
this.Table['style']['backgroundColor']=this.BackColor;
this.columnsCount=this.Fields.length; //表格的列数
//开始绑定数据
for(var i=0;i<this.rowsCount;i++){
var r=this.Table.insertRow(i+1);
for(var j=0;j<this.Fields.length;j++){
var cell=r.insertCell(j);
if(this.FormatColumns[j]!=''){ //格式化显示数据
var str=this.FormatColumns[j];
var matchs=str.match(//{/d/}/ig);
for(var k=0;k<this.Fields[j].length;k++){
str=str.replace(eval('///{'+k+'//}/ig'),this.dt.Rows[i][this.Fields[j][k]]);
}
cell.innerHTML=str;
}else{ //显示原始数据
for(var k=0;k<this.Fields[j].length;k++){
cell.innerHTML+=this.dt.Rows[i][this.Fields[j][k]];
}
}
}
this.RowsEvent(r); //绑定行事件
r['style']['backgroundColor']=this.RowsBackColor; //设置行背景颜色
r['style']['height']=this.RowsHeight;
}
}
};