基于AjaxPro的javascript 数据绑定控件GridView(2.01版)

去年写了一个javascript 的GridView,基本满足当时的需求，最近需求变了，需要对GridView进行升级了。

/*----------------------------------------------------------

 *  JavaScript GridView create by Shenjk

 *  it's use to JavaScript DataSet Bind

 *  Author: shenjk

 *  Date:   2007-06-27

 *  Modify: 2008-06-12

 *	Version:2.01

 *-----------------------------------------------------------*/

 

 /*--------------------------------------------------

  * Class:       GridView

  * @Parameter:  container   控件容器

  * @Parameter:  datasource  数据源(类型为DataTable)

  * @Parameter:  TableId     数据容器ID

  *------------------------------------------------------*/

 var GridView=function(container,datasource,TableId){

    this.Version='2.01';

    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!='' && typeof arguments[2] =='string')?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.OptionsArray=new Array();                //列对齐方式

    

    //数据容器样式

    this.Border=0;                              //边框

    this.BackColor='#000';                      //表格背景颜色

    this.RowsBackColor='#fff';                  //行背景颜色  

    this.RowsHeight='20px';                    //行高  

    

    var optionIndex = 3;    

    if(typeof arguments[2] !='string'){optionIndex=2;}

    

    this.options=Object.extend({

        IsPager:false,

        PageChecks:null,

        OnCheckAll:null,

        PageSize:10,

        PageIndex:1,

        PageCount:1,

        ReordCount:datasource.Rows.length,

        PageEvent:Prototype.emptyFunction

    }, arguments[optionIndex] || {});

    

    if(this.options.IsPager){

        this.SetPager();

    }

 };

 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,align*/){

        var options=Object.extend({

            width:0,

            formatString:null,

            align:'left',

            FormatHandler:null                

            },arguments[2] || {});

        var index=this.Header.getElementsByTagName('td').length;

        var cell=this.Header.insertCell(index);

        cell.innerHTML=columnText;

        if(options.width!=null && options.width!='' && parseInt(options.width)!=0)cell.style.width=options.width+'px';

        this.Fields[index]=columnName;

        if(options.align!=null && options.align!=''){cell.style.textAlign=options.align;}

        this.OptionsArray[index]=options;

    },

    /*添加行事件,用户自己重构*/

    RowsEvent:function(row){},

    /*

        数据绑定

    */

    DataBind:function(){

        /*先设置表格样式*/

        this.Table['style']['border']=this.Border;

        this.Table['style']['backgroundColor']=this.BackColor;

        

        this.columnsCount=this.Fields.length;           //表格的列数

        //alert(this.dt.Rows[1][this.dt.Columns[10].Name].__type);

        //开始绑定数据

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

                var option=this.OptionsArray[j];

                cell.style.textAlign=option.align;

                var aryval=new Array();

                if(option.formatString!=null && option.formatString!=''){                      //格式化显示数据                   

                    var str=option.formatString;

                    var matchs=str.match(//{/d/}/ig);

                    for(var k=0;k<this.Fields[j].length;k++){   

                        aryval[k]=this.dt.Rows[i][this.Fields[j][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++){

                        aryval[k]=this.dt.Rows[i][this.Fields[j][k]];

                        cell.innerHTML+=this.dt.Rows[i][this.Fields[j][k]];                       

                    }                    

                }

                if(option.FormatHandler!=null){

                    option.FormatHandler(cell,aryval); //处理特殊数据

                }

            }

            this.RowsEvent(r);                                  //绑定行事件

            r['style']['backgroundColor']=this.RowsBackColor;   //设置行背景颜色

            r['style']['height']=this.RowsHeight;

        }

    },

    _PageObject:function(prentnode,id,index,text,alt){

        if(text==null)text=index;

        if(alt==null)alt=text;

        var a=document.createElement('A');           

        a.id=id;

        a.href='javascript:;';

        a.innerHTML=text;    

        a.title=alt;    

        prentnode.appendChild(a);

        prentnode.appendChild(document.createTextNode(' '));

        if(this.options.PageIndex==index){

            a.style.color='red';

            a.style.fontWeight='bold';

        }

        else{

            addEvent($(id),'click',this.options.PageEvent.bind(this,index));  

        }

    },

    //分页

    SetPager:function(){

        if(this.options.IsPager==false)return;

        var div=$(this.id+'_Page_Container');

        if(div){

            div.innerHTML='';

        }else{

            div=document.createElement('div');

            div.id=this.id+'_Page_Container';

            this.container.appendChild(div); 

        }  

        div.innerHTML='记录数:<span style="color:red">'+this.options.RecordCount+'</span> 页码:<span style="color:red">'+this.options.PageIndex+'/'+this.options.PageCount+'<span>  '  

        var start=this.options.PageIndex-5;

        if(start<1)start=1;

        var end=start+9;

        if(end>this.options.PageCount)end=this.options.PageCount;

        var pre=this.options.PageIndex>1?this.options.PageIndex-1:1;

        var next=this.options.PageIndex>=this.options.PageCount?this.options.PageCount:this.options.PageIndex+1;

        

        if(pre>10){this._PageObject(div,this.id+'_P_Pre10',pre-10,'<<','前十页');}

        if(pre>1){this._PageObject(div,this.id+'_P_Pre1',pre,'<','前一页');}

           

        for(var i=start;i<=end;i++){

            this._PageObject(div,this.id+'_P'+i,i);

        }

        

        if(next<this.options.PageCount){this._PageObject(div,this.id+'_P_Next1',next,'>','后一页');}

        if(next<this.options.PageCount-10){this._PageObject(div,this.id+'_P_Next10',next+10,'>>','后十页');}

        



        if(this.options.PageChecks){

            var chkall=document.createElement('input');

            chkall.type='checkbox';

            chkall.id=this.id+'___CHKALL';

            chkall.value='1';

            div.appendChild(chkall);

            if(this.options.OnCheckAll){  

                addEvent(chkall,'click',this.options.OnCheckAll.bind(this,chkall));

            }

            var lbl=document.createElement('label');

            lbl.innerHTML='全选/反选';

            div.appendChild(lbl);

            lbl.setAttribute('for',this.id+'___CHKALL');            

            div.appendChild(document.createTextNode(' '));

            var args=this.options.PageChecks;

            for(var i=0;i<args.length;i++){

                var A=document.createElement('A');

                A.innerHTML=args[i].text;

                div.appendChild(A);

                if(args[i].URL){

                    A.href=args[i].URL

                }else{

                    A.href="javascript:;";                   

                }

                if(args[i].OnClick){

                    addEvent(A,'click',args[i].OnClick.bind(this));

                }

                div.appendChild(document.createTextNode(' '));

            }

        }

    }

 };    

