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

最新推荐文章于 2024-08-27 13:38:21 发布
最新推荐文章于 2024-08-27 13:38:21 发布
阅读量524 收藏
点赞数
文章标签： function table null javascript server header 
 
基于Ajaxpro.net的客户端数据绑定控件(DataList)

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" οnclick="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>
望梵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用AjaxPro.Net框架实现在客户端调用服务端的方法
01-01
此文档将使用AjaxPro.Net框架实现Ajax功能：在客户端异步调用服务端方法。AjaxPro.Net是一个优秀的.net环境下的Ajax框架,用法很简单,可以查阅相关资料,本文档是一个简单的实例讲述使用AjaxPro的几个关键点。 1、下载...
AjaxPro.NET实现TextBox智能获取服务端数据功能
04-22
AjaxPro.NET是一个基于.NET Framework的库，用于在ASP.NET应用程序中实现异步JavaScript和XML（AJAX）技术，它能够创建无刷新的Web界面，提高用户体验。本示例讲解了如何利用AjaxPro.NET来实现TextBox控件的智能获取...
基于Ajaxpro.net的客户端数据绑定控件(DataList)
06-23 1336
基于Ajaxpro.net的客户端数据绑定控件(DataList)Ajaxpro.net 在客户端实现了.new Ajax.Web.DataSet(); 和new Ajax.Web.DataTable();    因此,考虑数据也应该可以实现客户端的绑定,于是用Javascript实现了DataList的简单功能:AjaxPro.net 下载:AjaxProcs代码:  protected voi
基于AjaxPro的javascript 数据绑定控件GridView(2.01版)
06-12 3408
去年写了一个javascript 的GridView,基本满足当时的需求，最近需求变了，需要对GridView进行升级了。/*---------------------------------------------------------- * JavaScript GridView create by Shenjk * its use to JavaScript Da
用.NET开发网站但是老大要求不使用服务器控件
gtdg5475的专栏
10-14 1260
<br />公司是做人力资源管理方面的<br />现在准备对一个以前的ASP网站改版，但是老大说不能有一个服务器控件，除了AspNetPager<br />原因是服务器控件用多了会生成很长串的viewstate。<br />太囧了～～～<br /><br />用.NET开发网站居然要求不使用服务器控件 各位大虾说说这样合理吗～<br />前台不使用 后台用开发效率会快些..<br />是合理的..不使用也照样开发 就是时间多花些..<br />不产生viewstate,可以考虑用asp.net mvc,NV
少量代码实现AjaxPro.DLL 定时更新GridView技巧（页面的局部更新）
周尚冬的专栏
02-28 1594
这几天遇到一个问题，要获取实时信息，同时绑定到前台。 用JS直接写到前台也是可以的，但是写JS太麻烦了。 于是选择使用了AjaxPro.2.DLL,他的一些使用方法就不用说明了吧。网上一搜一大把，我主要讲讲一些技巧。 在提前你可以这么做： 服务器及时信息
超级收藏夹
greatbag
05-25 1724
ESFramework 可复用的通信框架（序） 网页中单一表格横纵表头锁定的细节 纯ajax式,多用户选择示例 解决PowerDesigner里允许字段重名约束的设置问题－爽！ 实现提交页面后滚动条自动移动问题 C#中的接口 AjaxPro 内部机制探讨 NHibernate Step by Step(二) 单
angularjs和ajax的结合使用 （一）
weixin_30675247的博客
10-21 241
好久没写文了。这是一篇关于easyui配合ajax使用 的文章， 顺带介绍angularjs的使用 以及让你感受到angularjs的威力。网上对于ajax 的文也是多如牛毛 。我就不直接 从那种原生的httpxmlrequest 对象的js 写起了哈。 看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥 真正做的时候写那种东西 不是扯淡么 你叼 你技术牛逼 整站的代码你全用那种写。html...
经验技巧
weixin_30621919的博客
07-02 342
<html> <body> <a href='aa' stytle='cursor:hand'>ADFADF</a> </body> </html> /// <summary> /// 替换字符串中所有的html标签 /// </summary> /// &lt...
代码自动化(2)--程序设计
diben1401的博客
10-28 100
按照行业内的专业叫法，这个应该叫做 系统架构，因为自己不是专门够系统架构的，做的也是根据软件的不同要求大体分一下层，所有就叫做“软件设计”了，免得板砖太多，要挂彩了。 采用通用的三层架构：数据库访问层、业务逻辑层、数据展示层由于一直在忙着做项目，新技术几乎都没怎么关注，也没法把一些好的新技术应用到里面，就只把我熟悉的一些东西加到里面吧。 初步将这些元素加上Ajax：Ajax...
商业编程-源码-AjaxPro.NET实现的简单高效的Tree.zip
06-20
在构建树形结构时，AjaxPro.NET可以通过异步调用来动态加载节点，这样当用户展开一个节点时，只加载该节点及其子节点的数据，显著减少了网络传输量，提高了用户体验。这一特性对于处理大量数据的树形结构尤为重要，...
AjaxPro.Net源码
12-31
AjaxPro.Net是一个基于.NET框架的库，主要用于帮助开发者构建具有高度交互性和响应性的Web应用程序，通过使用Ajax（Asynchronous JavaScript and XML）技术。AjaxPro.dll是这个库的核心组件，提供了强大的功能，允许...
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 3942
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 1524
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM
最新发布
m0_54066656的博客
08-27 1131
JQ基础——DOM操作
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 1097
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
vue全局参数
qq_34631220的博客
08-24 500
其它页面如果想监听改变。
浏览器精度问题
m0_46281382的博客
08-25 589
浏览器如何解析后端返回的long类型的数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值