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;
        }
    }
 };