滚动排序效果

最新推荐文章于 2022-09-03 14:57:26 发布

yongyonglsy

最新推荐文章于 2022-09-03 14:57:26 发布

阅读量143

点赞数

文章标签： javascript java ViewUI

<%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%>

<%@page

import="com.szjz.model.FileBean,javax.faces.context.FacesContext,javax.servlet.http.HttpSession"%>

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

///tablesort.js

var dom = (document.getElementsByTagName) ? true : false;

var ie5 = (document.getElementsByTagName && document.all) ? true : false;

var arrowUp, arrowDown;

if (ie5 || dom)

initSortTable();

function initSortTable() {

arrowUp =document.createElement("SPAN");

var tn = document.createTextNode("↓");

arrowUp.appendChild(tn);

arrowUp.className = "arrow";

arrowDown = document.createElement("SPAN");

var tn = document.createTextNode("↑");

arrowDown.appendChild(tn);

arrowDown.className = "arrow";

}

function sortTable(tableNode, nCol, bDesc, sType) {

var tBody =tableNode.tBodies[0];

var trs = tBody.rows;

var a = new Array();

for (var i=0; i<trs.length; i++) {

a[i] =trs[i];

}

a.sort(compareByColumn(nCol,bDesc,sType));

for (var i=0; i<a.length; i++) {

tBody.appendChild(a[i]);

}

function CaseInsensitiveString(s) {

return String(s).toUpperCase();

}

function parseDate(s) {

return Date.parse(s.replace(/\-/g, '/'));

}

function toNumber(s) {

return Number(s.replace(/[^0-9\.]/g, ""));

}

function compareByColumn(nCol, bDescending, sType) {

var c = nCol;

var d = bDescending;

var fTypeCast = String;

if (sType == "Number")

fTypeCast = Number;

else if (sType == "Date")

fTypeCast = parseDate;

else if (sType == "CaseInsensitiveString")

fTypeCast = CaseInsensitiveString;

return function (n1, n2) {

if (fTypeCast(getInnerText(n1.cells[c]))< fTypeCast(getInnerText(n2.cells[c])))

return d ? -1 : +1;

if (fTypeCast(getInnerText(n1.cells[c])) >fTypeCast(getInnerText(n2.cells[c])))

return d ? +1 : -1;

return 0;

};

}

function sortColumn(e) {

var tmp, el,tHeadParent;

if (ie5)

tmp = e.srcElement;

else if (dom)

tmp = e.target;

tHeadParent = getParent(tmp, "THEAD");

el = getParent(tmp, "TD");

if (tHeadParent == null)

return;

if (el != null) {

var p =el.parentNode;

var i;

if (el._descending) // catch the null

el._descending= false;

else

el._descending= true;

if (tHeadParent.arrow != null) {

if (tHeadParent.arrow.parentNode!= el) {

tHeadParent.arrow.parentNode._descending= null;

}

tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);

}

if (el._descending)

tHeadParent.arrow = arrowDown.cloneNode(true);

else

tHeadParent.arrow= arrowUp.cloneNode(true);

el.appendChild(tHeadParent.arrow);

// get theindex of the td

for (i=0; i<p.cells.length; i++) {

if (p.cells[i]== el) break;

}

var table =getParent(el, "TABLE");

// can'tfail

sortTable(table,i,el._descending,el.getAttribute("type"));

}

function getInnerText(el) {

if (ie5) return el.innerText; //Not needed but it is faster

var str = "";

for (var i=0; i<el.childNodes.length; i++) {

switch (el.childNodes.item(i).nodeType) {

case 1: //ELEMENT_NODE

str +=getInnerText(el.childNodes.item(i));

break;

case 3: //TEXT_NODE

str +=el.childNodes.item(i).nodeValue;

break;

}

return str;

}

function getParent(el, pTagName) {

if (el == null) return null;

else if (el.nodeType == 1 && el.tagName.toLowerCase() ==pTagName.toLowerCase())

return el;

else

return getParent(el.parentNode, pTagName);

}

</SCRIPT>

<html>

<head>

</head>

<body>

</tr>

</THEAD>

</tr>

</tr>

</table>

</body>

</html>

显示选中条的效果

//用颜色显示一条信息

function change()

{

var oObj = event.srcElement;

if(oObj.tagName.toLowerCase()== "td")

{

var oTr =oObj.parentNode;

for(var i=1; i<document.all.tb1.rows.length; i++)

{

document.all.tb1.rows[i].style.backgroundColor= "";

document.all.tb1.rows[i].tag= false; // tb1为表格的名称

}

oTr.style.backgroundColor = "#6699FF";

oTr.tag= true;

}

</script>

<tr class="yi_hang_9"onClick="change()"> //在每行的Tr中调用

yongyonglsy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动排序效果

&lt;%@ pagelanguage="java"import="java.util.*"contentType="text/html; charset=gb2312"pageEncoding="gb2312"%&gt;&lt;%@page import="com.szjz.model.FileBean,javax.faces.context.FacesContex
复制链接

扫一扫