javascript实现的listview效果

ListView嵌套的EditView会在不同的项目中使用，有时候它的操作方面有很多种，今天爱站技术频道小编就为大家带来javascript实现的listview.html" target="_blank">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>

以上就是爱站技术频道小编介绍的javascript实现的listview效果，爱站技术频道小编介绍的内容都是比较安全、靠谱的，如果你还想了解更多可以来js.aizhan.com。

原文链接:https://js.aizhan.com/develop/JavaScript/9996.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有