!!动态表格Table类的实现

!!动态表格Table类的实现

2009-08-25 13:14 342人阅读 评论(0) 收藏 举报

tablefunctionjavascriptnullreferencexhtml

文件名：Table.js

本文件依赖于 prototype.js,prototype_ext.js,Lib.js,DataBinder.js

这些文件请参看我的其它文章

[c-sharp] view plaincopy

1. /// <reference path="Lib.js" />  
2. /// <reference path="DabaBinder.js" />  
3.   
4. //引入DataBinder.js  
5. include("DataBinder.js");  
6.   
7. /* 
8. <table border="1"> 
9.     <thead><tr> 
10.         <th></th> 
11.     </tr></thead> 
12.     <tbody><tr> 
13.         <td></td> 
14.     </tr></tbody> 
15. </table> 
16. */  
17. function Table(){  
18.     this.elmTable=null;     //表格标签  
19.     this.templetRow=null;   //模板行  
20.     this.displayBody=null;  //显示区tbody标签  
21.       
22.     this.isOverChange=false;    //鼠标移过时，是否改变颜色  
23.     this.hoverColor="#EBF3FD";  //鼠标移过颜色  
24.       
25.     this.isActiveChange=false;  //行点击时，是否改变颜色  
26.     this.activeColor="#D9E8FB"; //行点击时颜色  
27.     this.activeRow=null;        //当前活动行  
28. }  
29.   
30. Table.prototype = {  
31.     //设置鼠标移过时，是否改变颜色  
32.     SetOverChange: function(bOverChange) {  
33.         this.isOverChange = bOverChange;  
34.     },  
35.   
36.     //设置行点击时，是否改变颜色  
37.     SetActiveChange: function(bActiveChange) {  
38.         this.isActiveChange = bActiveChange;  
39.     },  
40.   
41.     //绑定表格对象  
42.     BindElement: function(elm) {  
43.         this.elmTable = elm;  
44.         Event.observe(this.elmTable, "mouseover", this.onMouseOver.bindAsEventListener(this));  
45.         Event.observe(this.elmTable, "mouseout", this.onMouseOut.bindAsEventListener(this));  
46.         Event.observe(this.elmTable, "click", this.onMouseClick.bindAsEventListener(this));  
47.   
48.         var tbody = this.elmTable.tBodies[0]; //取其第一个tbody为模板  
49.         this.templetRow = tbody.rows[0];      //取该tbody中的第一行为模板  
50.         this.elmTable.removeChild(tbody);  
51.   
52.         this.displayBody = document.createElement("TBODY");   //创建显示区tbody  
53.         this.elmTable.appendChild(this.displayBody);        //添加到表格中  
54.     },  
55.   
56.     //绑定表格的ID  
57.     BindID: function(id) {  
58.         var elm = document.getElementById(id);  
59.         this.BindElement(elm);  
60.     },  
61.   
62.     _getEventRow: function(evn) {  
63.         var elm = Event.element(evn);  
64.         if (elm == this.elmTable) return null;  
65.         while (elm.tagName.toLowerCase() != "tr") {  
66.             elm = elm.parentNode;  
67.             if (elm == this.elmTable || elm == null) return null;  
68.         }  
69.         if (elm.parentNode != this.displayBody) return null;  
70.         return elm;  
71.     },  
72.   
73.     //鼠标移过时事件响应  
74.     onMouseOver: function(evn) {  
75.         var row = this._getEventRow(evn);  
76.         if (!row) return;  
77.         if (this.isOverChange) {  
78.             row.style.backgroundColor = this.hoverColor;  //改变颜色  
79.         }  
80.     },  
81.   
82.     //鼠标移出时事件响应  
83.     onMouseOut: function(evn) {  
84.         var row = this._getEventRow(evn);  
85.         if (!row) return;  
86.         if (this.isOverChange) {  
87.             if (row == this.activeRow) {  
88.                 //如果当前行是活动行，设置活为动行颜色  
89.                 row.style.backgroundColor = this.activeColor;  
90.             }  
91.             else {  
92.                 //设置为模板行颜色  
93.                 row.style.backgroundColor = row.backgroundColor;  
94.             }  
95.         }  
96.     },  
97.   
98.     //行点击事件响应  
99.     onMouseClick: function(evn) {  
100.   
101.         var row = this._getEventRow(evn);  
102.         if (!row) return;  
103.         if (this.isActiveChange) {  
104.             if (this.activeRow != null) {  
105.                 //恢复原活动行颜色  
106.                 this.activeRow.style.backgroundColor = this.activeRow.backgroundColor;  
107.             }  
108.             //设置活动行颜色  
109.             row.style.backgroundColor = this.activeColor;  
110.             //设置当前行为活动行  
111.             this.activeRow = row;  
112.         }  
113.     },  
114.   
115.     //新增一行，该行结构与模板行一致  
116.     NewRow: function(bAdd) {  
117.         var _this = this;  
118.         var newRow = this.templetRow.cloneNode(true); //将模板行进行深层拷贝  
119.         newRow.backgroundColor = newRow.style.backgroundColor;  
120.   
121.         //添加到表格显示区中  
122.         if (bAdd == true || bAdd == null) {  
123.             this.displayBody.appendChild(newRow);  
124.         }  
125.         return newRow;  //返回新行  
126.     },  
127.   
128.     //取得所有行  
129.     GetRows: function() {  
130.         return this.displayBody.rows;  
131.     },  
132.   
133.     //清空所有行  
134.     Clear: function() {  
135.         var newTbody = document.createElement("TBODY");  
136.         this.elmTable.replaceChild(newTbody, this.displayBody);  
137.         this.displayBody = newTbody;  
138.     },  
139.   
140.     //删除一行  
141.     DeleteRow: function(row) {  
142.         this.elmTable.deleteRow(row.rowIndex);  
143.         if (row == this.activeRow) {  
144.             this.activeRow = null;  
145.         }  
146.     },  
147.   
148.     //以下标为参数，删除一行  
149.     DeleteAt: function(index) {  
150.         this.displayBody.deleteRow(index);  
151.         var rows = this.GetRows();  
152.         if (rows[index] == this.activeRow) {  
153.             this.activeRow = null;  
154.         }  
155.     },  
156.   
157.     //添加一行  
158.     AddRow: function(row) {  
159.         this.displayBody.appendChild(row);  
160.     },  
161.   
162.     onBinding: function(row) { },  
163.     // 数据绑定  
164.     BindData: function(dataSource, mapList) {  
165.         var _this = this;  
166.         this.Clear();  
167.         this.repeater = new Repeater();  
168.         this.repeater.setMapList(mapList);  
169.         this.repeater.defaultCreateItem = function() {  
170.             var row = _this.NewRow(false);  
171.             return row;  
172.         };  
173.         this.repeater.setDataList(dataSource);  
174.         this.repeater.setContainer(this.displayBody);  
175.         this.repeater.Bind();  
176.     }  
177. };  

 

