동적 테이블 Table class_prototype 구현
- WBOY원래의
- 2016-05-16 18:47:421273검색
코드 복사 코드는 다음과 같습니다.
///
///
//DataBinder.js 소개
include("DataBinder.js");
/*
| tbody> |
*/
function Table(){
this.elmTable=null; //테이블 라벨
this.templetRow=null; 🎜>this.displayBody=null; //표시 영역 tbody label
this.isOverChange=false; //마우스를 위로 이동할 때 색상 변경 여부
this.hoverColor="#EBF3FD"; 마우스를 위에 올렸을 때의 색상
this.isActiveChange=false; //행을 클릭했을 때의 색상 변경
this.activeColor="#D9E8FB"; //행을 클릭했을 때의 색상
this.activeRow=null; //현재 활성 행
}
Table.prototype = {
//마우스를 위로 이동할 때 색상 변경 여부 설정
SetOverChange: function(bOverChange) {
this.isOverChange = bOverChange;
},
//행 클릭 시 색상 변경 여부 설정
SetActiveChange: function(bActiveChange) {
this.isActiveChange = bActiveChange;
},
//테이블 객체 바인딩
BindElement: function(elm) {
this.elmTable = elm
Event.observe(this.elmTable, "mouseover", this.onMouseOver .bindAsEventListener(this));
Event.observe(this.elmTable, "mouseout", this.onMouseOut.bindAsEventListener(this))
Event.observe(this.elmTable, "click", this.onMouseClick .bindAsEventListener(this));
var tbody = this.elmTable.tBodies [0]; //첫 번째 tbody를 템플릿으로 사용
this.templetRow = tbody.rows[0]; tbody의 행을 템플릿으로 사용
this.elmTable.removeChild(tbody) ;
this.displayBody = document.createElement("TBODY") //표시 영역 tbody 생성
this.elmTable.appendChild (this.displayBody); //테이블에 추가
},
//바인딩된 테이블의 ID
BindID: function(id) {
var elm = document.getElementById(id) ;
this.BindElement(elm);
},
_getEventRow : function(evn) {
var elm = Event.element(evn)
if (elm == this.elmTable ) return null;
while (elm.tagName.toLowerCase() != "tr ") {
elm = elm.parentNode;
if (elm == this.elmTable || elm == null) return null;
}
if (elm.parentNode != this.displayBody ) return null
return elm;
//마우스를 위로 이동할 때 이벤트 응답
onMouseOver: function(evn) {
var row = this._getEventRow(evn);
if (!row) return
if (this.isOverChange) {
row.style.BackgroundColor = this .hoverColor; //색상 변경
}
},
//이동 시 마우스 이벤트 응답
onMouseOut: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
if (row == this.activeRow) {
//현재 행이 활성 행인 경우 활성 행을 설정합니다. 행 색상
row.style.BackgroundColor = this.activeColor;
}
else {
//템플릿 행 색상으로 설정
row.style.BackgroundColor = row.BackgroundColor; }
}
},
//행 클릭 이벤트 응답
onMouseClick: function(evn) {
var row = this._getEventRow(evn)
if (!row) return;
if (this.isActiveChange) {
if (this.activeRow != null) {
//원래 활성 행 색상 복원
this.activeRow.style.BackgroundColor = this.activeRow .BackgroundColor;
}
//활성 행 색상 설정
row.style.BackgroundColor = this.activeColor;
//현재 동작 활성 행 설정
this.activeRow = row;
}
},
//새 행을 추가합니다. 행 구조는 템플릿 행과 일치합니다.
NewRow: function(bAdd) {
var _this = this
var; newRow = this.templetRow.cloneNode(true); //템플릿 행의 전체 복사본 만들기
newRow.BackgroundColor = newRow.style. backgroundColor
//테이블 표시 영역에 추가
bAdd == true || bAdd == null) {
this.displayBody.appendChild(newRow);
}
return newRow; //새 행 반환
//Get 모든 행
GetRows: function() {
return this.displayBody.rows;
},
//모든 줄 지우기
Clear: function() {
var newTbody = document .createElement("TBODY");
this.elmTable.replaceChild(newTbody, this.displayBody);
this.displayBody = newTbody ;
//행 삭제
DeleteRow : function(row) {
this.elmTable.deleteRow(row.rowIndex);
if (row == this.activeRow) {
this.activeRow =
}
} ,
//아래 첨자는 행 삭제
DeleteAt: function(index) {
this.displayBody.deleteRow(index )
varrows = this.GetRows()
if (rows[index] == this.activeRow) {
this.activeRow = null;
}
},
//행 추가
AddRow: 함수(행) {
this.displayBody.appendChild(행)
},
onBinding: 함수(행) { },
// 데이터 바인딩
BindData: function(dataSource, mapList) {
var _this = this;
this.Clear()
this.repeater = new Repeater(); 🎜>this.repeater.setMapList(mapList);
this.repeater.defaultCreateItem = function() {
var row = _this.NewRow(false);
return row; >this.repeater.setDataList(dataSource);
this.repeater.setContainer(this.displayBody);
this.repeater.Bind()
}
샘플 코드 사용:
코드 복사
코드는 다음과 같습니다. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
< html xmlns="http://www.w3.org/1999/xhtml">