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>