<style type="text/css"> #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; } </style> <script language="javascript"> 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 < _headers.length; 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 < _headers.length; 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 < _count; 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 < _count; i ++) { var _tableTr = document.createElement('TR'); var _tableTd = document.createElement('TD'); with (_tableTd) { style.height = _height; style.borderBottom = '1px solid menu'; innerHTML = new String('<nobr style="height: ' + eval(_height-1) + ';overflow: hidden;"> </nobr>'); } _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 < headers.length; i ++) { if (headers[i] == separate) { var _bool = true; _bool = _bool && (_movePart < 0); _bool = _bool && (parseInt(headers[i - 1].style.width) < Math.abs(_movePart)); 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 < _table.rows.length; 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 < _itemNum; i ++) { var n = 0; for (j = 0; j < this.items.length - 2; 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 < this.items.length; i++) { if (i % 2 == 0) { var _table = this.items[i].firstChild; for (var j = 0; j < _table.rows.length; 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 < _children.length; 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 < this.items.length - 2; 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 + 'nn'; } } 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', '<a href="update.aspx">编辑</a> <a href="delete.aspx">删除</a>']; _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '<a href="update.aspx">编辑</a> <a href="delete.aspx">删除</a>']; _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '<a href="update.aspx">编辑</a> <a href="delete.aspx">删除</a>']; oListView.addListItem(_items); } attachEvent('onload', initListView); </script> <center> <div id="oContainer"></div> </center>

　　推荐阅读

　　可以支持多中格式的JS键盘

/* * JavaScript Virtual Keyboard (ATM-style numpad variant), version 2.3 * * Copyright (C) 2006-2007 Dmitriy Khudorozhkov * * This software is provided "as-is", without any express or implied w>>>详细阅读

本文标题：javascript实现的listview效果

地址：http://www.17bianji.com/kaifa2/JS/30515.html

 1/2    1