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，一经查实，立即删除！

相关文章

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

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

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

Java命令行界面（第23部分）：Rop

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

Java 9，Jigsaw，JPMS和模块：个人探索

Java 9由于Jigsaw项目而延迟了很多次，您可能会听到很多关于模块，模块化和其他内容的信息，那么，它的全部含义是什么？ 模块化到底是什么，模块化平台是什么意思？ Java平台模块系统（JPMS…
阅读更多...
仪征市第二中学计算机老师,静心倾听花自开 ——仪征市第二中学徐丞老师

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

原标题：静心倾听花自开 ——仪征市第二中学徐丞老师徐丞老师是我校一名优秀的青年教师。自2004年从教以来，他满怀对教育事业的真诚，立足本职，默默耕耘，在平凡中成就着不平凡。在教育教学过程中，徐丞老师始终…
阅读更多...
智慧物业小程序_刷脸支付+电商小程序+智慧酒店营销方案

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

我们这边刷脸支付电商小程序智慧酒店行业解决方案，支付宝微信订房小程序，芝麻信用免押住，数字化经营发券引流，未来酒店:0押金 0房费 退房扣款，不占用资金，用户增长信用分，线上订房小程序&#x…
阅读更多...
# 字符串从右往左查找_字符串匹配（搜索，查找）算法

# 字符串从右往左查找_字符串匹配（搜索，查找）算法

(一)前言所谓的字符串匹配就是在一个长字符串(可称文本T)中找一个短字符串(可称模式P)，看长字符串中是否存在短字符串，若存在则返回出现的第一个位置，若不存在则返回一个标记。字符串搜索算法有很多，比较知名的自然是大名鼎鼎Knut…
阅读更多...
html5按钮样式具有子项目,如何使用HTML5+css3制作出12种常用的按钮开关样式（附完整代码）...

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

现如今前端网页的开发越来越注重设计感，这些设计感更体现在细节处，今天向大家具体介绍一下各式各样的开关按钮是如何使用HTML5css3制作出来的，希望可以帮到大家。使用HTML5css3制作按钮开关的原理根据设计的要求填充各种颜色。按钮开关的形状…
阅读更多...
Java命令行界面（第17部分）：jw-options

Java命令行界面（第17部分）：jw-options

JavaWorld文章处理Java中的命令行参数： Matthias Laux博士关闭的案例介绍了一个基于Java的简单库，用于处理命令行参数 ，在本文中我将其称为jw-options 。 被引用的文章提供了有关为何在构造Options类时做出某些设计决策的背景信息。 本文的“…
阅读更多...
便捷式计算机无线功能按钮,TP-Link TL-MR13U便携式无线路由器Client模式设置

便捷式计算机无线功能按钮,TP-Link TL-MR13U便携式无线路由器Client模式设置

本文介绍了TP-Link TL-MR13U便携式无线路由器，在“客户端模式(Client)”下的设置方法。TL-MR13U工作在“客户端模式(Client)”时，主要作用是用来接收无线WiFi信号，把无线WiFi信号转换为有线网络，实现让台式电脑上网。TP-Link TL-M…
阅读更多...
Java命令行界面（第6部分）：JOpt简单

Java命令行界面（第6部分）：JOpt简单

JOpt Simple的主页将这个基于Java的库称为“用于解析命令行选项的Java库，例如您可能传递给调用javac的Java库，”该Java库试图“使用POSIX getopt（）的命令行选项语法）和GNU getopt_long（） 。” 这…
阅读更多...
计算机c盘哪些东西可以清理,细说电脑c盘哪些文件可以删除

计算机c盘哪些东西可以清理,细说电脑c盘哪些文件可以删除

有些网友反映，自己看C盘里的文件太多了，电脑又太卡，情急之下就把里面的东西删掉了，现在系统都不能用了。为了避免大家再入这个坑，我给大家讲一下哪些是C盘里的无用文件，并且删除后不会影响系统使用C盘是指电…
阅读更多...
软件测试度量计算方法有哪些,软件测试度量（三）

