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

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【用.Net实现基于CSS的AJAX开发(6)】，下面是详细的分享！

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

  headingClicked: function(e) ...{
  
   var that=sorting.that;
  
   // 被点击的目标链接
   var linkEl=getEventTarget(e);
  
   // 直接获取td, tr, thead 和 table
   var td=linkEl.parentNode;
   var tr=td.parentNode;
   var thead=tr.parentNode;
   var table=thead.parentNode;
  
   // 获得目标链接的columnId属性
   var column=linkEl.getAttribute('columnId') || td.cellIndex;
   // 找出当前列的排序方向
   var arrows=css.getElementsByClass(td, 'tableSortArrow', 'span');
   var previousSortOrder='';
   if (arrows.length > 0) ...{
   previousSortOrder=arrows[0].getAttribute('sortOrder');
   }
  
  
  
   that.lastSortedTable=table.id;
  
   // 将哪一列被排序回馈给用户
  
   // 首先把所有的排序方向复位
   var arrows=css.getElementsByClass(tr, 'tableSortArrow', 'span');
   for (var j=0; j < arrows.length; j++) ...{
   var arrowParent=arrows[j].parentNode;
   arrowParent.removeChild(arrows[j]);
  
  
   if (arrowParent !=td) ...{
   spanEl=createElement('span');
   spanEl.className='tableSortArrow';
   // 加入两个空格
   // spanEl.appendChild(document.createTextNode(' '));
   arrowParent.appendChild(spanEl);
   }
  
  
   }
  
   // 现在,回馈给用户
   var spanEl=createElement('span');
   spanEl.className='tableSortArrow';
   if (null==previousSortOrder || ''==previousSortOrder || 'DESC'==previousSortOrder) ...{
   spanEl.appendChild(document.createTextNode(' ↑'));
   td.setAttribute('sortOrder', 'ASC');
   spanEl.setAttribute('sortOrder', 'ASC');
   } else ...{
   spanEl.appendChild(document.createTextNode(' ↓'));
   td.setAttribute('sortOrder', 'DESC');
   spanEl.setAttribute('sortOrder', 'DESC');
   }
   td.appendChild(spanEl);
  
   // 以下为没有doPostBack的版本,已经取消
  
  
   // 使用__doPostBack进入后台处理
   __doPostBack('Pars',"sortdirect="+td.getAttribute('sortOrder')+"&colid="+td.firstChild.getAttribute('columnId'));
   return false;
   },
  
   doStripe : function(rowItem) ...{
   if (!this.isOdd) ...{
   css.addClassToElement(rowItem, 'odd');
   } else ...{
   css.removeClassFromElement(rowItem, 'odd');
   }
   this.isOdd=!this.isOdd;
   }
  }
  
  function sortInit() ...{
   sorting.init();
  }
  
  addEvent(window, 'load', sortInit)
  
  后台：
  
  
  
  public DataView SortBuilder(object dataobj,DataView dv)
   ...{
   string req=Request.Form["__EVENTARGUMENT"];
   string p_sort=null;
   string p_colid=null;
   if(req!=null)
   ...{
   string[] args=req.Split('&');
   foreach (string arg in args)
   ...{
   string[] hash=arg.Split('=');
   if(hash[0].Equals("sortdirect"))
   ...{
   p_sort=hash[1];
   }
   else if(hash[0].Equals("colid"))
   ...{
   p_colid=hash[1];
   }
   }
   if(p_sort!=null && p_colid!=null && !p_colid.Equals("null"))
   ...{
   SortDirect=p_sort;
   int iColid=Int32.Parse(p_colid);
   if(dataobj is DataGrid)
   ...{
   foreach (DataGridColumn dc in ((DataGrid)dataobj).Columns)
   ...{
   if(((Style)(Style)dc.ItemStyle).CssClass.IndexOf("sortOrder")!=-1)
   ...{
   ((Style)(Style)dc.ItemStyle).CssClass="";
   }
   }
   ((Style)(((DataGrid)dataobj).Columns[iColid].ItemStyle)).CssClass +=" sortOrder" + SortDirect;
   DataGrid grid=(DataGrid)dataobj;
   DataGridColumn dgc=grid.Columns[iColid];
   BoundColumn bc=(BoundColumn)dgc;
   string df=bc.DataField;
   dv.Sort=df + " " + SortDirect;
   }
   if(dataobj is DataList)
   ...{
   DataList dl=(DataList)dataobj;
   ((Style)dl.ItemStyle).CssClass +=" sortOrder" + SortDirect;
   dv.Sort=dl.DataKeyField + " " + SortDirect;
   }
   // 自定义控件,,,可以自己实现一个
   if(dataobj is table)
   ...{
   table tbl=(table)dataobj;
   tbl.DataSource=ViewLogic.Data.DataSourceFactory.Create(dv.Table);
   IList list=(tbl).ColumnList;
   tbl.ColName=list[iColid].ToString();
   tbl.SortDriect=SortDirect;
   dv.Sort=list[iColid] + " " + SortDirect;
   }
   }
   }
  
   return dv;
   }
  
   样式绑定的用法如下
  
  例如，排序样式绑定的用法：
  
   前台: 引用JS,并绑定样式 sort
   后台:
   DataSet ds=获取数据源ds
   DataView dv=ds.Tables[0].DefaultView;
   dv=SortBuilder(控件,dv) ;
   控件.DataSource=newdv;

以上所分享的是关于用.Net实现基于CSS的AJAX开发(6)，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：DIV+CSS 6张图片的布局，用绝对布局怎么实现？

　　答：可以这样做： Image1... #image_holder { position:relative;其他代码｝ .image1 { position:absolute; left:**px; top:**px;} 原理就是用一个大盒子将六张图片包围起来，然后大盒子用相对定位，然后让六个小盒子绝对定位，具体小盒子要放到什么... >>详细

　　相关问题：web前端开发需要精通或者学习什么，是不是html,css...

　　答：前端开发最重要的基础就三门技术 jvascript+css+html，js是其中最重要的 ps可以不掌握，工作的时候一般只需要会切图就行，而且很多公司会让作图的人切好图，你可以不考虑 flash完全不用理会，pc上flash日渐消沉，无线上早就死光光了 我想说的 最... >>详细

　　相关问题：网页编程语言html、Ajax、javascript、jQuery、CSS...

　　答：HTML不是编程语言，是任何可以用于展示的网页必须使用的格式，是文档对象模型（DOM）的基矗 CSS是层叠样式表，用于规定网页元素样式（如字体、颜色、布局、形状、缩放、透明）的规则。 Javascript是脚本语言，可以操作DOM树（如元素的删减、移动... >>详细