使用示例代码：

[xhtml] view plaincopy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
2. "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
3. <html xmlns="http://www./1999/xhtml">  
4. <head>  
5.     <title></title>  
6.     <!--库文件所必须的三个文件-->  
7.     <mce:script src="../JsLib/prototype.js" mce_src="JsLib/prototype.js" type="text/javascript"></mce:script>  
8.     <mce:script src="../JsLib/prototype_ext.js" mce_src="JsLib/prototype_ext.js" type="text/javascript"></mce:script>  
9.     <mce:script src="../JsLib/Lib.js" mce_src="JsLib/Lib.js" type="text/javascript"></mce:script>  
10.     <!--库文件所必须的三个文件-->  
11.   
12.     <mce:script language="javascript" type="text/javascript"><!--  
13.         include("Table.js");  //头文件包含  
14.   
15.         //数据  
16.         var users = [{ user: "张三",sex:"M",age:20 },  
17.         { user: "李四", sex: "F", age: 23 },  
18.         { user: "王五", sex: "M", age: 22}];  
19.   
20.         //数据和模板的映射关系  
21.         var mapList = [{ id: "tdName", field: "user" },  
22.         { id: "sltSex", field: "sex" },  
23.         { id: "tbAge", field: "age"}];  
24.   
25.         Lib.main = function() { //这是主函数  
26.             var tblUser = new Table();  
27.             tblUser.BindID("tableUser");    //绑定到tableUser  
28.             tblUser.SetOverChange(true);    //鼠标经过时，行改变颜色  
29.             tblUser.BindData(users, mapList);   //绑定数据  
30.         };  
31.   
32.         function View(btn) {  
33.             var row = btn.parentNode.parentNode;    //取得该行  
34.             var data = row.data;    //取得该行所绑定的数据  
35.             alert(data.user + "/r/n" + data.sex + "/r/n" + data.age);  
36.         }  
37.         function Save(btn) {  
38.             var row = btn.parentNode.parentNode;    //取得该行  
39.             var db = row.dataBinder;    //取得该行的绑定器  
40.             db.Save();  //保存该行  
41.             //如果你想一次保存所有行的数据，请用tblUser的repeater.Save();  
42.         }  
43.       
44. // --></mce:script>  
45. </head>  
46. <body>  
47.   
48. <table id="tableUser" border="1" width="400">  
49.     <thead><tr>  
50.         <th>姓名</th>  
51.         <th>性别</th>  
52.         <th>年龄</th>  
53.         <th>操作</th>  
54.     </tr></thead>  
55.       
56.     <tbody><tr>  
57.         <td id="tdName"></td>  
58.         <td>  
59.             <select id="sltSex">  
60.                 <option value="M">男</option>  
61.                 <option value="F">女</option>  
62.             </select>  
63.         </td>  
64.         <td><input id="tbAge" type="text" size="4" /></td>  
65.         <td><a href="javascript:;" mce_href="javascript:;" onclick="Save(this)">保存</a>  
66.         <a href="javascript:;" mce_href="javascript:;" onclick="View(this)">查看</a></td>  
67.     </tr></tbody>  
68. </table>  
69.   
70. </body>  
71. </html>  

 

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

