javascript实现的listview效果

<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 + '\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', '<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>