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在服务端运行整个网站逻辑的方 ...
随机推荐
- IOS学习:常用第三方库(GDataXMLNode:xml解析库)
IOS学习:常用第三方库(GDataXMLNode:xml解析库) 解析 XML 通常有两种方式,DOM 和 SAX: DOM解析XML时,读入整个XML文档并构建一个驻留内存的树结构(节点树),通过 ...
- 转:在虚拟机中用NAT方式连接网络
1.安装VMware Workstation .在安装过VMware Workstation软件后,会在本地连接中,多了两个虚拟网卡,一个是 VMware Network Adapter for VM ...
- 【HDOJ】1276 士兵队列训练问题
初看这道题目很像尤瑟夫问题, 区别是每次都是从1开始.解法也很类似.数学解递推公式.假定第K次报数后,余下人数不超过3个人.若第K次为1-3报数,那么由这三个数的当前索引n可推上一次报数之前的编号为n ...
- MFC自定义消息
本文地址:http://blog.163.com/strive_only/blog/static/893801682010101911467765/ 消息机制是windows的典型运行机制,在MFC中 ...
- bzoj3575[Hnoi2014]道路堵塞
http://www.lydsy.com/JudgeOnline/problem.php?id=3575 总赶脚第二题总是比第三题难...... 好吧,这题一点思路都没有 听说用民科可以过掉大部分数据 ...
- bzoj3574[Hnoi2014]抄卡组
http://www.lydsy.com/JudgeOnline/problem.php?id=3574 我们发现如果所有的字符串都有*,那么只需要比较他们的“前缀”和“后缀”相同即可.“前缀”指第一 ...
- 话说python
前几年就职于一个大的软件公司时,开发过程中,有一个流程化的步骤要做,就是要由一个excel文档导出生成一堆sql语句.当时使用一个高手写的代码,只不过有限几行代码(应该不到100行),就完美实现此功能 ...
- Java连接MySQL中文乱码处理【转载】
本文转载地址:http://developer.51cto.com/art/200906/130425.htm 感谢相关作者! MySQL默认编码是latin1 mysql> show vari ...
- C#实现数据结构——线性表(上)
什么是线性表 数据结构中最常用也最简单的应该就是线性表,它是一种线性结构(废话,不是线性结构怎么会叫线性表?当然不是废话,古人公孙龙就说白马非马,现代生物学家也说鲸鱼不是鱼). 那什么是线性结构? 按 ...
- 西装定制平台Indochino获$1350万B轮融资 - 国际B2C - 亿邦动力网
西装定制平台Indochino获$1350万B轮融资 - 国际B2C - 亿邦动力网 西装定制平台Indochino获$1350万B轮融资 作者: 韦龑来源: i黑马网2013-03-29 11:05 ...