文件名:Table.js
本文件依赖于 prototype.js,prototype_ext.js,Lib.js,DataBinder.js
这些文件请参看我的其它文章
- /// <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; //表格标签
- 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">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <!--库文件所必须的三个文件-->
- <mce:script src="../JsLib/prototype.js" mce_src="JsLib/prototype.js" type="text/javascript"></mce:script>
- <mce:script src="../JsLib/prototype_ext.js" mce_src="JsLib/prototype_ext.js" type="text/javascript"></mce:script>
- <mce:script src="../JsLib/Lib.js" mce_src="JsLib/Lib.js" type="text/javascript"></mce:script>
- <!--库文件所必须的三个文件-->
-
- <mce: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();
- }
-
- // --></mce: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:;" mce_href="javascript:;" onclick="Save(this)">保存</a>
- <a href="javascript:;" mce_href="javascript:;" onclick="View(this)">查看</a></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">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <!--库文件所必须的三个文件-->
- <mce:script src="../JsLib/prototype.js" mce_src="JsLib/prototype.js" type="text/javascript"></mce:script>
- <mce:script src="../JsLib/prototype_ext.js" mce_src="JsLib/prototype_ext.js" type="text/javascript"></mce:script>
- <mce:script src="../JsLib/Lib.js" mce_src="JsLib/Lib.js" type="text/javascript"></mce:script>
- <!--库文件所必须的三个文件-->
-
- <mce: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);
- }
-
- // --></mce: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:;" mce_href="javascript:;" onclick="View(this)">查看</a></td>
- </tr></tbody>
- </table>
-
- </body>
- </html>