javascript实现的listview效果_javascript技巧

<script> <BR> var oListView = new Object(); <br><br> function listView(_container) { <BR> this.author = '51JS.COM-ZMM'; <BR> this.version = 'ListView 1.0'; <BR> this.container = _container; <BR> this.box = new Object(); <BR> this.headerWidth = 0; <BR> this.headerHeight = 20; <BR> this.itemWidth = 0; <BR> this.itemHeight = 0; <BR> this.rowsCount = 30; <BR> this.isResize = false; <BR> this.separate = new Object(); <BR> this.startPoint = 0; <BR> this.endPoint = 0; <BR> this.tempSeparate = new Object(); <BR> this.put_headerHeight = function(_height) { return _height; }; <BR> this.get_headerHeight = function() { return this.headerHeight; }; <BR> this.put_rowsCount = function(_count) { return _count; }; <BR> this.get_rowsCount = function() { return this.rowsCount; }; <BR> } <br><br> listView.prototype = { <BR> boxInit : function() { <BR> this.container.innerHTML = new String(); <BR> this.box = (function(_object) { <BR> var _box = document.createElement('DIV'); <BR> with (_box) { <BR> id = 'ListViewBox'; <BR> style.width = _object.offsetWidth; <BR> style.height = _object.offsetHeight; <BR> style.margin = '0px'; <BR> style.padding = '0px'; <BR> attachEvent('oncontextmenu', new Function('return false;')); <BR> } <BR> return _box; <BR> })(this.container); <BR> this.headerPanel = (function(_width, _height) { <BR> var _headerPanel = document.createElement('DIV'); <BR> with (_headerPanel) { <BR> style.width = _width; <BR> style.height = _height; <BR> } <BR> return _headerPanel; <BR> })(this.box.style.width, this.headerHeight); <BR> this.headerPanel.appendChild(this.textPanel = (function() { <BR> var _textPanel = document.createElement('NOBR'); <BR> _textPanel.attachEvent('onmousemove', function() { <BR> with (oListView) { <BR> if (event.button == 1) { <BR> textPanel.style.cursor = 'E-resize'; <BR> tempSeparate.style.left = event.clientX - getPosition(box).left; <BR> tempSeparate.style.display = 'inline'; <BR> endPoint = event.clientX; <BR> isResize = true; <BR> } <BR> } <BR> }); <BR> return _textPanel; <BR> })()); <BR> this.rowItemPanel = (function(_width, _height) { <BR> var _itemPanel = document.createElement('DIV'); <BR> with (_itemPanel) { <BR> style.width = _width; <BR> style.height = _height; <BR> style.overflow = 'hidden'; <BR> } <BR> return _itemPanel; <BR> })(this.box.style.width, parseInt(this.box.style.height) - this.headerHeight); <BR> this.rowItemPanel.appendChild(this.dataPanel = (function() { <BR> var _dataPanel = document.createElement('NOBR'); <BR> with (_dataPanel) { <BR> style.cursor = 'default'; <BR> attachEvent('onclick', function() { <BR> document.selection.empty(); <BR> }); <BR> attachEvent('onselectstart', function() { <BR> document.selection.empty(); <BR> }); <BR> } <BR> return _dataPanel; <BR> })()); <BR> this.dataPanel.appendChild(this.tempSeparate = (function(_height) { <BR> var _tempSeparate = document.createElement('SPAN'); <BR> with (_tempSeparate) { <BR> style.width = '1px'; <BR> style.height = _height; <BR> style.border = '0px'; <BR> style.backgroundColor = 'black'; <BR> style.position = 'absolute'; <BR> style.display = 'none'; <BR> } <BR> return _tempSeparate; <BR> })(this.rowItemPanel.style.height)); <BR> this.box.appendChild(this.headerPanel); <BR> this.box.appendChild(this.rowItemPanel); <BR> this.container.appendChild(this.box); <BR> }, <br><br> drawListView : function(_headers, _aligns) { <BR> this.boxInit(); <BR> this.drawHeader(_headers); <BR> this.drawRowItem(_headers, _aligns); <BR> document.attachEvent('onmouseup', this.finishResize); <BR> }, <br><br> drawHeader : function(_headers) { <BR> this.headers = []; <BR> this.headerWidth = Math.round((parseInt(this.headerPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1; <BR> for (var i = 0; i < _headers.length; i ++) { <BR> var _header = document.createElement('SPAN'); <BR> with (_header) { <BR> style.width = this.headerWidth; <BR> style.height = this.headerHeight; <BR> style.overflow = 'hidden'; <BR> style.backgroundColor = 'buttonface'; <BR> style.borderLeft = '1px solid buttonhighlight'; <BR> style.borderTop = '1px solid buttonhighlight'; <BR> style.borderRight = '1px solid buttonshadow'; <BR> style.borderBottom = '1px solid buttonshadow'; <BR> style.textAlign = 'center'; <BR> style.fontSize = '12px'; <BR> style.fontFamily = 'Sans-Serif, Tahoma'; <BR> style.paddingTop = '1px'; <BR> innerText = _headers[i]; <BR> } <BR> this.textPanel.appendChild(_header); <BR> this.headers[this.headers.length] = _header; <BR> var _separate = this.getSeparate(true); <BR> this.textPanel.appendChild(_separate); <BR> this.headers[this.headers.length] = _separate; <BR> } <BR> var _last = document.createElement('SPAN'); <BR> with (_last) { <BR> style.width = this.headerPanel.offsetWidth; <BR> style.height = this.headerHeight; <BR> style.overflow = 'hidden'; <BR> style.backgroundColor = 'buttonface'; <BR> style.borderLeft = '1px solid buttonhighlight'; <BR> style.borderTop = '1px solid buttonhighlight'; <BR> style.borderRight = '1px solid buttonshadow'; <BR> style.borderBottom = '1px solid buttonshadow'; <BR> style.textAlign = 'center'; <BR> style.fontSize = '12px'; <BR> style.fontFamily = 'Sans-Serif, Tahoma'; <BR> style.paddingTop = '1px'; <BR> innerText = new String(); <BR> } <BR> this.textPanel.appendChild(_last); <BR> this.headers[this.headers.length] = _last; <BR> }, <br><br> drawRowItem : function(_headers, _aligns) { <BR> this.items = []; <BR> this.itemWidth = Math.round((parseInt(this.rowItemPanel.style.width) - (_headers.length - 1) * 1) / _headers.length) + 1; <BR> this.itemHeight = parseInt(this.rowItemPanel.style.height) - 2; <BR> for (var i = 0; i < _headers.length; i ++) { <BR> var _item = document.createElement('SPAN'); <BR> with (_item) { <BR> style.width = this.itemWidth; <BR> style.height = this.itemHeight; <BR> style.overflow = 'hidden'; <BR> style.padding = '0px'; <BR> appendChild((function(_count, _width, _height, _align) { <BR> var _table = document.createElement('TABLE'); <BR> with (_table) { <BR> cellSpacing = 0; <BR> cellPadding = 0; <BR> style.width = _width; <BR> style.tableLayout = 'fixed'; <BR> } <BR> var _tbody = document.createElement('TBODY'); <BR> for (var i = 0; i < _count; i ++) { <BR> var _tableTr = document.createElement('TR'); <BR> var _tableTd = document.createElement('TD'); <BR> with (_tableTd) { <BR> align = _align; <BR> style.height = _height; <BR> style.borderBottom = '1px solid #c6c3c6'; <BR> style.fontSize = '12px'; <BR> style.paddingLeft = '3px'; <BR> setAttribute('onclick', function() { <BR> oListView.selectedRow(this.parentNode.rowIndex); <BR> }); <BR> setAttribute('ondblclick', function() { <BR> oListView.showSelected(this.parentNode.rowIndex); <BR> }); <BR> innerHTML = new String(' '); <BR> } <BR> _tableTr.appendChild(_tableTd); <BR> _tbody.appendChild(_tableTr); <BR> } <BR> _table.appendChild(_tbody); <BR> return _table; <BR> })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount), _aligns[i])); <BR> } <BR> this.dataPanel.appendChild(_item); <BR> this.items[this.items.length] = _item; <BR> var _separate = this.getSeparate(false); <BR> _separate.style.height = this.itemHeight; <BR> this.dataPanel.appendChild(_separate); <BR> this.items[this.items.length] = _separate; <BR> } <BR> var _last = document.createElement('SPAN'); <BR> with (_last) { <BR> style.width = this.rowItemPanel.offsetWidth; <BR> style.height = this.itemHeight; <BR> style.overflow = 'hidden'; <BR> style.padding = '0px'; <BR> appendChild((function(_count, _width, _height) { <BR> var _table = document.createElement('TABLE'); <BR> with (_table) { <BR> cellSpacing = 0; <BR> cellPadding = 0; <BR> style.width = '100%'; <BR> } <BR> var _tbody = document.createElement('TBODY'); <BR> for (var i = 0; i < _count; i ++) { <BR> var _tableTr = document.createElement('TR'); <BR> var _tableTd = document.createElement('TD'); <BR> with (_tableTd) { <BR> style.height = _height; <BR> style.borderBottom = '1px solid menu'; <BR> innerHTML = new String('<nobr style="height: ' + eval(_height-1) + ';overflow: hidden;"> '); <BR> } <BR> _tableTr.appendChild(_tableTd); <BR> _tbody.appendChild(_tableTr); <BR> } <BR> _table.appendChild(_tbody); <BR> return _table; <BR> })(this.rowsCount, this.itemWidth, Math.round(this.itemHeight / this.rowsCount))); <BR> } <BR> this.dataPanel.appendChild(_last); <BR> this.items[this.items.length] = _last; <BR> }, <br><br> getSeparate : function(_resize) { <BR> var _separate = document.createElement('SPAN'); <BR> with (_separate) { <BR> style.width = _resize ? '2px' : '1px' ; <BR> style.height = this.headerHeight; <BR> style.border = '1px ' + (_resize ? 'inset white' : 'solid #c6c3c6'); <BR> style.overflow = 'hidden'; <BR> style.position = 'absolute'; <BR> if (_resize) { <BR> attachEvent('onmousedown', function() { <BR> with (oListView) { <BR> separate = event.srcElement; <BR> startPoint = event.clientX; <BR> } <BR> }); <BR> attachEvent('onmouseenter', function() { <BR> event.srcElement.style.cursor = 'E-resize'; <BR> }); <BR> } <BR> } <BR> return _separate; <BR> }, <br><br> getPosition : function(_object) { <BR> var _top = _left = 0; <BR> var _root = document.body; <BR> while (_object != _root) { <BR> _left += _object.offsetLeft; <BR> _object = _object.offsetParent; <BR> } <BR> return { left: _left }; <BR> }, <br><br> resizeItem : function() { <BR> with (this) { <BR> var _width, _movePart = endPoint - startPoint; <BR> for (var i = 0; i < headers.length; i ++) { <BR> if (headers[i] == separate) { <BR> var _bool = true; <BR> _bool = _bool && (_movePart < 0); <BR> _bool = _bool && (parseInt(headers[i - 1].style.width) < Math.abs(_movePart)); <BR> if (_bool) { <BR> headers[i - 1].style.width = 0; <BR> items[i - 1].style.width = 0; <BR> } else { <BR> _width = parseInt(headers[i - 1].style.width); <BR> headers[i - 1].style.width = _width + _movePart; <BR> _width = parseInt(items[i - 1].style.width); <BR> items[i - 1].style.width = _width + _movePart; <BR> _width = parseInt(items[i - 1].firstChild.style.width); <BR> items[i - 1].firstChild.style.width = _width + _movePart; <BR> var _table = items[i - 1].firstChild; <BR> for (var j = 0; j < _table.rows.length; j ++) { <BR> var _dataPanel = _table.rows[j].cells[0].children[0]; <BR> if (typeof _dataPanel != 'undefined') { <BR> _width = parseInt(_dataPanel.style.width); <BR> _dataPanel.style.width = _width + _movePart; <BR> } <BR> } <BR> } <BR> } <BR> } <BR> } <BR> }, <br><br> finishResize : function() { <BR> with (oListView) { <BR> if (isResize) { <BR> isResize = false; <BR> textPanel.style.cursor = 'default'; <BR> tempSeparate.style.display = 'none'; <BR> resizeItem(); <BR> } <BR> } <BR> }, <br><br> addListItem : function(_datas) { <BR> var _itemNum = _datas.length > this.rowsCount ? this.rowsCount : _datas.length ; <BR> for (var i = 0; i < _itemNum; i ++) { <BR> var n = 0; <BR> for (j = 0; j < this.items.length - 2; j ++) { <BR> if (j % 2 == 0) { <BR> var _dataPanel = document.createElement('NOBR'); <BR> var _tableCell = this.items[j].firstChild.rows[i].cells[0]; <BR> with (_dataPanel) { <BR> style.width = this.itemWidth; <BR> style.overflow = 'hidden'; <BR> style.textOverflow = 'ellipsis'; <BR> innerHTML = _datas[i][n]; <BR> } <BR> _tableCell.innerHTML = new String(); <BR> _tableCell.appendChild(_dataPanel); <BR> _tableCell.title = _datas[i][0]; <BR> n ++; <BR> } <BR> } <BR> } <BR> }, <br><br> selectedRow : function(n) { <BR> for (var i = 0; i < this.items.length; i++) { <BR> if (i % 2 == 0) { <BR> var _table = this.items[i].firstChild; <BR> for (var j = 0; j < _table.rows.length; j ++) { <BR> var _dataPanel = _table.rows[j].cells[0].children[0]; <BR> if (typeof _dataPanel != 'undefined') { <BR> if (j == n) { <BR> _table.rows[j].cells[0].style.color = 'highlighttext'; <BR> _table.rows[j].cells[0].style.backgroundColor = 'highlight'; <BR> } else { <BR> _table.rows[j].cells[0].style.color = ''; <BR> _table.rows[j].cells[0].style.backgroundColor = ''; <BR> } <BR> var _children = _table.rows[j].cells[0].firstChild.children; <BR> this.changeChild(_children, j == n); <BR> } <BR> } <BR> } <BR> } <BR> }, <br><br> changeChild : function(_children, _isSelected) { <BR> if (typeof _children != 'undefined') { <BR> for (var i = 0; i < _children.length; i ++) { <BR> if (_isSelected) { <BR> _children[i].style.color = 'highlighttext'; <BR> _children[i].style.backgroundColor = 'highlight'; <BR> } else { <BR> _children[i].style.color = ''; <BR> _children[i].style.backgroundColor = ''; <BR> } <BR> } <BR> } else { <BR> return false; <BR> } <BR> }, <br><br> showSelected : function(n) { <BR> var _text = new String(); <BR> for (var i = 0; i < this.items.length - 2; i++) { <BR> if (i % 2 == 0) { <BR> var _table = this.items[i].firstChild; <BR> _text += this.headers[i].innerText + ':\n'; <BR> _text += _table.rows[n].cells[0].firstChild.innerHTML + '\n\n'; <BR> } <BR> } <BR> alert(_text); <BR> } <BR> } <br><br> function initListView() { <BR> var _headers = []; <BR> _headers[_headers.length] = '标题'; <BR> _headers[_headers.length] = '内容'; <BR> _headers[_headers.length] = '时间'; <BR> _headers[_headers.length] = '管理'; <BR> var _aligns = []; <BR> _aligns[_aligns.length] = 'left'; <BR> _aligns[_aligns.length] = 'left'; <BR> _aligns[_aligns.length] = 'center'; <BR> _aligns[_aligns.length] = 'center'; <BR> oListView = new listView(self.oContainer); <BR> oListView.drawListView(_headers, _aligns); <br><br> var _items = []; <BR> _items[_items.length] = ['标题一', '内容一', '2006-6-21 10:30:00', '<a href="update.aspx">编辑 <a href="delete.aspx">删除']; <BR> _items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '<a href="update.aspx">编辑 <a href="delete.aspx">删除']; <BR> _items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '<a href="u</script>