用.Net实现基于CSS的AJAX开发(2)

       好了,完成删除,,那么所有对应这个业务的删除都可以由命名为dgBigclassmanage的某一元素通过绑定delbtn样式来执行删

  除(当然,这样不科学,不过是DEMO嘛,如果是实际你可以在QueryString里多传一个参数,在到AjaxDelRow派发后再用进行二次派发,然后以这个参数做标识就完美了)由于麻烦,,有兴趣的自己做吧。。 呵呵。
  
  这个样式只依赖TABLE元素,所以DATAGRID、DATALIST、自己做的TABLE,自定义控件只要最后生成TABLE元素的控件都可以用。
   主要提供一个思想,跟代码制作的好坏无关。在.NET里轻量地使用样式绑定,在有AJAX应用的开发中效果很棒。你也可以自己去实现一个更优秀的轻量框架了。
  
  增删改、上下移动记录样式绑定的JS:
  
   /**//**
   * Written by Wangzhongyuan
   *
   * 这是一个样式驱动的功能按钮控制脚本,样式用法如下:
   *
   * 修改按钮样式: editgtn 应用样式后即可把目标元素变为修改按钮,目标行变为修改行并出现确定、取消按钮。
   * 删除按钮样式: delbtn 应用样式后即可把目标元素变为删除按钮,点击删除则目标删除。
   * 上移下移按钮样式: updownbtn 应用样式后即可把目标元素变为上移、下移元素,目标行变为可上移和下移。
   *
   * 其他需要样式正在制作中........
   **/
  var crudbtn = ...{
   that: false,
   isOdd: false,
   lastAssignedId : 0,
   addbtnid : 0,
   newRows: -1,
   init : function() ...{
   // 首先, 查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
   if (!document.getElementsByTagName) ...{
   return;
   }
  
   this.that = this;
  
   this.run();
  
   },
   /**//**
   * 遍历document中的所有table,如果有样式crudtable,则应用此脚本
   *
   **/
   run : function() ...{
   var tables = document.getElementsByTagName("table");
  
   for (var i=0; i < tables.length; i++) ...{
   var thisTable = tables[i];
  
   if (css.elementHasClass(thisTable, 'crudtable')) ...{
   this.makecrudTable(thisTable);
   }
   }
   },
   /**//**
   * 构建控制按钮
   **/
   makecrudTable : function(table) ...{
  
   // 首先, 检测table是否有id,如果没有则创建
   if (!table.id) ...{
   table.id = 'crudTable'+this.lastAssignedId++;
   }
   // 遍历表格的数据行
   var newRows = new Array();
   // 遍历表格所有数据行
   for (var j = 0; j < table.tBodies[0].rows.length-1; j++) ...{
   // 遍历数据行所有列
   for(var k = 0;k < table.tBodies[0].rows[j+1].cells.length;k++) ...{
   // 判断是否存在删除样式,如果存在则把该单元个转化为删除按钮
   if(css.elementHasClass(table.tBodies[0].rows[j+1].cells[k], 'delbtn')) ...{
   table.tBodies[0].rows[j+1].cells[k].id = 'delbtn'+this.addbtnid ++;
   var linkEl = createElement('a');
   linkEl.href = '#';
   linkEl.onclick = this.delRow;
   linkEl.setAttribute('columnId', k);
  
   var innerEls = table.tBodies[0].rows[j+1].cells[k].childNodes;
  
   linkEl.innerText = "删除";
   table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
   }
   // 判断是否存在修改样式,如果存在则把该单元个转化为修改按钮
   if(css.elementHasClass(table.tBodies[0].rows[j+1].cells[k], 'editbtn')) ...{
   table.tBodies[0].rows[j+1].cells[k].id = 'delbtn'+this.addbtnid ++;
   var linkEl = createElement('a');
   linkEl.href = '#';
   linkEl.onclick = this.editRow;
   linkEl.setAttribute('columnId', k);
  
   var innerEls = table.tBodies[0].rows[j+1].cells[k].childNodes;
  
   linkEl.innerText = "修改";
   table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
   }
   // 判断是否存在上移、下移样式,如果存在则把该单元个转化为上移、下移按钮
   if(css.elementHasClass(table.tBodies[0].rows[j+1].cells[k], 'updownbtn')) ...{
   table.tBodies[0].rows[j+1].cells[k].id = 'updownbtn'+this.addbtnid ++;

时间: 2024-12-02 11:16:06

用.Net实现基于CSS的AJAX开发(2)的相关文章

用.Net实现基于CSS的AJAX开发(1)

前面我介绍了我做的.net版的Ajax库(.NET下的简单AJAX处理库 ),现在要介绍的是一种开发模式:样式绑定式驱动开发.    样式驱动是我自己命名的,(我也不知道它叫什么,嘿嘿)以便区别目前的请求驱动式开发(如struts.webwork等)和事件驱动式开发(如asp.net.JSF等).   正文:   1 简介    首先,让我们来看看传统的WEB开发流程:    ·请求驱动: 最常见的一类WEB框架实现了以请求驱动的流程.一个HTTP请求近来,被一个通用的分发器Servlet   

用.Net实现基于CSS的AJAX开发(3)

  var linkEl = createElement('a');    linkEl.href = '#';    linkEl.onclick = this.upRow;    linkEl.setAttribute('columnId', k);       var innerEls = table.tBodies[0].rows[j+1].cells[k].childNodes;       linkEl.innerText = "上移";    table.tBodies[

基于ASP.NET AJAX技术开发在线RSS阅读器(上篇)

[注]本文测试环境:Windows XP专业版+Visual Studio 2005+整套ASP.NET AJAX框架+ASP.NET RSS Toolkit+SQL Server 2005. 一.RSS技术简介 RSS是一种描述和同步网站内容的XML格式,已经成为越来越流行的网站内容订阅技术.通过这种技术,网站可以极大地提高广大网站用户和网站数据之间的数据交互. RSS阅读软件可以分为桌面离线式和在线式两大类.有了这种工具,用户只需要添加初始其所关注的RSS网址,以后系统会自动更新相关内容,网

精华:AJAX开发简略 (第二部分)

ajax|精华 七.AJAX开发 到这里,已经可以清楚的知道AJAX是什么,AJAX能做什么,AJAX什么地方不好.如果你觉得AJAX真的能给你的开发工作带来改进的话,那么继续看看怎么使用AJAX吧. 7.1.AJAX应用到的技术 AJAX涉及到的7项技术中,个人认为Javascript.XMLHttpRequest.DOM.XML比较有用. A.XMLHttpRequest对象 XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数

使用jQuery简化Ajax开发_AJAX相关

学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery. jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库.无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了

分享六个基于Bootstrap的实用开发教程和模板演示

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 关于Bootstrap,相信大家一定不陌生,它已经成为现在主流产业的一个重要工具,Bootstrap提供了优雅的HTML和CSS规范,它基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.今天,我们带来6款Bootstrap实现的几款小应用,希望可以

AJAX开发简略 (第一部分)_AJAX相关

在使用浏览器浏览网页的时候,当页面刷新很慢的时候,你的浏览器在干什么?你的屏幕内容是什么?是的,你的浏览器在等待刷新,而你的屏幕内容是一片空白,而你在屏幕前苦苦的等待浏览器的响应.开发人员为了克服这种尴尬的局面,不得不在每一个可能需要长时间等待响应的页面上增加一个DIV,告诉用户"系统正在处理您的请求,请稍候--". 现在,有一种越来越流行越热的"老"技术,可以彻底改变这种窘迫的局面.那就是AJAX.如今,随着Gmail.Google-maps的应用和各种浏览器的支

基于jQuery实现Ajax验证用户名是否存在实例_jquery

本文章向大家分享基于jQuery实现的Ajax 验证用户名是否存在的实现代码,需要的码农朋友可以参考一下本文的源代码. jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详

AJAX开发简略 (第二部分)_AJAX相关

七.AJAX开发 到这里,已经可以清楚的知道AJAX是什么,AJAX能做什么,AJAX什么地方不好.如果你觉得AJAX真的能给你的开发工作带来改进的话,那么继续看看怎么使用AJAX吧. 7.1.AJAX应用到的技术 AJAX涉及到的7项技术中,个人认为Javascript.XMLHttpRequest.DOM.XML比较有用. A.XMLHttpRequest对象 XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而