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在服务端运行整个网站逻辑的方 ...
随机推荐
- Windows环境下 配置memcached (php)
memcached就不用介绍了-- 1:在Windows下安装memcached服务端软件,已经下载并上传云盘 ---传送门 记得带钥匙:ykrc 解压缩后里面的安装说明内有安装教程. 2:软件安装 ...
- CodeForces 478B 第六周比赛B题
B - B Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Descriptio ...
- UVa 10020 - Minimal coverage(区间覆盖并贪心)
Given several segments of line (int the X axis) with coordinates [Li, Ri]. You are to choose the min ...
- nginx+tomcat 配置虚拟目录。。
之前nginx作为代理.之前的location写的太绝对了..之前把动态请求全部交给tomcat,然后需要配置虚拟路径的时候,去到tomcat就被404了.得高人指点之后,配置虚拟目录的时候需要重新写 ...
- 转:FIFO的定义与作用
一.先入先出队列(First Input First Output,FIFO)这是一种传统的按序执行方法,先进入的指令先完成并引退,跟着才执行第二条指令. 1.什么是FIFO? FIFO是英文Firs ...
- 【HDOJ】3587 NUDOTA
字符串模拟水题. /* 3587 */ #include <iostream> #include <cstdio> #include <cstring> #incl ...
- POJ1068 Parencodings(模拟)
题目链接. 分析: 水题. #include <iostream> #include <cstdio> #include <cstring> using names ...
- NOIP
最近把历年题刷一下吧... 发现0几年的题不是爆搜就是高精度,恶心死了...直接跳过,做些有意思的... P1129产生数 floyed之后乘法原理统计 P1810导弹拦截 贪心,按距某个点的距离 ...
- 信用卡/借记卡充值p2p平台
第一部分信用卡/借记卡充值 首先信用卡尽量不要用于网贷,因为这样会有风险,对投资人和借款人都不利,况且银行的钱也不是那么好用的,对吧?但是也有很多朋友问我信用卡相关事宜,我在这里专门做个解答,信用卡用 ...
- SQL server 分离数据库与删除数据库的区别
今天,在sql server 中,分离数据库,然后就问了一下,与删除数据库的区别 区别在于(百度一下): 分离后,.mdb和.log文件都在,以后你需要用的时候,还可以用附加数据库的方法加上去,分离数 ...