|
|
復(fù)制代碼 代碼如下:
/// <reference path="Lib.js" />
/// <reference path="DabaBinder.js" />
//引入DataBinder.js
include("DataBinder.js");
/*
<table border="1">
<thead><tr>
<th></th>
</tr></thead>
<tbody><tr>
<td></td>
</tr></tbody>
</table>
*/
function Table(){
this.elmTable=null; //表格標(biāo)簽
this.templetRow=null; //模板行
this.displayBody=null; //顯示區(qū)tbody標(biāo)簽
this.isOverChange=false; //鼠標(biāo)移過時(shí)，是否改變顏色
this.hoverColor="#EBF3FD"; //鼠標(biāo)移過顏色
this.isActiveChange=false; //行點(diǎn)擊時(shí)，是否改變顏色
this.activeColor="#D9E8FB"; //行點(diǎn)擊時(shí)顏色
this.activeRow=null; //當(dāng)前活動(dòng)行
}
Table.prototype = {
//設(shè)置鼠標(biāo)移過時(shí)，是否改變顏色
SetOverChange: function(bOverChange) {
this.isOverChange = bOverChange;
},
//設(shè)置行點(diǎn)擊時(shí)，是否改變顏色
SetActiveChange: function(bActiveChange) {
this.isActiveChange = bActiveChange;
},
//綁定表格對(duì)象
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]; //取其第一個(gè)tbody為模板
this.templetRow = tbody.rows[0]; //取該tbody中的第一行為模板
this.elmTable.removeChild(tbody);
this.displayBody = document.createElement("TBODY"); //創(chuàng)建顯示區(qū)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;
},
//鼠標(biāo)移過時(shí)事件響應(yīng)
onMouseOver: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
row.style.backgroundColor = this.hoverColor; //改變顏色
}
},
//鼠標(biāo)移出時(shí)事件響應(yīng)
onMouseOut: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
if (row == this.activeRow) {
//如果當(dāng)前行是活動(dòng)行，設(shè)置活為動(dòng)行顏色
row.style.backgroundColor = this.activeColor;
}
else {
//設(shè)置為模板行顏色
row.style.backgroundColor = row.backgroundColor;
}
}
},
//行點(diǎn)擊事件響應(yīng)
onMouseClick: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isActiveChange) {
if (this.activeRow != null) {
//恢復(fù)原活動(dòng)行顏色
this.activeRow.style.backgroundColor = this.activeRow.backgroundColor;
}
//設(shè)置活動(dòng)行顏色
row.style.backgroundColor = this.activeColor;
//設(shè)置當(dāng)前行為活動(dòng)行
this.activeRow = row;
}
},
//新增一行，該行結(jié)構(gòu)與模板行一致
NewRow: function(bAdd) {
var _this = this;
var newRow = this.templetRow.cloneNode(true); //將模板行進(jìn)行深層拷貝
newRow.backgroundColor = newRow.style.backgroundColor;
//添加到表格顯示區(qū)中
if (bAdd == true || bAdd == null) {
this.displayBody.appendChild(newRow);
}
return newRow; //返回新行
},
//取得所有行
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 = null;
}
},
//以下標(biāo)為參數(shù)，刪除一行
DeleteAt: function(index) {
this.displayBody.deleteRow(index);
var rows = this.GetRows();
if (rows[index] == this.activeRow) {
this.activeRow = null;
}
},
//添加一行
AddRow: function(row) {
this.displayBody.appendChild(row);
},
onBinding: function(row) { },
// 數(shù)據(jù)綁定
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();
}
};
使用示例代碼：
復(fù)制代碼 代碼如下:
<!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">
<head>
<title></title>
<!--庫文件所必須的三個(gè)文件-->
<script src="../JsLib/prototype.js" type="text/Javascript"></script>
<script src="../JsLib/prototype_ext.js" type="text/Javascript"></script>
<script src="../JsLib/Lib.js" type="text/Javascript"></script>
<!--庫文件所必須的三個(gè)文件-->
<script language="Javascript" type="text/Javascript"><!--
include("Table.js"); //頭文件包含
//數(shù)據(jù)
var users = [{ user: "張三",sex:"M",age:20 },
{ user: "李四", sex: "F", age: 23 },
{ user: "王五", sex: "M", age: 22}];
//數(shù)據(jù)和模板的映射關(guān)系
var mapList = [{ id: "tdName", field: "user" },
{ id: "sltSex", field: "sex" },
{ id: "tbAge", field: "age"}];
Lib.main = function() { //這是主函數(shù)
var tblUser = new Table();
tblUser.BindID("tableUser"); //綁定到tableUser
tblUser.SetOverChange(true); //鼠標(biāo)經(jīng)過時(shí)，行改變顏色
tblUser.BindData(users, mapList); //綁定數(shù)據(jù)
};
function View(btn) {
var row = btn.parentNode.parentNode; //取得該行
var data = row.data; //取得該行所綁定的數(shù)據(jù)
alert(data.user + "/r/n" + data.sex + "/r/n" + data.age);
}
function Save(btn) {
var row = btn.parentNode.parentNode; //取得該行
var db = row.dataBinder; //取得該行的綁定器
db.Save(); //保存該行
//如果你想一次保存所有行的數(shù)據(jù)，請(qǐng)用tblUser的repeater.Save();
}
// --></script>
</head>
<body>
<table id="tableUser" border="1" width="400">
<thead><tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>操作</th>
</tr></thead>
<tbody><tr>
<td id="tdName"></td>
<td>
<select id="sltSex">
<option value="M">男</option>
<option value="F">女</option>
</select>
</td>
<td><input id="tbAge" type="text" size="4" /></td>
<td><a href="Javascript:;" onclick="Save(this)">保存</a>
<a href="Javascript:;" onclick="View(this)">查看</a></td>
</tr></tbody>
</table>
</body>
</html>
手動(dòng)產(chǎn)生數(shù)據(jù)的例子，該例如果要實(shí)現(xiàn)以上動(dòng)態(tài)編輯、數(shù)據(jù)保存的功能的話，則還要添加更多的代碼才能實(shí)現(xiàn)，一般不推薦使用這種方法
復(fù)制代碼 代碼如下:
<!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">
<head>
<title></title>
<!--庫文件所必須的三個(gè)文件-->
<script src="../JsLib/prototype.js" type="text/Javascript"></script>
<script src="../JsLib/prototype_ext.js" type="text/Javascript"></script>
<script src="../JsLib/Lib.js" type="text/Javascript"></script>
<!--庫文件所必須的三個(gè)文件-->
<script language="Javascript" type="text/Javascript"><!--
include("Table.js"); //頭文件包含
//數(shù)據(jù)
var users = [{ user: "張三",sex:"M",age:20 },
{ user: "李四", sex: "F", age: 23 },
{ user: "王五", sex: "M", age: 22}];
Lib.main = function() { //這是主函數(shù)
var tblUser = new Table();
tblUser.BindID("tableUser"); //綁定到tableUser
tblUser.SetOverChange(true); //鼠標(biāo)經(jīng)過時(shí)，行改變顏色
//手動(dòng)生成數(shù)據(jù)
for (var i = 0; i < users.length; i++) {
var data = users[i];
var row = tblUser.NewRow(); //產(chǎn)生新行
//設(shè)置各單元格數(shù)據(jù)
row.cells["tdName"].innerHTML = data.user;
row.cells["tdSex"].innerHTML = (data.sex == "M" ? "男" : "女");
row.cells["tdAge"].innerHTML = data.age;
row.data = data; //設(shè)置data引用，以提供給View函數(shù)使用
}
};
function View(btn) {
var row = btn.parentNode.parentNode; //取得該行
var data = row.data; //取得該行所綁定的數(shù)據(jù)
alert(data.user + "/r/n" + data.sex + "/r/n" + data.age);
}
// --></script>
</head>
<body>
<table id="tableUser" border="1" width="400">
<thead><tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>操作</th>
</tr></thead>
<tbody><tr>
<td id="tdName"></td>
<td id="tdSex"></td>
<td id="tdAge"></td>
<td><a href="Javascript:;" onclick="View(this)">查看</a></td>
</tr></tbody>
</table>
</body>
</html>
JavaScript技術(shù)：動(dòng)態(tài)表格Table類的實(shí)現(xiàn)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
