javascript实现的listview效果
2016-02-19 09:55
今天图老师小编给大家精心推荐个javascript实现的listview效果教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~
#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 + 'nn';
}
}
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);
&
