html页面js遍历listview,javascript实现的listview效果

javascript实现的listview效果

更新时间:2007年04月28日 00:00:00   作者:

#oContainer {

width: 600px;

height: 500px;

border: 1px solid menu;

margin: 0px;

padding: 0px;

overflow: hidden;

}

a {

color: black;

text-decoration: none;

}

a:hover {

color: red;

text-decoration: underline;

}

var oListView = new Object();

function listView(_container) {

this.author = '51JS.COM-ZMM';

this.version = 'ListView 1.0';

this.container = _container;

this.box = new Object();

this.headerWidth = 0;

this.headerHeight = 20;

this.itemWidth = 0;

this.itemHeight = 0;

this.rowsCount = 30;

this.isResize = false;

this.separate = new Object();

this.startPoint = 0;

this.endPoint = 0;

this.tempSeparate = new Object();

this.put_headerHeight = function(_height) { return _height; };

this.get_headerHeight = function() { return this.headerHeight; };

this.put_rowsCount = function(_count) { return _count; };

this.get_rowsCount = function() { return this.rowsCount; };

}

listView.prototype = {

boxInit : function() {

this.container.innerHTML = new String();

this.box = (function(_object) {

var _box = document.createElement('DIV');

with (_box) {

id = 'ListViewBox';

style.width = _object.offsetWidth;

style.height = _object.offsetHeight;

style.margin = '0px';

style.padding = '0px';

attachEvent('oncontextmenu', new Function('return false;'));

}

return _box;

})(this.container);

this.headerPanel = (function(_width, _height) {

var _headerPanel = document.createElement('DIV');

with (_headerPanel) {

style.width = _width;

style.height = _height;

}

return _headerPanel;

})(this.box.style.width, this.headerHeight);

this.headerPanel.appendChild(this.textPanel = (function() {

var  _textPanel = document.createElement('NOBR');

_textPanel.attachEvent('onmousemove', function() {

with (oListView) {

if (event.button == 1) {

textPanel.style.cursor = 'E-resize';

tempSeparate.style.left = event.clientX - getPosition(box).left;

tempSeparate.style.display = 'inline';

endPoint = event.clientX;

isResize = true;

}

}

});

return _textPanel;

})());

this.rowItemPanel = (function(_width, _height) {

var _itemPanel = document.createElement('DIV');

with (_itemPanel) {

style.width = _width;

style.height = _height;

style.overflow = 'hidden';

}

return _itemPanel;

})(this.box.style.width, parseInt(this.box.style.height) - this.headerHeight);

this.rowItemPanel.appendChild(this.dataPanel = (function() {

var  _dataPanel = document.createElement('NOBR');

with (_dataPanel) {

style.cursor = 'default';

attachEvent('onclick', function() {

document.selection.empty();

});

attachEvent('onselectstart', function() {

document.selection.empty();

});

}

return _dataPanel;

})());

this.dataPanel.appendChild(this.tempSeparate = (function(_height) {

var _tempSeparate = document.createElement('SPAN');

with (_tempSeparate) {

style.width = '1px';

style.height = _height;

style.border = '0px';

style.backgroundColor = 'black';

style.position = 'absolute';

style.display = 'none';

}

return _tempSeparate;

})(this.rowItemPanel.style.height));

this.box.appendChild(this.headerPanel);

this.box.appendChild(this.rowItemPanel);

this.container.appendChild(this.box);

},

drawListView : function(_headers, _aligns) {

this.boxInit();

this.drawHeader(_headers);

this.drawRowItem(_headers, _aligns);

document.attachEvent('onmouseup', this.finishResize);

},

drawHeader : function(_headers) {

this.headers = [];

this.headerWidth = Math.round((parseInt(this.headerPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1;

for (var i = 0; i 

var _header = document.createElement('SPAN');

with (_header) {

style.width = this.headerWidth;

style.height = this.headerHeight;

style.overflow = 'hidden';

style.backgroundColor = 'buttonface';

style.borderLeft = '1px solid buttonhighlight';

style.borderTop = '1px solid buttonhighlight';

style.borderRight = '1px solid buttonshadow';

style.borderBottom = '1px solid buttonshadow';

style.textAlign = 'center';

style.fontSize = '12px';

style.fontFamily = 'Sans-Serif, Tahoma';

style.paddingTop = '1px';

innerText = _headers[i];

}

this.textPanel.appendChild(_header);

this.headers[this.headers.length] = _header;

var _separate = this.getSeparate(true);

this.textPanel.appendChild(_separate);

this.headers[this.headers.length] = _separate;

}

var _last = document.createElement('SPAN');

with (_last) {

style.width = this.headerPanel.offsetWidth;

style.height = this.headerHeight;

style.overflow = 'hidden';

style.backgroundColor = 'buttonface';

style.borderLeft = '1px solid buttonhighlight';

style.borderTop = '1px solid buttonhighlight';

style.borderRight = '1px solid buttonshadow';

style.borderBottom = '1px solid buttonshadow';

style.textAlign = 'center';

style.fontSize = '12px';

style.fontFamily = 'Sans-Serif, Tahoma';

style.paddingTop = '1px';

innerText = new String();

}

this.textPanel.appendChild(_last);

this.headers[this.headers.length] = _last;

},

drawRowItem : function(_headers, _aligns) {

this.items = [];

this.itemWidth = Math.round((parseInt(this.rowItemPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1;

this.itemHeight = parseInt(this.rowItemPanel.style.height) - 2;

for (var i = 0; i 

var _item = document.createElement('SPAN');

with (_item) {

style.width = this.itemWidth;

style.height = this.itemHeight;

style.overflow = 'hidden';

style.padding = '0px';

appendChild((function(_count, _width, _height, _align) {

var _table = document.createElement('TABLE');

with (_table) {

cellSpacing = 0;

cellPadding = 0;

style.width = _width;

style.tableLayout = 'fixed';

}

var _tbody = document.createElement('TBODY');

for (var i = 0; i 

var _tableTr = document.createElement('TR');

var _tableTd = document.createElement('TD');

with (_tableTd) {

align = _align;

style.height = _height;

style.borderBottom = '1px solid #c6c3c6';

style.fontSize = '12px';

style.paddingLeft = '3px';

setAttribute('onclick', function() {

oListView.selectedRow(this.parentNode.rowIndex);

});

setAttribute('ondblclick', function() {

oListView.showSelected(this.parentNode.rowIndex);

});

innerHTML = new String(' ');

}

_tableTr.appendChild(_tableTd);

_tbody.appendChild(_tableTr);

}

_table.appendChild(_tbody);

return _table;

})(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount), _aligns[i]));

}

this.dataPanel.appendChild(_item);

this.items[this.items.length] = _item;

var _separate = this.getSeparate(false);

_separate.style.height = this.itemHeight;

this.dataPanel.appendChild(_separate);

this.items[this.items.length] = _separate;

}

var _last = document.createElement('SPAN');

with (_last) {

style.width = this.rowItemPanel.offsetWidth;

style.height = this.itemHeight;

style.overflow = 'hidden';

style.padding = '0px';

appendChild((function(_count, _width, _height) {

var _table = document.createElement('TABLE');

with (_table) {

cellSpacing = 0;

cellPadding = 0;

style.width = '100%';

}

var _tbody = document.createElement('TBODY');

for (var i = 0; i 

var _tableTr = document.createElement('TR');

var _tableTd = document.createElement('TD');

with (_tableTd) {

style.height = _height;

style.borderBottom = '1px solid menu';

innerHTML = new String(' ');

}

_tableTr.appendChild(_tableTd);

_tbody.appendChild(_tableTr);

}

_table.appendChild(_tbody);

return _table;

})(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount)));

}

this.dataPanel.appendChild(_last);

this.items[this.items.length] = _last;

},

getSeparate : function(_resize) {

var _separate = document.createElement('SPAN');

with (_separate) {

style.width = _resize ? '2px' : '1px' ;

style.height = this.headerHeight;

style.border = '1px ' + (_resize ? 'inset white' : 'solid #c6c3c6');

style.overflow = 'hidden';

style.position = 'absolute';

if (_resize) {

attachEvent('onmousedown', function() {

with (oListView) {

separate = event.srcElement;

startPoint = event.clientX;

}

});

attachEvent('onmouseenter', function() {

event.srcElement.style.cursor = 'E-resize';

});

}

}

return _separate;

},

getPosition : function(_object) {

var _top = _left = 0;

var _root = document.body;

while (_object != _root) {

_left += _object.offsetLeft;

_object = _object.offsetParent;

}

return { left: _left };

},

resizeItem : function() {

with (this) {

var _width, _movePart = endPoint - startPoint;

for (var i = 0; i 

if (headers[i] == separate) {

var _bool = true;

_bool = _bool && (_movePart 

_bool = _bool && (parseInt(headers[i - 1].style.width) 

if (_bool) {

headers[i - 1].style.width = 0;

items[i - 1].style.width = 0;

} else {

_width = parseInt(headers[i - 1].style.width);

headers[i - 1].style.width = _width + _movePart;

_width = parseInt(items[i - 1].style.width);

items[i - 1].style.width = _width + _movePart;

_width = parseInt(items[i - 1].firstChild.style.width);

items[i - 1].firstChild.style.width = _width + _movePart;

var _table = items[i - 1].firstChild;

for (var j = 0; j 

var _dataPanel = _table.rows[j].cells[0].children[0];

if (typeof _dataPanel != 'undefined') {

_width = parseInt(_dataPanel.style.width);

_dataPanel.style.width = _width + _movePart;

}

}

}

}

}

}

},

finishResize : function() {

with (oListView) {

if (isResize) {

isResize = false;

textPanel.style.cursor = 'default';

tempSeparate.style.display = 'none';

resizeItem();

}

}

},

addListItem : function(_datas) {

var _itemNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length ;

for (var i = 0; i 

var n = 0;

for (j = 0; j 

if (j % 2 == 0) {

var _dataPanel = document.createElement('NOBR');

var _tableCell = this.items[j].firstChild.rows[i].cells[0];

with (_dataPanel) {

style.width = this.itemWidth;

style.overflow = 'hidden';

style.textOverflow = 'ellipsis';

innerHTML = _datas[i][n];

}

_tableCell.innerHTML = new String();

_tableCell.appendChild(_dataPanel);

_tableCell.title = _datas[i][0];

n ++;

}

}

}

},

selectedRow : function(n) {

for (var i = 0; i 

if (i % 2 == 0) {

var _table = this.items[i].firstChild;

for (var j = 0; j 

var _dataPanel = _table.rows[j].cells[0].children[0];

if (typeof _dataPanel != 'undefined') {

if (j == n) {

_table.rows[j].cells[0].style.color = 'highlighttext';

_table.rows[j].cells[0].style.backgroundColor = 'highlight';

} else {

_table.rows[j].cells[0].style.color = '';

_table.rows[j].cells[0].style.backgroundColor = '';

}

var _children = _table.rows[j].cells[0].firstChild.children;

this.changeChild(_children, j == n);

}

}

}

}

},

changeChild : function(_children, _isSelected) {

if (typeof _children != 'undefined') {

for (var i = 0; i 

if (_isSelected) {

_children[i].style.color = 'highlighttext';

_children[i].style.backgroundColor = 'highlight';

} else {

_children[i].style.color = '';

_children[i].style.backgroundColor = '';

}

}

} else {

return false;

}

},

showSelected : function(n) {

var _text = new String();

for (var i = 0; i 

if (i % 2 == 0) {

var _table = this.items[i].firstChild;

_text += this.headers[i].innerText + ':\n';

_text += _table.rows[n].cells[0].firstChild.innerHTML + '\n\n';

}

}

alert(_text);

}

}

function initListView() {

var _headers = [];

_headers[_headers.length] = '标题';

_headers[_headers.length] = '内容';

_headers[_headers.length] = '时间';

_headers[_headers.length] = '管理';

var _aligns = [];

_aligns[_aligns.length] = 'left';

_aligns[_aligns.length] = 'left';

_aligns[_aligns.length] = 'center';

_aligns[_aligns.length] = 'center';

oListView = new listView(self.oContainer);

oListView.drawListView(_headers, _aligns);

var _items = [];

_items[_items.length] = ['标题一', '内容一', '2006-6-21 10:30:00', '编辑  删除'];

_items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '编辑  删除'];

_items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '编辑  删除'];

oListView.addListItem(_items);

}

attachEvent('onload', initListView);

相关文章

1a1b05c64693fbf380aa1344a7812747.png

下面小编就为大家带来一篇一个简单的JavaScript Map实例(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-08-08

4f55910a645b073bc4fc65dc10dc14bd.png

这篇文章主要介绍了js函数和this用法,结合实例形式分析了js函数和this基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下2020-03-03

0ea3c7666119d5615e582f823fb3fad6.png

下面小编就为大家带来一篇JavaScript对Json的增删改属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-06

4f96a78db829b1556ff16de21e013c7a.png

这篇文章主要介绍了JS基于cookie实现来宾统计记录访客信息的方法,通过javascript记录访客信息到cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08

8cc1031babc6aff2319f1c6af8544aa0.png

动态添加表单元素,并调用bootstrapValidator的方法为表单添加校验规则,调用addField()方法实现功能。下面通过本文看下具体实现方法吧2016-09-09

0c932a99bb7b6f23c937db507070cc7b.png

这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下2015-12-12

cca732bf65a93ed2ec0ac80c638460fe.png

date格式化想必大家并不陌生吧,本文就来看看javascript中是如何实现的,感兴趣的朋友可以参考下2013-09-09

2d9f31f2af7b675a3d153d2b7f1035a7.png

这篇文章主要介绍了js获取日期,可以获取前天、昨天、今天、明天、后天,需要的朋友可以参考下2014-06-06

b452cee8ec5cd9e58ab98eba17281e59.png

这篇文章主要介绍了js面向对象实现canvas制作彩虹球喷枪效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-09-09

f4838ec7e2d4da28e0b57d4e852dadd4.png

这篇文章主要介绍了微信小程序使用 vant Dialog组件的正确方式,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02

最新评论

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华南x79主板u盘装系统教程_华南x99主板装win7系统及BIOS设置教程

[文章导读]最近有小伙伴问我华南x99主板能装win7吗?华南x99主板可以安装win7,但安装win7过程中有很多问题,要采用win7新机型安装,且要在BIOS中关闭“安全启动”和开启"兼容模式"选择,如果是NVME接口的固态硬…

html按钮返回上一步操作,用js实现返回上一步操作

按钮式:onClick"location.hrefhttp://www.ddhbb.com/">链接式:href"javascript:history.go(-1)">返回上一步href"">返回上一步直接跳转式:开新窗口:onClick"window.open(http://www.…

Apache Ignite本机持久性,简要概述

通过将数据的工作集放入系统内存中,内存中方法可以达到极高的速度。 当所有数据都保存在内存中后,处理使用传统旋转磁盘引起的问题的需求就消失了。 例如,这意味着无需维护数据的其他缓存副本并管理它们之间的同步。 但是这种方法还有一个缺点…

cheetah的中文_cheetah是什么意思_cheetah的翻译_音标_读音_用法_例句_爱词霸在线词典...

全部非洲猎豹One economist talks hopefully of the " cheetah generation " taking over from the " hippos ".有一位经济学者满怀希望地讲道,肯尼亚的年轻人是征服了 “ 河马一族 ” 的 “ 猎豹一代 ”.期刊摘选The fastest animal on land is the cheet…

计算机减法英语,英语加减乘除的表达

1. 加: “一加二等于三”可以这样表达One plus two is three.One plus two makes three.One plus two equals three.One and two are three.One and two make three.One and two equal three.2. 减: “八减四等于四” 可以这样表达Eight minus four is four.Eight minus four m…

Java命令行界面(第23部分):Rop

Rop库在其主页上被描述为“用Java编写的轻量级命令行选项解析器”。 Rop的“简介”还指出:“ Rop的设计目的是最小化同时方便,并涵盖了大多数常见的命令行解析用例。” 这篇文章是本系列中第23篇有关解析Java命令行参数的文章 ,重点是Rop。 …

80端口请求太多超时 php_apmserver 80端口老是被占用问题解决

apmserver 80端口老是被占用问题解决1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.这里主要是用到windows下的DOS工具,点击”开始”–“运行”,输入”cmd”后点击确定按钮,进入DOS窗口,接下来分别运行以下命令:>netstat -aon | findstr “80”Proto…

计算机网络计技术段标 实训,计算机网络技术实训报告精选.pdf

计算机网络技术实训报告精选《计算机网络技术》实训报告专 业 计算机应用技术专 业 计算机应用技术专专 业业 计计算算机机应应用用技技术术系 别 电子信息工程系系 别 电子信息工程系系系 别别 电电子子信信息息工工程程系系课 程 计算机网络技术课 程 计算机网络技术课课 程程…

mysql 定义年龄属性_sql中定义年龄用什么数据类型,长度为多少?

展开全部sql中定义年龄可以用的用数据类型及长度:1、char(3) :长度为3的字符串。小于10位且62616964757a686964616fe59b9ee7ad9431333431373865长度基本固定的字符串用char。2、varchar(3):长度为3的字符串。长度大于10的用varchar&#xff0…

Java 9,Jigsaw,JPMS和模块:个人探索

Java 9由于Jigsaw项目而延迟了很多次,您可能会听到很多关于模块,模块化和其他内容的信息,那么,它的全部含义是什么? 模块化到底是什么,模块化平台是什么意思? Java平台模块系统(JPMS…

仪征市第二中学计算机老师,静心倾听花自开 ——仪征市第二中学徐丞老师

原标题:静心倾听花自开 ——仪征市第二中学徐丞老师徐丞老师是我校一名优秀的青年教师。自2004年从教以来,他满怀对教育事业的真诚,立足本职,默默耕耘,在平凡中成就着不平凡。在教育教学过程中,徐丞老师始终…

eplise怎么连接数据库_Eclipse连接MySQL数据库(傻瓜篇)

我的环境:MySQL:mysql-essential-5.1.51-win32Eclipse:任意版本,免费的,可以百度的到。下面来创建一个数据:mysql>CREATE DATABASE test; //创建一个数据库mysql>use test; //指定test为当前要操作的…

清空计算机网络缓存,【缓存清理工具】缓存清理软件_电脑缓存清理软件【最新】-太平洋电脑网...

Windows7系统清理dns缓存失败解决方法介绍在win7纯净版系统中有时候,发现网络突然变得很慢,甚至没有网络,怎么回事呢?可能是dns缓存导致的,这时候可以清理dns缓存尝试解决问题。但是有朋友在win7系统清理dns缓存失败&a…

智慧物业小程序_刷脸支付+电商小程序+智慧酒店营销方案

我们这边刷脸支付电商小程序智慧酒店行业解决方案,支付宝微信订房小程序,芝麻信用免押住,数字化经营发券引流,未来酒店:0押金 0房费 退房扣款,不占用资金,用户增长信用分,线上订房小程序&#x…

计算机学院肖鹏,肖鹏-生命科学与技术学院

[1] Xiao Peng, Vadakkepat Prahlad, Lee Tong Heng, “Context-dependent DNA coding with redundancy and introns.,” IEEE transactions on systems, man, and cybernetics. Part B, Cybernetics : a publication of the IEEE Systems, Man, and Cybernetics Society, vol.…

eclipselink_EclipseLink JPA-RS简介

eclipselink在以前的系列文章中,我介绍了如何创建一个将JPA用于持久层的JAX-RS服务。 EclipseLink包含一个名为JPA-RS的组件,该组件可用于轻松自动地将持久性单元公开为RESTful服务(支持XML和JSON消息)。 MOXy为JPA-RS提供XML和JS…

# 字符串从右往左查找_字符串匹配(搜索,查找)算法

(一)前言所谓的字符串匹配就是在一个长字符串(可称文本T)中找一个短字符串(可称模式P),看长字符串中是否存在短字符串,若存在则返回出现的第一个位置,若不存在则返回一个标记。字符串搜索算法有很多,比较知名的自然是大名鼎鼎Knut…

html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式(附完整代码)...

现如今前端网页的开发越来越注重设计感,这些设计感更体现在细节处,今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5css3制作出来的,希望可以帮到大家。使用HTML5css3制作按钮开关的原理根据设计的要求填充各种颜色。按钮开关的形状…

Java命令行界面(第17部分):jw-options

JavaWorld文章处理Java中的命令行参数: Matthias Laux博士关闭的案例介绍了一个基于Java的简单库,用于处理命令行参数 ,在本文中我将其称为jw-options 。 被引用的文章提供了有关为何在构造Options类时做出某些设计决策的背景信息。 本文的“…

计算机网络第三章知识网络,计算机基础教案第三章计算机网络基础知识教案

计算机 基础 教案一、网络基础知识1、计算机网络的概念计算机网络是指将分布在不同地理位置的具有独立功能的多台计算机用通信设备连接起来,并配以相应的网络软件,以实现信息传递和资源共享。计算机网络的三个主要组成部分:(1)主机(2)通信网络…