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;
用.Net实现基于CSS的AJAX开发(6)
80酷酷网 80kuku.com