javascript实现的listview效果
更新时间：04月28日 00:00:00 作者：
#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;
}
varoListView=newObject();
functionlistView(_container){
this.author='-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
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
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
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
var_tableTr=document.createElement('TR');
var_tableTd=document.createElement('TD');
with(_tableTd){
style.height=_height;
style.borderBottom='1pxsolidmenu';
innerHTML=newString('');
}
_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
if(headers[i]==separate){
var_bool=true;
_bool=_bool&&(_movePart
_bool=_bool&&(parseInt(headers[i-1].style.width)
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
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
varn=0;
for(j=0;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
if(i%2==0){
var_table=this.items[i].firstChild;
for(varj=0;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
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
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]=['标题一','内容一','-6-2110:30:00','编辑删除'];
_items[_items.length]=['标题二','内容二','-6-2114:20:12','编辑删除'];
_items[_items.length]=['标题三','内容三','-6-2120:45:36','编辑删除'];
oListView.addListItem(_items);
}
attachEvent('onload',initListView);
相关文章
下面小编就为大家带来一篇一个简单的JavaScript Map实例(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧-08-08
这篇文章主要介绍了js函数和this用法,结合实例形式分析了js函数和this基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下-03-03
下面小编就为大家带来一篇JavaScript对Json的增删改属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧-06-06
这篇文章主要介绍了JS基于cookie实现来宾统计记录访客信息的方法,通过javascript记录访客信息到cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下-08-08
动态添加表单元素，并调用bootstrapValidator的方法为表单添加校验规则，调用addField()方法实现功能。下面通过本文看下具体实现方法吧-09-09
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下-12-12
date格式化想必大家并不陌生吧，本文就来看看javascript中是如何实现的，感兴趣的朋友可以参考下-09-09
这篇文章主要介绍了js获取日期，可以获取前天、昨天、今天、明天、后天,需要的朋友可以参考下-06-06
这篇文章主要介绍了js面向对象实现canvas制作彩虹球喷枪效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下-09-09
这篇文章主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下-02-02
最新评论
