基于Ajaxpro.net的客户端数据绑定控件(DataList)-控件新闻-慧都网

基于Ajaxpro.net的客户端数据绑定控件(DataList)

翻译|其它|编辑：郝浩|2008-06-13 11:08:08.000|阅读 2254 次

概述：

Ajaxpro.net 在客户端实现了.new Ajax.Web.DataSet(); 和new Ajax.Web.DataTable(); 因此,考虑数据也应该可以实现客户端的绑定,于是用Javascript实现了DataList的简单功能:AjaxPro.net 下载:<a href="http://www.ajaxpro.info/">AjaxPro</a>

cs代码:
protected void Page_Load(object sender, EventArgs e)
{
　　AjaxPro.Utility.RegisterTypeForAjax(typeof(index));
}
页面代码:
<%@ 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>无标题页</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>
　　</head>
<body>
　<form id="form1" runat="server">
　　<input type="button" onclick="Test()" value="test" />
　　　<div id="ShowData">
　　　　<asp:GridView ID="GridView1" runat="server">
　　　　</asp:GridView>
　　　</div>
　　<script language="javascript" type="text/javascript">
　　function $(sid){return document.getElementById(sid);}
　　function TestDs(){
　　　　var ds = new Ajax.Web.DataSet();
　　　　var dt = new Ajax.Web.DataTable();
　　　　dt.addColumn("FirstName", "System.String");
　　　　dt.addColumn("Age", "System.Int32");
　　　　dt.addRow({"FirstName":"Michael","Age":28});
　　　　dt.addRow({"FirstName":"Tanja","Age":25});
　　　　ds.addTable(dt);
　　　　return ds;
　　}
　　function Test(){
　　　　var t=new DataList(document.getElementById('ShowData'),TestDs());
　　　　t.CreateTable('shenjk',200,0,'table',1,1);
　　　　t.HeaderTemplate(new Array('姓名','年龄'));
　　　　t.DataBind();
　　　　// var t1=new DataList('',TestDs());
　　　　// t1.CreateTable('shenjk1',200,0,'table');
　　　　// t1.DataBind();
　　}
　　/*------------------------------------
　　*类:DataList 用于绑定ds
　　*参数:container 控件容器.
　　* ds 数据源
　　*-------------------------------------*/
　　var DataList=function(container,ds){
　　　　this.container=(typeof container=='undefined' || typeof container!='object')?document.body:container;
　　　　this.dt=ds.Tables[0];
　　　　this.rowsCount=ds.Tables[0].Rows.length;
　　　　this.columnsCount=ds.Tables[0].Columns.length;
　　};
　　DataList.prototype={
　　　　//创建数据表格
　　　　CreateTable:function(_Id,width,height,cssName,cellPadding,cellSpacing){
　　　　　　var Id='_UNDEDINEDID';
　　　　　　if(_Id!=null && _Id!='')Id=_Id;
　　　　　　if($(Id)==null){
　　　　　　　　var table=document.createElement('table');
　　　　　　　　table.id=Id;
　　　　　　　　this.container.appendChild(table);
　　　　　　　　this.table=table;
　　　　　　}else{
　　　　　　　　this.table=$(Id);
　　　　　　　　this.table.removeChild(this.table.getElementsByTagName('tbody')[0]);//清除现有数据,处理方法有待改进
　　　　　　}
　　　　　　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.setAttribute('cellPadding',cellPadding);
　　　　　　if(cellSpacing!=null && typeof(cellSpacing)=='number')this.table.setAttribute('cellSpacing',cellPadding);
　　　　},
　　　　//自定义表格头部内容
　　　　HeaderTemplate:function(header){
　　　　　　if(header.length!=this.columnsCount){
　　　　　　　　throw('HeaderTemplate length is not matched.');
　　　　　　}else{
　　　　　　var r_head=this.table.insertRow(0);
　　　　　　for(var i=0;i<this.columnsCount;i++){
　　　　　　　　var cell=r_head.insertCell(i);
　　　　　　　　cell.innerHTML=header[i];
　　　　　　}
　　　　}
　　},
　　//数据绑定
　　DataBind:function(){
　　　　//绑定头部
　　　　if(this.table.rows.length==0){ //如果没有自定头部,则采用数据字段作为头部.
　　　　　　var r_head=this.table.insertRow(0);
　　　　　　for(var i=0;i<this.columnsCount;i++){
　　　　　　　　var cell=r_head.insertCell(i);
　　　　　　　　cell.innerHTML=this.dt.Columns[i].Name;
　　　　　　}
　　　　}
　　　　//绑定数据
　　　　for(var i=0;i<this.rowsCount;i++){
　　　　　　var r=this.table.insertRow(i+1);
　　　　　　for(var j=0;j<this.columnsCount;j++){
　　　　　　　　var cell=r.insertCell(j);
　　　　　　　　cell.innerHTML=this.dt.Rows[i][this.dt.Columns[j].Name];
　　　　　　}
　　　　}
　　}
};
</script>
</form>
</body>
</html>
标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：CSDN

上一篇：Javascript 实现Hashtable 下一篇：Ajax有条件的跨域访问