当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 用.Net实现基于CSS的AJAX开发(5)

ASP.NET
如何在ASP.NET中使用SmtpMail发送邮件
在VB.NET中利用Split和Replace函数计算字数
Attribute应用:简化ANF自定义控件初始化过程
ASP.NET 2.0移动开发入门之使用样式
ASP.NET 2.0中使用OWC生成图表
ASP.NET 2.0中控件的简单异步回调
一个无法捕获ADO.NET Dataset的内存错误
深入解读ADO.NET2.0的十大最新特性
.Net平台下的分布式缓存设计
ASP.NET全局异常处理浅析
ASP.NET 2.0中文验证码的实现
浅析.NET平台编程语言的未来走向
.net 框架程序设计收藏
使用ASP.NET MVC Futures 中的异步Action
详解.NET中的XmlReader与XmlWriter
关于.NET中的Server push技术
asp.net页面执行机制
对比JSP和ASP.NET的存储过程
.NET 4.0不会包含System.Shell.CommandLine
ASP.NET十个有效性能优化的方法

ASP.NET 中的 用.Net实现基于CSS的AJAX开发(5)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 168 ::
收藏到网摘: n/a

  /**//**
   * 下移按钮
   **/
   downRow : function(e) ...{
   var that = crudbtn.that;
   var linkEl = getEventTarget(e);
   var td = linkEl.parentNode;
   var tr = td.parentNode;
   var thead = tr.parentNode;
   var table = thead.parentNode;
  
   var otr = tr;
   if(tr.rowIndex == table.rows.length-1) ...{
   alert("已经是最后一行了");
   return false;
   }
   else ...{
   table.moveRow(tr.rowIndex,tr.rowIndex+1);
   this.isOdd = true;
   var rows = table.tBodies[0].rows;
  
   // 重新隔行换色
   for (var i=1;i<rows.length;i++) ...{
   if (!this.isOdd) ...{
   css.addClassToElement(rows[i], 'odd');
   } else ...{
   css.removeClassFromElement(rows[i], 'odd');
   }
   this.isOdd = !this.isOdd;
   }
   }
  
   // 实现AJAX调用处理下移
   // 下移则把pars和pars2的值反过来,后台不变
   var pars = "pars2=";
   for(h=0;h<tr.cells.length;h++) ...{
   if(!css.elementHasClass(tr.cells[h],'editbtn')&&!css.elementHasClass(tr.cells[h],'delbtn')
   &&!css.elementHasClass(tr.cells[h],'updownbtn')) ...{
   var colid = tr.cells[h].getAttribute('columnId');
   if(tr.cells[h].firstChild.value!=null) ...{
   pars += h +"^"+ tr.cells[h].firstChild.value +"|";
   }
   else ...{
   pars += h +"^"+ tr.cells[h].innerText +"|";
   }
   }
   }
   var pars2 = "&pars=";
   var uprow = table.rows[tr.rowIndex-1];
   for(y=0;y<uprow.cells.length;y++) ...{
   if(!css.elementHasClass(uprow.cells[y],'editbtn')&&!css.elementHasClass(uprow.cells[y],'delbtn')
   &&!css.elementHasClass(uprow.cells[y],'updownbtn')) ...{
   var colid = uprow.cells[y].getAttribute('columnId');
   if(uprow.cells[y].firstChild.value!=null) ...{
   pars2 += y +"^"+ uprow.cells[y].firstChild.value +"|";
   }
   else ...{
   pars2 += y +"^"+ uprow.cells[y].innerText +"|";
   }
   }
   }
   pars3 = "&command=MoveUpDown&callback=afterUpdate&table="+table.id;
   new Ajax.Updater('result','Dispatcher.ajax?'+pars+pars2+pars3,...{evalScripts: true});
   }
  
  }
  function crudbtnInit() ...{
   crudbtn.init();
  }
  // 回调: 处理结束后的反映
  afterUpdate = function(e) ...{
   if(e == 'true') ...{
  
   }
   else if(e == 'false') ...{
   alert("您的操作失败了,请重新尝试");
   window.location.reload();
   }
   else if(e == 'repeated') ...{
   alert("您写入了重复的信息!请重新输入");
   window.location.reload();
   }
  
  }
  addEvent(window, 'load', crudbtnInit);
  
  后台处理同 AjaxDelRow.cs
  
  排序样式绑定JS:
  
  /**//*
   * Written by Wangzhongyuan
   * 通过绑定sort样式进行后台排序的代码
   */
  var sorting = ...{
  
   that: false,
   isOdd: false,
   sortColumnIndex : -1,
   lastAssignedId : 0,
   newRows: -1,
   lastSortedTable: -1,
  
   /**//**
   * 初始化排序器
   **/
   init : function() ...{
   // 首先, 查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
   if (!document.getElementsByTagName) ...{
   return;
   }
  
   this.that = this;
  
   this.run();
  
   },
  
   /**//**
   * 在文档中遍历所有table,如果table拥有sort样式,则启动排序功能
   **/
   run : function() ...{
   var tables = document.getElementsByTagName("table");
  
   for (var i=0; i < tables.length; i++) ...{
   var thisTable = tables[i];
  
   if (css.elementHasClass(thisTable, 'sort')) ...{
   this.makeSortable(thisTable);
   }
   }
   },
  
   /**//**
   * 启动给定表的排序功能
   **/
   makeSortable : function(table) ...{
  
   // 首先,检测该table是否有ID.如果没有就分配一个给它
   if (!table.id) ...{
   table.id = 'sortableTable'+this.lastAssignedId++;
   }
   // 判断有没有数据
   if(table.rows.length<2)
   return ;
   // 把表格的第一行视为表头,然后下面要把它们变成可点击
   var row = table.tBodies[0].rows[0];
   /**//* 结合后台的hack: 主要用于解析初始化时的排序方向.
   * 由于考虑到适应自定义数据绑定模板,故越过表头,使用第二行
   */
   var row2 = table.tBodies[0].rows[1];
  
   for (var i=0; i < row.cells.length; i++) ...{
  
   // 建立一个链接,并使它拥有能控制排序的onClick事件
   var linkEl = createElement('a');
   linkEl.href = '#';
   linkEl.onclick = this.headingClicked;
   linkEl.setAttribute('columnId', i);
   linkEl.title = '点击排序';
  
   // 获取标题行的所有列,以便加入链接
   var innerEls = row.cells[i].childNodes;
   // 遍历标题行的所有列并加入链接
   for (var j = 0; j < innerEls.length; j++) ...{
   // 如果标题列样式为nosort则不排序
   if(!css.elementHasClass(row.cells[i], 'nosort'))
   linkEl.appendChild(innerEls[j]);
   }
  
   // 把新链接加到表格中
   row.cells[i].appendChild(linkEl);
  
   var spanEl = createElement('span');
   css.addClassToElement(row.cells[i], 'tableSortArrow');
  
   // 加两个空格
   // spanEl.appendChild(document.createTextNode(' '));
   row.cells[i].appendChild(spanEl);
  
   // 为每一列判断从后台传过来的排序方向样式
   if(css.elementHasClass(row2.cells[i], 'sortOrderASC')) ...{
   spanEl.className = 'tableSortArrow';
   spanEl.appendChild(document.createTextNode(' ↑'));
   spanEl.setAttribute('sortOrder', 'ASC');
   }
   else if(css.elementHasClass(row2.cells[i], 'sortOrderDESC'))
   ...{
   spanEl.className = 'tableSortArrow';
   spanEl.appendChild(document.createTextNode(' ↓'));
   spanEl.setAttribute('sortOrder', 'DESC');
   }
  
   }
  
   // 初始化隔行换色标志
   this.isOdd = false;
   var rows = table.tBodies[0].rows;
  
   // 启动隔行换色
   for (var i=0;i<rows.length;i++) ...{
   this.doStripe(rows[i]);
   }
   },