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在服务端运行整个网站逻辑的方 ...
随机推荐
- 9个最新的手机/移动设备jQuery插件
随着互联网的流行,移动网站开始急速增加,在2014年手机网站将会出现很多,所以手机网站是必须要学会制作的.手机网站不像桌面平台一样制作,否则会影响显示效果,目前大部分手机网站使用响应式设计技术,而且也 ...
- sql 语句左连接右连接小例子
A表(a1,b1,c1) B表(a2,b2) a1 b1 c1 a2 b2 01 数学 95 01 张三 02 语文 90 02 李四 03 英语 80 04 王五 select A.*,B.* fr ...
- Python学习6.1_函数参数及参数传递
大多数编程语言都绕不开一个名词,那就是--函数(function).而函数很重要的部分则是参数(arguments)的使用.Python的参数传递总体来说是根据位置,传递对应的参数.阐述如下: 1.位 ...
- 实验二:基于mykernel实现的时间片轮转调度
原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 如果我写的不好或者有误的地方请留言 ...
- python之路——爬虫实例
urlController.py import bsController from urllib import request class SpiderMain(object): def __init ...
- perl 正则详解
用/s 来匹配任意字符 默认情况下,点号(.)无法匹配换行符,这对大多数单行匹配的情况是合适的. . 圆点用于匹配除换行符外的任何单个字符 + 意味着一个或多个相同的字符 .+ 匹配任意单个字符至少一 ...
- BZOJ1524: [POI2006]Pal
1524: [POI2006]Pal Time Limit: 5 Sec Memory Limit: 357 MBSubmit: 308 Solved: 101[Submit][Status] D ...
- jps(JVM Process Status)
功能 列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在类)的名称,以及这些进程的本地虚拟机的唯一ID(LVMID,Local Virtual Machin ...
- 解读sample5
说明 被测试代码文件 sample1.h.sample1.cc和sample3-inl.h 测试代码文件 sample5_unittest.cc 官网上如是描述sample5: Sample #5 i ...
- HDU_1429——胜利大逃亡续,十位二进制状态压缩,状态判重
Problem Description Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)……这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带锁 ...