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

ASP.NET
C# Quoted-Printable编码、解码
asp.net Google的translate工具翻译 API
.NET读取所有目录下文件正则匹配文本电子邮件
asp.net 半角全角转化工具
AjaxControlToolKit 显示浏览者本地语言的方法
asp.net HTML文件上传标签
ASP.NET 绑定DataSet中的多个表
ASP.NET 重定向的几种方法小结
Asp.Net 重定向必须要知道的一些资料
ASP.NET 导出到Excel时保留换行的代码
Asp.Net Cache缓存使用代码
document.getElementsByName和document.getElementById 在IE与FF中不同实现
GridView单元格合并
asp.net 大文件上传控件
asp.net 日期函数 某月的第一天和最后一天的日期
asp.net 时间类 一周的周一和周末的日期
C# javaScript函数的相互调用
asp.net membership 密码重设
"虚拟路径"..."映射到另一个应用程序,这是不允许的!
如何传值在2个页面之间 要求不刷新父页面,并且不能用Querystring传值

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


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