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生成文字，鏈接，圖片等元素是繁重的勞動，將它們歸納成函數有利于提高程序員的生產率，并把精力集中于更值得投放精力的方向上。