动态表格Table类的实现

复制代码代码如下:

　　/// <reference path="Lib.js" />

　　/// <reference path="DabaBinder.js" />

　　//引入DataBinder.js

　　include("DataBinder.js");

　　</tr></thead>

　　</tr></tbody>

　　</table>

　　function Table(){

　　this.elmTable=null; //表格标签

　　this.templetRow=null; //模板行

　　this.displayBody=null; //显示区tbody标签

　　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;

　　//添加到表格显示区中

　　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;

　　}

　　//以下标为参数，删除一行

　　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) { },

　　// 数据绑定

　　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">

　　<head>

<script language="javascript" type="text/javascript"><!--

　　include("Table.js"); //头文件包含

　　//数据

　　var users = [{ user: "张三",sex:"M",age:20 },

　　{ user: "李四", sex: "F", age: 23 },

　　{ user: "王五", sex: "M", age: 22}];

　　//数据和模板的映射关系

　　var mapList = [{ id: "tdName", field: "user" },

　　{ id: "sltSex", field: "sex" },

　　{ id: "tbAge", field: "age"}];

　　Lib.main = function() { //这是主函数

　　var tblUser = new Table();

　　tblUser.BindID("tableUser"); //绑定到tableUser

　　tblUser.SetOverChange(true); //鼠标经过时，行改变颜色

　　tblUser.BindData(users, mapList); //绑定数据

　　};

　　function View(btn) {

　　var row = btn.parentNode.parentNode; //取得该行

　　var data = row.data; //取得该行所绑定的数据

　　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(); //保存该行

　　//如果你想一次保存所有行的数据，请用tblUser的repeater.Save();

　　}

　　// --></script>

　　</head>

　　<body>

　　</tr></thead>

　　<td>

　　</select>

　　</td>

　　</tr></tbody>

　　</table>

　　</body>

　　</html>

　　手动产生数据的例子，该例如果要实现以上动态编辑、数据保存的功能的话，则还要添加更多的代码才能实现，一般不推荐使用这种方法

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

<script language="javascript" type="text/javascript"><!--

　　include("Table.js"); //头文件包含

　　//数据

　　var users = [{ user: "张三",sex:"M",age:20 },

　　{ user: "李四", sex: "F", age: 23 },

　　{ user: "王五", sex: "M", age: 22}];

　　Lib.main = function() { //这是主函数

　　var tblUser = new Table();

　　tblUser.BindID("tableUser"); //绑定到tableUser

　　tblUser.SetOverChange(true); //鼠标经过时，行改变颜色

　　//手动生成数据

　　for (var i = 0; i < users.length; i++) {

　　var data = users[i];

　　var row = tblUser.NewRow(); //产生新行

　　//设置各单元格数据

　　row.cells["tdName"].innerHTML = data.user;

　　row.cells["tdSex"].innerHTML = (data.sex == "M" ? "男" : "女");

　　row.cells["tdAge"].innerHTML = data.age;

　　row.data = data; //设置data引用，以提供给View函数使用

　　}

　　};

　　function View(btn) {

　　var row = btn.parentNode.parentNode; //取得该行

　　var data = row.data; //取得该行所绑定的数据

　　alert(data.user + "\r\n" + data.sex + "\r\n" + data.age);

　　}

　　// --></script>

　　</head>

　　<body>

　　</tr></thead>

　　</tr></tbody>

　　</table>

　　</body>

　　</html>

教程首页更多教程