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

2024-07-10 13:12:47

字体：大中小

来源：转载

供稿：网友

菜鸟学堂：
/**//**
   * 下移按钮
   **/
   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]);
   }
   },

上一篇：用.Net实现基于CSS的AJAX开发(4)

下一篇：用.Net实现基于CSS的AJAX开发(6)