基于Ajaxpro.net的客户端数据绑定控件--GridView

最新推荐文章于 2024-04-22 15:43:49 发布

望梵

最新推荐文章于 2024-04-22 15:43:49 发布

阅读量383

点赞数

文章标签： function null table javascript string xhtml

http://blog.csdn.net/akunshenjk/archive/2007/06/27/1668738.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>基于Ajaxpro.net的客户端数据分页控件--GridView</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css">

        .table{background:#000;border:0;}

        .table td{background:#fff;}

    </style>

    <script language="javascript" src="scripts/lib/prototype.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

         <div id="ShowData">

                    

                </div>

                <div id="showpage">

                     </div>

                    <input type="button" id="shenjkss" value="test" />

            <script language="javascript" type="text/javascript"> 

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

  * Class:       GridView

  * @Parameter:  container   控件容器

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

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

 var GridView=function(container,datasource){

    this.container=(typeof container=='undefined' || typeof container!='object')?document.body:container;

    this.dt=datasource;

    this.rowsCount=this.dt.Rows.length;

    //this.columnsCount=this.dt.Columns.length;

    //创建数据容器

    var Id=this.container.id+'_UNDEDINEDID';

    if($(Id)!=null){

        this.Table=$(Id);

        this.Table.removeChild(this.Table.getElementsByTagName('tbody')[0]);//清除现有数据,处理方法有待改进  

    }else{

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

        this.container.appendChild(table);

        this.Table=table;

    }

    this.Header=this.Table.insertRow(0);  //数据头部行

    this.Fields=new Array();                    //数据绑定列

    this.FormatColumns=new Array();             //格式化绑定列

 };

 GridView.prototype={

    /*

        设置数据容器模板

    */

    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;     

    },

    /*

        设置头部模板

    */

    HeaderTemplate:function(height,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;   

    },

    /*

        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;

    },

    /*

        数据绑定

    */

    DataBind:function(){

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

                    if(matchs.length==this.Fields[j].length){

                        for(var k=0;k<matchs.length;k++){

                            str=str.replace(matchs[k],this.dt.Rows[i][this.Fields[j][k]]);                           

                        }

                        cell.innerHTML=str

                    }else{

                        alert('the format string isn/'t matched.');

                    }

                }else{                                  //显示原始数据

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

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

                    }

                }

            }

        }

    }

 };              

                 

                function pageds(index){

                    var ds= new Ajax.Web.DataSet();                    

                    var dt = new Ajax.Web.DataTable(); 

                    dt.addColumn("FirstName", "System.String");

                    dt.addColumn("Age", "System.Int32"); 

                    if(index<1)index=1;

                    for(var i=(index-1)*10;i<index*10;i++){

                        dt.addRow({"FirstName":"Michael_"+i,"Age":i});

                    }

                    ds.addTable(dt);

                    return ds;

                }

                function Test(){ 

                   var ds=   pageds(1);

                   var t=new GridView($('ShowData'),ds.Tables[0]);

                   t.ItemTemplate(300,0,'table',1,1);

                   t.AddColumn('姓名',['FirstName','Age'],100,null);

                   t.AddColumn('年龄',['Age'],100,'his age is {0}');

                   t.AddColumn('操作',['Age'],100,'<a href="{0}">删除</a>')

                   t.DataBind();

                }

                addEvent(window,'load',this.Test.bind(this));

                

            </script>



        <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>

            

    </form>

</body>

</html>

望梵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Ajaxpro.net的客户端数据绑定控件--GridView

http://blog.csdn.net/akunshenjk/archive/2007/06/27/1668738.aspx 基于Ajaxpro.net的客户端数据分页控件--GridView .table{background:#000;border:0;} .table td
复制链接

扫一扫