Teambiz中与表格操作相关的函数
作者：何杨
撰写日期：2012年2月26日
版本：1.00
更新日期：
第一部分：功能说明
提供向表格行的单元格中添加文本，链接，图片等是操作表格内容的常见操作函数。它们在诸如addDatasToTable之类的函数常常被使用。
第二部分：核心组件
| 名称 | 路径 | 说明 |
| createTextTd | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个仅含文本的单元格。 |
| createLink | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个链接，它是为createLinkTd函数准备的。 |
| createLinkTd | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个仅含链接的单元格，当程序员需要在单元格中需要创建链接或是需要通过js伪协议调用js函数可以使用它。 |
| createImageTd | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个仅含图片的单元格，当需要用图标表示数据的状态时可以使用它。 |
| createTitledLink | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个带提示性说明（tooltiptext）的链接，它是为createTitledLinkTd函数准备的 |
| createTitledLinkTd | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个包含提示性说明链接的单元格，它比createLinkTd更具用户友好型。 |
| createIamgeLink | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个图片链接，它是为createImageLinkTd函数使用的。 |
| createImageLinkTd | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个包含图片链接的单元格，如果图片比文字更加形象时可以考虑用它取代createLinkTd和createTitledLinkTd |
| createImageTextTd | teambiz\WebRoot\page\js\dom.js中同名函数。 | 创建一个兼具图片和文字说明的单元格。 |
| createStartSearchRowBy | teambiz\WebRoot\page\js\changepage.js中同名函数。 | 创建一个colspan为40的表格行，内含图片和文字，一般在开始查询时使用。 |
| createNgRowBy | teambiz\WebRoot\page\js\changepage.js中同名函数。 | 创建一个colspan为40的表格行，内含文字，一般从后台没有得到相要的数据时使用。 |
第三部分：实际代码
以下代码请参见teambiz\WebRoot\page\js\dom.js中同名函数。
/******************************************************
* create a text cell
* 2011-3-1 9:27:07 heyang
******************************************************/
function createTextTd(text){
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(text));
return cell;
}
/******************************************************
* create a image cell
* 2011-3-1 9:27:07 heyang
******************************************************/
function createImageTd(imageUrl){
var cell=document.createElement("td");
var image=document.createElement("img");
image.setAttribute("src",imageUrl);
cell.appendChild(image);
return cell;
}
/******************************************************
* create a link
* 2011-3-1 9:27:07 heyang
******************************************************/
function createLink(text,url){
var link=document.createElement("a");
link.appendChild(document.createTextNode(text));
link.setAttribute("href",url);
return link;
}
/******************************************************
* create a link cell
* 2011-3-1 9:27:07 heyang
******************************************************/
function createLinkTd(text,url){
var link=createLink(text,url);
var cell=document.createElement("td");
cell.appendChild(link);
return cell;
}
/******************************************************
* create a titled link
* 2011-7-9 10:46:50 heyang
******************************************************/
function createTitledLink(text,title,url){
var link=document.createElement("a");
link.appendChild(document.createTextNode(text));
link.setAttribute("href",url);
link.setAttribute("title",title);
return link;
}
/******************************************************
* create a Titled link cell
* 2011-7-9 10:46:50 heyang
******************************************************/
function createTitledLinkTd(text,title,url){
var link=createTitledLink(text,title,url);
var cell=document.createElement("td");
cell.appendChild(link);
return cell;
}
/******************************************************
* create a Iamge link
* 2011-3-1 9:27:07 heyang
******************************************************/
function createIamgeLink(imageUrl,url){
var link=document.createElement("a");
var image=document.createElement("img");
image.setAttribute("src",imageUrl);
link.appendChild(image);
link.setAttribute("href",url);
return link;
}
/******************************************************
* create a Iamge linked table cell
* 2011-3-1 9:27:07 heyang
******************************************************/
function createImageLinkTd(imageUrl,url){
var cell=document.createElement("td");
cell.appendChild(createIamgeLink(imageUrl,url));
return cell;
}
/******************************************************
* create a Iamge and text cell
* 2012-1-9 10:31:31 heyang
******************************************************/
function createImageTextTd(imageUrl,text){
var cell=document.createElement("td");
var image=document.createElement("img");
image.setAttribute("src",imageUrl);
cell.appendChild(image);
cell.appendChild(document.createTextNode(text));
return cell;
}
第四部分：使用步骤
| 步骤 | 说明 | 参照 |
| 载入这批函数 | 在teambiz中，这一载入一般放在style.css中。 | <script src="page/js/dom.js" type="text/javascript"></script> |
| 根据实际情况使用这批函数 | | teambiz\WebRoot\page\jsp\task\sent\javascript.jsp中addDatasToTable函数，这个函数基本使用到了上面提到的所有函数。 |
第五部分：小结
使用DOM生成文字，链接，图片等元素是繁重的劳动，将它们归纳成函数有利于提高程序员的生产率，并把精力集中于更值得投放精力的方向上。