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

ASP.NET
Visual Studio.Net 内幕(7)
.Net 2.0 原汁原味读取注册表
ASP.NET 2.0中预设的cookie
ASP.NET:一段比较经典的多线程学习代码
ASP.NET2.0服务器控件之自定义状态管理
Asp.net给站点某目录增加Aspnet用户
ASP.NET技巧:请求网址并解析返回的html
在Asp.net用C#建立动态Excel
ASP.NET2.0:页面中链入的CSS、js文件带中文时需注意
ASP.NET技巧:数据岛出到Excel最为简易的方法
第一次用.net2.0 LOGIN登陆控件的困惑和解决方法
在ASP.net中保存/取出图片入/从SQL数据库
ASP.NET技巧:做个DataList可分页的数据源
在.NET中利用委托实现窗体间通信
在.NET2.0中使用自定义事务操作
解决 ASP.NET中目录访问权限的问题
ASP.Net防止刷新自动触发事件的解决方案
白刃之战:PHP vs. ASP.NET(节选)-架构比较
C#中使用SendMessage
提取HTML代码中文字的C#函数

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


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