页面列表点击排序demo1

<html>
<head>
<title></title>
<script>

//记录鼠标状态, 记录鼠标按下, 记录当前列
var curState, curDown, curCol;
var oldPlace, newPlace;

function getTable(item) {
var obj = null;
do {
if (item.tagName=="TABLE") {
obj = item;
break;
}
item = item.offsetParent;
}
while (item != null);
return obj;
}

function calculateOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval(‘item.offset‘ + offsetName);
item = item.offsetParent;
}
while (item != null);
return totalOffset;
}

function moveCol(objCol) {
window.status = window.document.body.scrollLeft;
if (!curDown) {
//curCol = objCol;
//鼠标没有按下
if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth-3) {
//移动到了相应的部位/改变鼠标
curState=true;
window.document.body.style.cursor = "move";
}
else {
curState = false;
window.document.body.style.cursor = "default";
}
curCol = objCol;
}
}

function upBody() {
//鼠标抬起/一切恢复原状态
if (curState) {
//---------------------------调整表格--------------------------
//调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
newPlace = window.event.x + window.document.body.scrollLeft;
if (myDiv.offsetLeft + myLine.offsetLeft > calculateOffset(curCol, "Left") + 20) {
if (curCol.width > oldPlace - newPlace)
curCol.width -= oldPlace - newPlace;
var curTable = getTable(curCol);
if (curTable!=null)
curTable.width -= oldPlace - newPlace;
curCol.innerText = curCol.width;
}
//-------------------------------------------------------------
curState = false;
curDown = false;
myDiv.style.display = "none";
window.document.body.style.cursor = "default";
}
}

function downBody() {
//鼠标按下
if (curState) {
curDown = true;
var curTable = getTable(window.event.srcElement);
if (curTable!=null) {
//---------定位竖线----------
myDiv.style.display = ""; //层可见
myLine.style.height = curTable.offsetHeight;
myLine.style.width = 1;
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
myDiv.style.top = calculateOffset(curTable, "Top") - myLine.offsetTop;
//---------------------------
oldPlace = window.event.x + window.document.body.scrollLeft;
}
}
}

function moveBody() {
//鼠标移动
if (curDown) {
//鼠标按下状态
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
window.document.body.style.cursor = "move";
}
}

function selectBody() {
//鼠标选择文本[不支持动态调整？]
if (curDown) //鼠标按下于调整状态
window.event.returnValue = false;
}

function sort(objCol) {
var txt = objCol.innerHTML;
var sortAsc = false;
if (txt.charAt(txt.length - 1)==‘↓‘)
sortAsc = true;
var objTable = getTable(objCol);
for (var i = 0; i < objTable.rows(0).cells.length; i++) {
txt = objTable.rows(0).cells(i).innerHTML;
if ((txt.charAt(txt.length - 1)==‘↓‘) || (txt.charAt(txt.length - 1)==‘↑‘))
objTable.rows(0).cells(i).innerHTML = txt.substring(0, txt.length - 1);
}
objCol.innerHTML += (sortAsc?"↑":"↓")
sortTable(objCol, sortAsc);
}
function sortTable(objCol, sortAsc) {
if (objCol.tagName == "TD") {
var objTable = getTable(objCol);
var i,j,k;
var intCol = objCol.cellIndex;
var boltmp, tmp;
for (i = 1; i < objTable.rows.length; i++)
for (j = i + 1; j < objTable.rows.length; j++) {
boltmp = (objTable.rows(i).cells(intCol).innerText >= objTable.rows(j).cells(intCol).innerText);
if ((sortAsc && !boltmp) || (!sortAsc && boltmp))
for (k = 0; k < objTable.rows(0).cells.length; k++) {
tmp = objTable.rows(i).cells(k).innerHTML;
objTable.rows(i).cells(k).innerHTML = objTable.rows(j).cells(k).innerHTML;
objTable.rows(j).cells(k).innerHTML = tmp;
}
}
}
}

