JS代码如下:

 <script>
var curObj;
var shell = 1;
function sortTable(L) {
var start=new Date()
var i;
var DataGrid1 = document.getElementByIdx_x_x("DataGrid1");
var theRows=new Array();
for (i = 1; i < DataGrid1.rows.length-1; i++) {
var str = "";
var tds = DataGrid1.rows[i].getElementsByTagName_r("td");
var cloum = tds[L].innerText;
if (L == 7 || L == 8 || L == 9) {
cloum = tds[L].innerHTML;
}
var html = DataGrid1.rows[i].outerHTML;
DataGrid1.rows[i].outerHTML);
theRows[i - 1] = new Array(cloum,html);
}
if (shell==1){
shell=2;
//根据不同类型的列选择不同的排序方式,据实际情况定
switch(parseInt(L)){
case 5:
theRows.sort(sortRows);
break;
case 4,3:
theRows.sort(sortRows1);
break;
default:
theRows.sort(sortRows2);
}
}
else{
shell=1;
switch(parseInt(L)){
case 5:
theRows.sort(sortRows0);
break;
case 4,3:
theRows.sort(sortRows11);
break;
default:
theRows.sort(sortRows22);
}
}
var str=''
for(i=0;i<theRows.length;i++) {
str+=theRows[i][1];
}
DataGrid1.outerHTML = '<table border="0" cellPadding="-1" cellSpacing="0" BorderColor="White" width="100%" bordercolor="#ffffff" name="DataGrid1" id="DataGrid1">' + DataGrid1.rows[0].outerHTML + str + '</table>'
curObj=null; return ;
}
//降序-------------------
//数值类型的列进行排序
function sortRows(x,y) {
if(x[0]>y[0]) return -1;
else if(x[0]<y[0]) return 1;
else return 0;
}
//金额类型的列进行排序
function sortRows1(x, y) {
var aa = x[0].replace("¥", "").replace(",", "");
var bb = y[0].replace("¥", "").replace(",", "");
if(parseInt(aa)>parseInt(bb)) return -1;
else if(parseInt(aa)<parseInt(bb)) return 1;
else return 0;
}
//处理字符串列的排序
function sortRows2(x,y) {
return y[0].localeCompare(x[0]);
}
//end 降序---------------------
//升序------------------ -
//数值类型的列进行排序
function sortRows0(x,y) {
if(x[0]<y[0]) return -1;
else if(x[0]>y[0]) return 1;
else return 0;
}
//金额类型的列进行排序
function sortRows11(x, y) {
var aa = x[0].replace("¥", "").replace(",", "");
var bb = y[0].replace("¥", "").replace(",", "");
if(parseInt(aa)<parseInt(bb)) return -1;
else if(parseInt(aa)>parseInt(bb)) return 1;
else return 0;
}
//处理字符串类型的列排序
function sortRows22(x,y) {
return x[0].localeCompare(y[0]);
}
//end 升序---------------------
</script>

后台调用方法:

 private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(1)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(2)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(3)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(4)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(5)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(7)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(8)";
e.Item.Cells[].Attributes["onClick"] = "javascript:sortTable(9)";
}
}

DataGrid GridView 单页javascript 表头排序的更多相关文章

  1. javascript: 带分组数据的Table表头排序

    如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...

  2. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  3. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

  4. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  5. 通过angularjs的directive以及service来实现的列表页加载排序分页

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  6. 通过angularjs的directive以及service来实现的列表页加载排序分页(转)

    前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...

  7. 单页Html及Android App供小孩学习常用汉字

    为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 该简单应用 有Android APP下载 “学习常用汉字_20150910.apk” 单页Html 示例 ...

  8. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  9. Nodejs之MEAN栈开发(六)---- 用Angular创建单页应用(上)

    在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...

随机推荐

  1. 深入Java虚拟机读书笔记第一章Java体系结构介绍

    第1章 Java体系结构介绍 Java技术核心:Java虚拟机 Java:安全(先天防bug的设计.内存).健壮.平台无关.网络无关(底层结构上,对象序列化和RMI为分布式系统中各个部分共享对象提供了 ...

  2. POJ3274 hash

    POJ3274 问题重述: 已知有n头牛,用一个K位二进制数Ak,Ak-1,...,A1表示一头牛具有的特征,Ai=1表示具有特征i.现给定按顺序排列的N头牛的k位特征值,称某个连续范围内“特征平衡” ...

  3. 织梦DedeCms用SQL语句调用数据库任意内容

    dedecms多站点数据利用SQL句段进行互相调用数据方法:2个或者多个DEDE的站怎么互相调用数据,非JS调用,前提是2个或者多个dedecms站点都安装的同一个数据库的不同数据表内,才能实现功能. ...

  4. 正则如何匹配div下的所有<li>标签?

    <?php header('Content-Type:text/html;charset=utf-8'); $str = '<div class="c1s"> & ...

  5. 栈的链式存储方法的C语言实现

    /* 编译器:Dev-c++ 5.4.0 文件名:linkStack.cpp 代码版本号:1.0 时间:2015年10月15日18:56:06 */ #include <stdio.h> ...

  6. HDU 2955(01背包问题)

    M - 01背包 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  7. 尝试跑一跑Scut

    前段时间都在用 IIS+WCF+Redis+MSSQL 的框架做服务器,前段时间看到了 Scut 的开源框架,整个架构还是蛮干净整洁的... 今天抓来跑一跑. 按照教程安装好所有的环境,版本是6.7. ...

  8. poj 2488A Knight's Journey

    #include<cstdio> #include<cstring> #define MAXN 26 using namespace std; ,,-,,-,,-,}; ,-, ...

  9. 【中国剩余定理】POJ 1006 & HDU 1370 Biorhythms

    题目链接: http://poj.org/problem?id=1006 http://acm.hdu.edu.cn/showproblem.php?pid=1370 题目大意: (X+d)%23=a ...

  10. Q - Tour - hdu 3488(最小匹配值)

    题意:一个王国有N个城市,M条路,都是有向的,现在可以去旅游,不过走的路只能是环(至少也需要有两个城市),他们保证这些城市之间的路径都是有环构成的,现在至少需要走多少路. 分析:因为是有向图所以,而且 ...