DataGrid GridView 单页javascript 表头排序
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 表头排序的更多相关文章
- javascript: 带分组数据的Table表头排序
如下图: 要求:点击表头排序时,"分组"及"分组明细"的数据层次关系不变 从网上找了一段常规的table排序,改了改,以满足“分组支持”,贴在这里备份 < ...
- Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
- 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router
开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...
- 【读书笔记《Bootstrap 实战》】6.单页营销网站
我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页(转)
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- 单页Html及Android App供小孩学习常用汉字
为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 该简单应用 有Android APP下载 “学习常用汉字_20150910.apk” 单页Html 示例 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- Nodejs之MEAN栈开发(六)---- 用Angular创建单页应用(上)
在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...
随机推荐
- javascript特殊运算符(in,instanceof,typeof,delete,void,逗号)
in运算符 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...
- kill tomcat process in window
1.通过命令netstat -ano | findstr 8080找到tomcat所占用的process,如下图 2.执行ntsd -c q -p 7944 kill刚刚找到的process,然后 ...
- phpstorm 配置
JetBrains PhpStorm 8注册码一枚 username :cf96PiPYt271u1TC License Key : 97807-12042010 00001GctOKh8f206hl ...
- Python自动化运维之12、面向对象进阶
上一篇<面向对象基础>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公 ...
- poj1159 Palindrome
G - 回文串 Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Descripti ...
- Solr In Action 笔记(2) 之 评分机制(相似性计算)
Solr In Action 笔记(2) 之评分机制(相似性计算) 1 简述 我们对搜索引擎进行查询时候,很少会有人进行翻页操作.这就要求我们对索引的内容提取具有高度的匹配性,这就搜索引擎文档的相似性 ...
- 转:Node.js邮件发送组件- Nodemailer 1.0发布
原文来自于http://www.infoq.com/cn/news/2014/07/node.js-nodemailer1.0-publish Nodemailer是一个简单易用的Node.js邮件发 ...
- Java ClassLoader基础及加载不同依赖 Jar 中的公共类(转)
http://www.iteye.com/topic/1135259 http://www.trinea.cn/android/java-loader-common-class/ http://www ...
- java代码调用rtx发送提醒消息
http://www.cnblogs.com/qstar/archive/2012/02/03/Astar.html 借用一下!好东西
- POJ 1287 Networking
题目链接: poj.org/problem?id=1287 题目大意: 你被分派到去设计一个区域的连接点,给出你每个点对之间的路线,你需要算出连接所有点路线的总长度. 题目输入: 一个数字n 代表有 ...