function setTableBorder(objTable) {
var i,j;
for (i = 0; i < objTable.rows.length; i++)
for (j = 0; j < objTable.rows(i).cells.length; j++) {
if (objTable.rows(i).cells(j).innerHTML == "")
objTable.rows(i).cells(j).innerHTML = "&nbsp;";
objTable.rows(i).cells(j).className = (i==0?"title":(i == (objTable.rows.length-1)?"bottom":"") + (j==0?"left":"") + (j == (objTable.rows(i).cells.length-1)?"right":""));
}
}
</script>
</head>
<body onmousedown="downBody()" onmouseover="moveBody()" onmouseup="upBody()" onselectstart="selectBody()">
<div id="myDiv" style="display:none; height:201px; left:12px; position:absolute; top:50px; width:28px; z-index:1">
<hr id="myLine" width="1" size="200" noshade color="black">
</div>
<table id="myTable" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">01</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">02</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">03</td>
</tr>
<tr>
<td onmousemove="moveCol(this)">04</td>
<td onmousemove="moveCol(this)">09</td>
<td onmousemove="moveCol(this)">10</td>
</tr>
<tr>
<td>05</td>
<td>08</td>
<td>11</td>
</tr>
<tr>
<td>06</td>
<td>07</td>
<td>12</td>
</tr>
</table>
<br>
<br>
<table id="myTable1" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">01</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">02</td>
<td width="100" onclick="sort(this)" onmousemove="moveCol(this)">03</td>
</tr>
<tr>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>07</td>
<td>08</td>
<td>09</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
<script>
setTableBorder(myTable);
setTableBorder(myTable1);
</script>
</body>
</html>

时间： 2024-11-03 21:51:17

页面列表点击排序demo1的相关文章

DataTables页面列点击排序

<!-- DataTables --> <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script> $(document).ready(function() { $('#dtlTable').dataTable({ //设置默认第二列

爬虫之动态HTML处理（Selenium与PhantomJS ）动态页面模拟点击

动态页面模拟点击 #!/usr/bin/env python # -*- coding:utf-8 -*- # python的测试模块 import unittest from selenium import webdriver from bs4 import BeautifulSoup class douyuSelenium(unittest.TestCase): # 初始化方法 def setUp(self): self.driver = webdriver.PhantomJS() #具体的

php点击排序

相信小伙伴们一定遇到过一种效果,就是点击按钮实现这一列的排序包括升序降序等 怎么来实现呢  听司令给你捣鼓捣鼓,就是这个: array_multisort() 函数返回排序数组.您可以输入一个或多个数组.函数先对第一个数组进行排序,接着是其他数组,如果两个或多个值相同,它将对下一个数组进行排序. 举个例子吧 $zl[]=$result[$k]['share_uv'];//这里的$result为你从数据库里面获取出来的某个表中的数据 //根据前面传过来的参数判断是升序还是降序 if($_GET['

ClistCtrl用法及总结（由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识）

1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可. 一下是用法总结: 本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧.当初学习时,查了很多资料,零零碎碎的作了些记录,现在主要是来做个总结,方便以后查阅.主要包括以下十三点内容:基本操作.获取选中行的行号.复选框操作.动态设置选中行的字体颜色.设置选中行的背景颜色.禁止拖动表头.让第一列居中显示.设置行高与字体.虚拟列表技术.点击表头时进行归类.向上与向下移动.动态调

HTML参考手册（1）——HTML 标签列表（功能排序）

按功能顺序列出的 HTML 4.01/XHTML 1.0 标签手册 NN:显示所支持标签的 Netscape 的最早版本. IE:显示所支持标签的 Internet Explorer 的最早版本. DTD:显示在哪一种XHTML 1.0 DTD中,标签是被允许的.S=Strict, T=Transitional, F=Frameset. 基本的标签 描述 NN IE DTD <!DOCTYPE>  定义文档类型.     STF <html> 定义 html 文档. 3.0 3.0

ListView列表拖拽排序

ListView列表拖拽排序可以参考Android源代码下的Music播放列表,他是可以拖拽的,源码在[packages/apps/Music下的TouchInterceptor.java下]. 首先是搭建框架,此处的ListView列表类似于QQ消息列表,当然数据只是模拟,为了简单起见,没有把ListView的条目的所有的属性全部写上.首先是消息的实体类Msg.java: package me.chenfuduo.mymsgdrag; public class Msg { private in

微信小程序实现给循环列表点击添加类（单项和多项）

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 1 <view> 2 <view class='appointent-date'> 3 <view class="appointent-d

解决Ext4.2.3中propertyGrid修改后点击排序报错

Ext4.2.3中PropertyGrid修改后点击排序报错,具体错误信息如下: 一开始还怀疑是自己哪里配置错了,各种尝试结果还是一样.查遍百度和谷歌,无果,只有一篇帖子说是4.2.4修正了.还是自己动手吧,自己动手丰衣足食. 点开报错地方(如下图所示),原来是me.field.column没有定义. 然后继续找,找啊找啊找到Ext.grid.property.Grid的getCellEditor方法.此方法有参数column,可在方法体内,column就没有被用到过,于是就感觉问题出在这里.

如果写一个列表点击一张图片来preview这张图片

可以才用继承AlertDialog的形式来写: 点击张图: public void onClick(View v) { viewBigsizeBmp(((ImageView) v).getDrawable(), Constants.PREVIEW_BMP_DIR_SUFFIX); } private void viewBigsizeBmp(Drawable drawable, String suffix) { final String sdDir = Utils.getSDPath(); fin