dhtmlx使用翻譯（一）dhtmlxgrid 配置部分

 

Dhtmlx是一個半開源的js架構，說是半開源，因為它的有些指令碼是收費的。總體感覺很輕巧，可依賴的東西不多，和ext這樣的龐然大物，dhtmlx應該定位為一個tool更為合適。我自己一直在使用，很喜歡它。因為網上好像沒看見可用的API中文翻譯，今天終於鼓起勇氣來做這件事情，純屬個人愛好，大夥見笑了，其實我的英文不好，大學四年，英語就掛過四次。好,不廢話了，這就開始。

 

 

1       dhtmlxgrid1.1     API

1.1.1                      attachEvent(evName , evHandler)

版本：福士版

 

參數：

evName  可定義事件名稱

evHandler 使用者自訂處理函數.

 

用途：對當前grid事件綁定使用者的自訂的處理js函數，這裡支援兩種格式定義

一 匿名函數定義

 

 

 

Js代碼 

1. <script>  
2.   grid.attachEvent("onRowSelect",function(rowId,cellIndex){  
3.      alert("Row with id="+rowId+" was selected");  
4.   });  
5. </script>  

 

 

 

 

二 命名函數定義

 

 

 

1. <script>  
2.    grid.attachEvent("onEditCell",doOnEditCell);  
3.    ...  
4.    function doOnEditCell(stage,rowId,cellIndex,newValue,oldValue){  
5.       if ((stage==2)&&(newValue!=oldValue)){  
6.          alert("Cell with id="+rowId+" and index="+cellIndex+" was edited");  
7.          return true;  
8.       }  
9.       return true;  
10.    }  
11. </script>  

 

 

 

 

這裡也支援一個事件綁定多個處理函數的方法

 

 

 

1. <script>  
2.    grid.attachEvent("onCheck",doOnCheck1);  
3.    grid.attachEvent("onCheck",doOnCheck2);  
4.    function doOnCheck1(rowId,cellIndex,state){  
5.       if (state){  
6.          alert("Checkbox in the row with id="+rowId+" was checked");  
7.       }  
8.    }  
9.    function doOnCheck2(rowId,cellIndex,state){  
10.       if (state){  
11.          alert("Checkbox in column with index="+cellIndex+" was checked");  
12.       }  
13.    }  
14. </script>  

 

 

 

執行順序為doOnCheck1 –》doOnCheck2，這裡可以用於通過全域js變數實現grid連動效果的實現。如，先onRowSelect獲得當前選中儲存格的值，針對當前值，定義一個函數改變當前cell的樣式等，當然這樣的操作也可以一個function中實現，這裡定義為分離，可實現兩個函數的被其他地方公用使用。

 

 

Grid中可供綁定的事件，參考grid事件介紹。

 

1.1.2                      attachFooter(values, style)

版本：專業版

參數：

values:增加行的每個儲存格值，以數組的形式給出，這裡支援html的值表示

style：儲存格的樣式

用途：

在grid的最後動態新增一行(表腳)，注意當前表腳不會隨上下捲軸一起移動，並設定各單中繼資料和格樣式

 

可供參考執行個體：

 

 

1. //數組形式  
2. grid.attachFooter("A,B,C,D");  
3.  //數組形式  
4. grid.attachFooter(["A","B","C","D"])  
5.  //跨列增加  
6. grid.attachFooter("A,#cspan,C,#cspan");  
7. //跨行增加  
8. grid.attachFooter("A,#rspan,C,#rspan");  
9. //運算式html值  
10. grid.attachFooter ("A,<strong>B</strong>,C,<a href='http://test.com'>D</a>");  
11. //指定各儲存格樣式  
12. grid.attachFooter ("A,B,C,D",["","color:red;","",""]);  
13.    
14. 在onload事件中調用  
15. grid.load("grid.xml",function(){  
16.         grid.attachFooter ('A,B,C');  
17.         grid.attachFooter ('G,H,I');  
18.         grid.setSizes();//文檔上說這裡必須加上，但沒發現其必要性  
19.    });  
20.    

 

 

 

1.1.3                      attachHeader(values, style)

版本：福士版

參數：

values:增加行的每個儲存格值，以數組的形式給出，這裡支援html的值表示

style：儲存格的樣式

用途：

定義grid的表頭，注意當前表頭不會隨上下捲軸一起移動，並設定各單中繼資料和格樣式

 

具體運用與attachHeader類似

 

1.1.4                      attachToObject(obj)

版本：福士版

參數：

Obj:當前綁定的grid的對象

用途：

將當前定義grid對象重新綁定到某個容器中，可實現grid在頁面上容器間（如div）的動態切換，好像不能重新綁定到原有的容器定義，使用原有的容器僅是display=none而已，因為：通過alert 容器的innerHTML發現，原有容器和新綁定容器值一致

 

參考執行個體：

 

1. <!—原有容器-->  
2. <div id="listdiv"   style=" border-style:solid;width:100%;height:316px;"></div>  
3. <table width="700">  
4.     <tr>  
5.         <td width="50%" valign="top">  
6. <!—可綁定新容器-->  
7. <div id="gridbox" style="width=350px;height:150px;background-color:white;"></div>  
8.         </td>  
9.         <td valign="top">  
10. <!—可綁定新容器-->             
11. <div id="gridbox2" style="width=350px;height:150px;background-color:white;border:1px solid blue;" align="right"></div>  
12.         </td>  
13.     </tr>  
14. <table>  
15. <input type="button" onclick="dotacche()" value="00000"/>  
16. <input type="button" onclick="doctacche()" value="1111"/>  
17. <script>  
18. function dotacche() {  
19.          ckmygrid.attachToObject(document.getElementById("gridbox2"));  
20.    
21. }  
22. function doctacche() {  
23.          ckmygrid.attachToObject(document.getElementById("gridbox"));  
24. //      ckmygrid.attachToObject(document.getElementById("listdiv"));這裡執行沒有效果  
25. }  
26. </script>  

 

 

 

1.1.5                      destructor

版本：福士版

參數：

Obj:當前綁定的grid的對象

用途：

徹底銷毀當前grid在頁面中的使用，並釋放其對象佔用的資源（如js數組置空等），若重新使用，必須通過init建立，有別於clearAll,後者僅把grid中的所有行刪除，grid本身還可以進行資料的重填充。

這裡也可以採用比較暴力的銷毀方式，其grid負載的容器.innerHTML = “&nbsp;”;即可，但這樣grid建立的全域js變數沒有完成銷毀過程

 

參考執行個體：無

 

1.1.6                      detachEvent(id)

版本：福士版

參數：

id 事件序號，全域唯一

用途：

刪除grid中某個事件的處理過程

 

參考執行個體：無

 

1.1.7                      detachFooter(index)

版本：專業版

參數：

index 表腳索引

用途：

刪除grid的某個表腳，與attachFooter配對使用

 

參考執行個體：無

 

（註：本人文章均為原創，轉載請註明出處！20100620寫於深圳。）