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

最新推荐文章于 2022-05-25 21:46:46 发布
最新推荐文章于 2022-05-25 21:46:46 发布
阅读量240 收藏
点赞数
文章标签： html页面js遍历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

最新评论

从容徐行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 实现 经典的ListView列表框
03-31
js 实现 经典的ListView列表框! 值得下载看看!资源免费,大家分享!!
利用JDBC读取mysql数据展示在listview
09-16
我们将PDF链接传递给WebView，并加载一个内嵌的PDF.js页面，通过URL参数传递文件链接。 总结来说，本教程涵盖了如何使用JDBC与MySQL进行数据交互，如何使用ListView和SimpleAdapter显示数据，以及如何在Android应用...
listview
微笑的黄捷
07-30 988
列表body     { font-size: 10px }table    { font-size: 12px }-->function InitList(theList, theTable, iEnd, iId, checkIt){var colWidth = (document.body.clientWidth - 200) / iEnd with(theList){View = 3Bord
html原生listview,使用 JS 构建跨平台的原生应用：ListView 组件介绍
weixin_39590453的博客
05-30 349
背景滚动列表几乎是移动开发中用途最广的UI 组件，其重要性不言而喻。由于平台差异性，React Native 中的滚动列表组件 ListView 并没有直接映射为Android 中的 ListView 或 iOS 中的UITableView，而是在ScrollView的基础上使用JS 做了一次封装。这样，滚动体验部分由 Native 负责，而 React 部分则专注于组件何时渲染、如何渲染等...
html listview 实现原理,html实现简单ListViews效果的实例代码
weixin_42333370的博客
05-31 529
html实现简单ListViews效果实现效果：css样式文件listviewTest.cssbody{background: whitesmoke;}#mainContentDiv{position: absolute;width : 70%;height :100%;background: whitesmoke;top: 10%;left: 10%;}.mainDivMainImgDiv{po...
html——搜索结果简单ListView展示页面
知北行的博客
07-18 2957
1、效果： 2、html代码（使用了layui，实际使用时需要修改layui路径）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></
Android 解析本地json数据 listview 显示
01-24
这可以通过遍历数据列表，累加每个条目的金额，并显示在ListView下方的TextView中。在适配器的构造函数或者ListView初始化后执行此操作： ```java int totalAmount = 0; for (YourDataType item : dataList) { ...
listview加载图片
05-15
综上所述，“listview加载图片”涉及到Android的网络编程、JSON解析、ListView适配器设计、图片加载库的使用以及性能优化等多个方面，开发者需要综合运用这些技术，实现流畅、高效的图片显示。在实际项目中，还需要...
Json解析到listView
12-24
在这个场景中，我们使用了Java语言和Android SDK来实现这一功能。下面将详细讲解这个过程涉及的关键知识点。 1. **网络请求**：爱帮公交API提供了一个接口，用于获取城市的公交路线数据。在Android中，我们通常使用...
Android 将json数据的key和value动态加载到listview
10-31
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于前后端数据交互。下面将详细讲解如何实现这个功能。 首先，理解JSON数据结构。JSON由键值对组成，键（key）是字符串，值（value）可以是...
js模拟listview
08-20
javascript写的一个函数，模拟listview，参数传入一个json数组，一个指定listview需不需要编辑功能！
ui-listview:常规用户界面-ListView，项目
05-08
ui-listview Regular UI - ListView, Item ListView（列表视图） 基础示例+API: 进阶案例: Item（列表项） Copyright and License Code released under the MIT license.
ListView 综合使用
dreams_deng的博客
03-09 637
ListView优化 1. convertView 复用 2. ViewHolder 避免每次 findViewById 3. 图片三级缓存 4. 分页加载数据显示 class MyAdapter extends BaseAdapter { //返回集合数据的数量 @Override public int getCount() { Log.e("TAG...
html listview ios,仿IOS效果 带弹簧动画的ListView
weixin_34193397的博客
06-26 182
最近项目打算做一个界面,类似于dayone首页的界面效果,dayone 是一款付费应用,目前只有IOS端。作为一个资深懒惰的程序员，奉行的宗旨是绝对不重复造一个轮子。于是乎，去网上找一大堆开源项目，发现没有找到合适的，然后，只能硬着头皮自己来了。先看看效果：效果图其实写起来也比较简单，就是控制ListView的头部和底部的高度就可以了, 如果用RecycleView实现起来也是一样,只是Recyc...
微信小程序——卡片列表显示listview（带阴影）
wy313622821的博客
04-25 9035
列表显示listview 简介 有时候我们需要显示某个list里面的数据展示给客户，里面包含图片，标题和内容，这时候，我们就需要用到如下的展示效果了： 这里只做功能的展示，想要更好看的需要修改布局和图片文字效果。 代码 . . . . . wxml <block wx:for="{{list}}" wx:key="index"> <!-- 包裹图片+两行文字 id="{{...
html5 商品选取页面,css3和js商城网站商品视图模式切换效果
weixin_34304274的博客
06-04 339
这是一款仿商城产品列表的模式切换的插件，使用了css3和javascript技术制作。HTMLGrid ViewList View Silver beet$19.90Silver beet shallot wakame tomatillo salsify mung bean beetroot groundnut.Add to cart核心javascript部分代码。(fun...
js对视图距离的详解及各种案列
qq_61896295的博客
05-25 314
获取样式 var a = document.querySelector('.parent'); // 获取son 父节点.querySelector('需要选择的子节点'); var b = a.querySelector('.son'); 各种视距的获取 console.log('content+padding:',myp.clientHeight); console.log('content+border+padding:',myp.offsetHeight); console.log('co
ListView简单的实例讲解
shaochen2015821426的博客
05-07 3497
实现简单的文字展现 效果展现： 实现步骤： 1.修改MainActivity中的布局： &amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&amp;gt; &amp;lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
JS递归调用定位ListView应该定位的项
Shado_walker的专栏
03-10 973
继续上篇的定位问题，由于时间原因，上篇的定位不是很准确，下面将准确定位的JS代码共享出来： function getIndexFromLab(lab) { var arr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y
遍历listview
最新发布
09-12
遍历ListView可以使用不同的方法，具体取决于使用的编程语言。在C#中，可以使用foreach语句来遍历ListView。 引用中给出了在C#中使用foreach语句遍历ListView的示例代码。首先，可以通过listView1.Items属性获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值