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

ASP.NET
asp.net Server.MapPath方法注意事项
asp.net下常用的加密算法MD5、SHA-1应用代码
几个 ASP.NET 小技巧
ASP.NET内置对象之Application对象
ASP.NET使用正则表达式屏蔽垃圾信息
asp.net“服务器应用程序不可用” 解决方法
asp.net Linq把数据导出到Excel的代码
asp.net ext treepanel 动态加载XML的实现方法
silverlight2.0Beta版TextBox输入中文解决方法
asp.net转出json格式客户端显示时间
asp.net下Linq To Sql注意事项小结
ASP.NET动态加载用户控件的实现方法
asp.net web大文件上传带进度条实例代码
asp.net DZ论坛中根据IP地址取得所在地的代码
向asp.Net进发 数据库连接操作
.net 上传文件前所未有的简单
asp.net gridview代码绑定
asp.net中List的使用方法
Asp.net(C#)实现验证码功能代码
asp.NET开发中正则表达式中BUG分析

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 232 ::
收藏到网摘: 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]);
   }
   },