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

ASP.NET
Asp.net利用JQuery弹出层加载数据代码
asp.net dataview做无限极分类的又一用法
asp.net ckeditor编辑器的使用方法
告别ADO.NET实现应用系统无缝切换的烦恼(总结篇)
asp.net 实现动态显示当前时间(不用javascript不考虑开销)
.net动态显示当前时间(客户端javascript)
asp.net 结合YUI 3.0小示例
asp.net 取消缓存相关问题说明
asp.net 计划任务管理程序实现,多线程任务加载
ASP.NET 跨页面传值方法
asp.net中url地址传送中文参数时的两种解决方案
Asp.net 菜单控件简洁版
asp.net jQuery Ajax用户登录功能的实现
asp.net SharpZipLib的压缩与解压问题
asp.net url重写后页面回传问题
asp.net与Discuz!NT整合集成实例教程
Discuz!NT 3与asp.net 整合的实例教程
测试控制台使用方法
.net 动态标题实现方法
asp.net *.ashx类型的文件使用说明

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


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