[c-sharp] view plaincopy

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
2. "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">  
3. <html xmlns="http://www./1999/xhtml">  
4. <head>  
5.     <title></title>  
6.     <!--库文件所必须的三个文件-->  
7.     <mce:script src="../JsLib/prototype.js" mce_src="JsLib/prototype.js" type="text/javascript"></mce:script>  
8.     <mce:script src="../JsLib/prototype_ext.js" mce_src="JsLib/prototype_ext.js" type="text/javascript"></mce:script>  
9.     <mce:script src="../JsLib/Lib.js" mce_src="JsLib/Lib.js" type="text/javascript"></mce:script>  
10.     <!--库文件所必须的三个文件-->  
11.   
12.     <mce:script language="javascript" type="text/javascript"><!--  
13.         include("Table.js");  //头文件包含  
14.   
15.         //数据  
16.         var users = [{ user: "张三",sex:"M",age:20 },  
17.         { user: "李四", sex: "F", age: 23 },  
18.         { user: "王五", sex: "M", age: 22}];  
19.   
20.         Lib.main = function() { //这是主函数  
21.             var tblUser = new Table();  
22.             tblUser.BindID("tableUser");    //绑定到tableUser  
23.             tblUser.SetOverChange(true);    //鼠标经过时，行改变颜色  
24.   
25.             //手动生成数据  
26.             for (var i = 0; i < users.length; i++) {  
27.                 var data = users[i];  
28.                 var row = tblUser.NewRow(); //产生新行  
29.                   
30.                 //设置各单元格数据  
31.                 row.cells["tdName"].innerHTML = data.user;  
32.                 row.cells["tdSex"].innerHTML = (data.sex == "M" ? "男" : "女");  
33.                 row.cells["tdAge"].innerHTML = data.age;  
34.                 row.data = data;    //设置data引用，以提供给View函数使用  
35.             }  
36.         };  
37.   
38.         function View(btn) {  
39.             var row = btn.parentNode.parentNode;    //取得该行  
40.             var data = row.data;    //取得该行所绑定的数据  
41.             alert(data.user + "/r/n" + data.sex + "/r/n" + data.age);  
42.         }  
43.       
44. // --></mce:script>  
45. </head>  
46. <body>  
47.   
48. <table id="tableUser" border="1" width="400">  
49.     <thead><tr>  
50.         <th>姓名</th>  
51.         <th>性别</th>  
52.         <th>年龄</th>  
53.         <th>操作</th>  
54.     </tr></thead>  
55.       
56.     <tbody><tr>  
57.         <td id="tdName"></td>  
58.         <td id="tdSex"></td>  
59.         <td id="tdAge"></td>  
60.         <td><a href="javascript:;" mce_href="javascript:;" onclick="View(this)">查看</a></td>  
61.     </tr></tbody>  
62. </table>  
63.   
64. </body>  
65. </html>  

• 上一篇数据绑定器
• 下一篇JS动态样式

主题推荐

类 select 鼠标 标签 对象

猜你在找

［译］How browsers work

JS培训笔记

为Struts 20做

ASPNET程序中常用的三十三种代码

html加强

Linux 2619x 内核编译配置选项简介

动态给table 添加 tr行实现添加多个对象

html表格table实现鼠标移入移出行变色的一种可用方法

WEB前端开发学习----2HTML表格table标签

查看评论