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

最新評論

總結

以上是生活随笔為你收集整理的html页面js遍历listview,javascript实现的listview效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。