使用例子：(转载请注明出处:http://blog.csdn.net/akunshenjk)

首先必须是使用AjaxPro框架，如果使用中部分效果不能实现，请自行引入prototype.js

function GetUserSiteList(){

        var ret=ShenjkAjax.GetUserList(ulOptions).value; 

        CheckIsLogin(ret.IsOvertime);

        var ul=new GridView($('userlist'),ret.DataList.Tables[0],

        {

            IsPager:true, //需要分页，否则为false
	   PageSize:ret.PageSize, //分页大小
            PageIndex:ret.PageIndex, //当前页
            PageCount:ret.PageCount, //总页数
            RecordCount:ret.RecordCount, //总记录数

            PageEvent:function(res){ulOptions.PageIndex=res;GetUserSiteList();}//分页触发事件

            /*PageChecks:[

                {text:'删除',OnClick:function(){return confirm('确定要删除吗?')},URL:'index.aspx'},

                {text:'通过审核',OnClick:function(){return confirm('确定要删除吗?')},URL:'index.aspx'}

            ],

            OnCheckAll:function(res){CheckAll(res);}*/ //全选事件

        });

        ul.ItemTemplate(750,0,'',1,1);

        ul.BackColor='#ccc';

        ul.RowsBackColor='#fff';

        ul.RowsHeight='20px';

        ul.HeaderTemplate(25,'#fff');

        ul.AddColumn('选择',['ID'],{width:70,formatString:'<input type="checkbox" value="{0}">{0}'});

        ul.AddColumn('登录名',['UserName'],{width:100});

        ul.AddColumn('企业名',['CompName'],{width:200});

        ul.AddColumn('所选模板',['TemplateName'],{width:80,align:'center'})

        ul.AddColumn('操作',['ID'],{width:300,formatString:'<a href="javascript:;">编辑</a> | <a href="javascript:;">删除</a>',align:'center'});                   

        ul.RowsEvent=function(row){                 

           for(var i=1;i<=ul.rowsCount;i++){    

                var _id= row.childNodes[0].childNodes[0].value;

                var _title=row.childNodes[2].innerHTML;

                row.childNodes[4].getElementsByTagName('A')[0].οnclick=function(){/*SetCompSite(_title,_id,1);*/}  

                row.childNodes[4].getElementsByTagName('A')[1].οnclick=function(){/*SetCompSite(_title,_id,2);*/}                          

                row.οnmοuseοver=function(){eval('this.style.backgroundColor="#f2f2f2";');}

                row.οnmοuseοut=function(){eval('this.style.backgroundColor="#fff";')};                                                               

           }

       }

       ul.DataBind(); //数据绑定

    }