<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.author='51JS.COM-ZMM';
this.version='ListView1.0';
this.container=_container;
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.container.innerHTML=newString();
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('<nobr+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+'nn';
}
}
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>