软件测试度量计算方法有哪些,软件测试度量（三）

进度差异趋势6.4.3 范围变化(SC)这个指标指出如何固定测试范围。下面总范围 以前的范围 新范围，如果范围扩大的话总范围 以前的范围 - 新范围，如果范围缩小的话一个发布版本范围变化趋势7、结论度量是评估的重要组成部分以及任何业务改进的基础。是应…
阅读更多...
使用带有OAuth的Spring Security保护资源

使用带有OAuth的Spring Security保护资源

1.简介 在本教程中，我们将研究如何使用Spring Security和OAuth来基于路径模式（ / api / ** ）保护服务器上的管理资源。 我们配置的另一个路径模式（ / oauth / token ）将帮助已配置的授权服务器生成访问令牌。 请注意&a…
阅读更多...
openjpa_OpenJPA：内存泄漏案例研究

openjpa_OpenJPA：内存泄漏案例研究

openjpa本文将提供完整的根本原因分析详细信息以及解决影响Oracle Weblogic Server 10.0生产环境的Java堆内存泄漏（Apache OpenJPA泄漏）的方法。 这篇文章还将演示在管理javax.persistence.EntityManagerFactory生命周期时遵循Java Persistence API最佳实…
阅读更多...
美国凯斯西储大学计算机硕士专业怎么样,在凯斯西储大学读硕士大约需要多少花费？...

美国凯斯西储大学计算机硕士专业怎么样,在凯斯西储大学读硕士大约需要多少花费？...

凯斯西储大学是美国著名大学之一，始建于1826年，坐落于俄亥俄州的克里夫兰，是一所以独立研究闻名的世界顶级私立大学，美国一级国家级大学。美国作为当今世界留学费用最高的国家之一，费用问题是所有赴美留学的学生都非常…
阅读更多...
win7如何修改dns服务器地址,Win7系统DNS怎么设置？Win7系统DNS设置方法

win7如何修改dns服务器地址,Win7系统DNS怎么设置？Win7系统DNS设置方法

Win7系统DNS怎么设置?众所周知，DNS地址是一个域名服务器地址，它可以把用户的网站地址解析成IP地址。如果这个服务器出现问题，可能就上不了网了。我们在使用Win7系统的时候，就是因为域名解析服务器不能将要访问的域名解析为正确的…
阅读更多...
密钥文件登录服务器,密钥文件登录云服务器

密钥文件登录服务器,密钥文件登录云服务器

密钥文件登录云服务器 内容精选换一换远程桌面协议(Remote Desktop Protocol，RDP)，是微软提供的多通道的远程登录协议。本节为您介绍如何使用RDP文件远程登录Windows弹性云服务器。从管理控制台下载的RDP文件对应唯一的云服务器，当前RDP文件命…
阅读更多...
一个网站服务器有多少个ip,一个服务器可以有多少个ip地址

一个网站服务器有多少个ip,一个服务器可以有多少个ip地址

一个服务器可以有多少个ip地址 内容精选换一换华为云帮助中心，为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档，帮助您快速上手使用华为云服务。会话保持，指负载均衡器可以识别客户与服…
阅读更多...
jbpm小项目测试_尝试使用jBPM Console NG（测试版）

jbpm小项目测试_尝试使用jBPM Console NG（测试版）

jbpm小项目测试大家好！ 这是有关jBPM Console NG的另一篇文章。 经过6个月的辛苦工作，我很高兴为开发人员社区撰写这篇文章，以进行尝试。 在这篇文章中，我将解释如何从源代码构建应用程序。 这背后的主要思想是知道如何在测试过程…
阅读更多...
用友数据库服务器如何修改,用友u8数据库服务器怎么设置

用友数据库服务器如何修改,用友u8数据库服务器怎么设置

用友u8数据库服务器怎么设置 内容精选换一换本章介绍如何在管理控制台购买GaussDB(for openGauss)实例，并通过内网使用弹性云服务器连接GaussDB(for openGauss)实例。GaussDB(for openGauss)提供gsql工具帮助您在命令行下连接数据库，您需要提前创建一台弹…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023