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

80酷酷网    80kuku.com

    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的版本,已经取消
   /**//*
   if(td.firstChild.getAttribute('columnId')!=null) {
   window.location = "?sortdirect="+td.getAttribute('sortOrder')+"&colid="+td.firstChild.getAttribute('columnId');
   }
   else {
   window.location = "?sortdirect="+td.getAttribute('sortOrder')+"&colid="+td.getAttribute('columnId');
   }
   */
  
   // 使用__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;

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: