javascript实现的listview效果

更新时间：2007年04月28日 00:00:00   作者：

#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;

}

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

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

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

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

var _tableTr = document.createElement('TR');

var _tableTd = document.createElement('TD');

with (_tableTd) {

style.height = _height;

style.borderBottom = '1px solid menu';

innerHTML = new String(' ');

}

_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

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 (var j = 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 (var i = 0; i

var n = 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 = new String();

_tableCell.appendChild(_dataPanel);

_tableCell.title = _datas[i][0];

n ++;

}

}

}

},

selectedRow : function(n) {

for (var i = 0; i

if (i % 2 == 0) {

var _table = this.items[i].firstChild;

for (var j = 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 (var i = 0; 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

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', '编辑  删除'];

_items[_items.length] = ['标题二', '内容二', '2006-6-21 14:20:12', '编辑  删除'];

_items[_items.length] = ['标题三', '内容三', '2006-6-21 20:45:36', '编辑  删除'];

oListView.addListItem(_items);

}

attachEvent('onload', initListView);

相关文章

下面小编就为大家带来一篇一个简单的JavaScript Map实例(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08

这篇文章主要介绍了js函数和this用法,结合实例形式分析了js函数和this基本功能、原理、使用方法与操作注意事项,需要的朋友可以参考下2020-03-03

下面小编就为大家带来一篇JavaScript对Json的增删改属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06

这篇文章主要介绍了JS基于cookie实现来宾统计记录访客信息的方法,通过javascript记录访客信息到cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08

动态添加表单元素，并调用bootstrapValidator的方法为表单添加校验规则，调用addField()方法实现功能。下面通过本文看下具体实现方法吧2016-09-09

这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下2015-12-12

date格式化想必大家并不陌生吧，本文就来看看javascript中是如何实现的，感兴趣的朋友可以参考下2013-09-09

这篇文章主要介绍了js获取日期，可以获取前天、昨天、今天、明天、后天,需要的朋友可以参考下2014-06-06

这篇文章主要介绍了js面向对象实现canvas制作彩虹球喷枪效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09

这篇文章主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02

最新评论