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

最新推荐文章于 2024-11-06 17:18:24 发布

akunshenjk

最新推荐文章于 2024-11-06 17:18:24 发布

阅读量1.3k

点赞数

文章标签： function null table javascript string xhtml

本文链接：https://blog.csdn.net/akunshenjk/article/details/1668738

版权

<%@ 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>