javascript实现的listview效果

　　<styletype=text/css>
#oContainer{
width:600px;
height:500px;
border:1pxsolidmenu;
margin:0px;
padding:0px;
overflow:hidden;
}
a{
color:black;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
</style>
<scriptlanguage=javascript>
varoListView=newObject();

functionlistView(_container){
this.version=ListView1.0;
this.box=newObject();
this.headerWidth=0;
this.headerHeight=20;
this.itemWidth=0;
this.itemHeight=0;
this.rowsCount=30;
this.isResize=false;
this.separate=newObject();
this.startPoint=0;
this.endPoint=0;
this.tempSeparate=newObject();
this.put_headerHeight=function(_height){return_height;};
this.get_headerHeight=function(){returnthis.headerHeight;};
this.put_rowsCount=function(_count){return_count;};
this.get_rowsCount=function(){returnthis.rowsCount;};
}

listView.prototype={
boxInit:function(){
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,newFunction(returnfalse;));
}
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(vari=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=1pxsolidbuttonhighlight;
style.borderTop=1pxsolidbuttonhighlight;
style.borderRight=1pxsolidbuttonshadow;
style.borderBottom=1pxsolidbuttonshadow;
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=1pxsolidbuttonhighlight;
style.borderTop=1pxsolidbuttonhighlight;
style.borderRight=1pxsolidbuttonshadow;
style.borderBottom=1pxsolidbuttonshadow;
style.textAlign=center;
style.fontSize=12px;
style.fontFamily=Sans-Serif,Tahoma;
style.paddingTop=1px;
innerText=newString();
}
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(vari=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(vari=0;i<_count;i++){
var_tableTr=document.createElement(TR);
var_tableTd=document.createElement(TD);
with(_tableTd){
align=_align;
style.height=_height;
style.borderBottom=1pxsolid#c6c3c6;
style.fontSize=12px;
style.paddingLeft=3px;
setAttribute(onclick,function(){
oListView.selectedRow(this.parentNode.rowIndex);
});
setAttribute(ondblclick,function(){
oListView.showSelected(this.parentNode.rowIndex);
});
innerHTML=newString();
}
_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(vari=0;i<_count;i++){
var_tableTr=document.createElement(TR);
var_tableTd=document.createElement(TD);
with(_tableTd){
style.height=_height;
style.borderBottom=1pxsolidmenu;
innerHTML=newString(<nobrstyle=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?insetwhite: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(vari=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(varj=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(vari=0;i<_itemNum;i++){
varn=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=newString();
_tableCell.appendChild(_dataPanel);
_tableCell.title=_datas[i][0];
n++;
}
}
}
},

selectedRow:function(n){
for(vari=0;i<this.items.length;i++){
if(i%2==0){
var_table=this.items[i].firstChild;
for(varj=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(vari=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{
returnfalse;
}
},

showSelected:function(n){
var_text=newString();
for(vari=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);
}
}

functioninitListView(){
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=newlistView(self.oContainer);
oListView.drawListView(_headers,_aligns);

var_items=[];
_items[_items.length]=[标题一,内容一,2006-6-2110:30:00,<ahref=update.aspx>编辑</a><ahref=delete.aspx>删除</a>];
_items[_items.length]=[标题二,内容二,2006-6-2114:20:12,<ahref=update.aspx>编辑</a><ahref=delete.aspx>删除</a>];
_items[_items.length]=[标题三,内容三,2006-6-2120:45:36,<ahref=update.aspx>编辑</a><ahref=delete.aspx>删除</a>];
oListView.addListItem(_items);
}

attachEvent(onload,initListView);
</script>
<center>
<divid=oContainer></div>
</center>