【轉】DataTable使用技巧

1.如何設定表格中行的高度(包括表格頭，合計欄) 
headerHeight：設定表格頭的高度； 
footerHeight：設定表格合計欄的高度； 
rowHeidht：設定數據行的高度； 

dorado-5.0 060904.1658以后的版本支持 

2.如何添加動態列(包含自定義的按鈕或者自定義的超鏈接) 
Table中直接添加一個column,不需要設定field屬性，如name為operation 
范例1： 
實現效果:表格列中包含一個按鈕，功能:單擊查看詳細 
實現方法： 
在該列的onRefresh事件中寫入代碼 
var id = record.getValue("id"); //通過表格當前單元框所屬的record對象獲取主鍵信息。 
var html = "<button onclick=\"showDetail('"+id+"');\" style=\"border-width:1px\">詳細</button>" ; 
cell.innerHTML = html; 

在視圖模型的<<functions>>中添加 
function showDetail(id){ 
open("打開詳細信息顯示頁面的url?id="+id); 
} 

范例2： 
表格列中包含一個超級鏈接，功能:單擊查看詳細 
實現方法： 
在該列的onRefresh事件中寫入代碼 
var id = record.getValue("id"); //通過表格當前單元框所屬的record對象獲取主鍵信息。 
var html = "<a href=\"打開詳細信息顯示頁面的url?id="+id+"\">詳細</a>" ; 
cell.innerHTML = html; 

3.如何在表格的雙擊事件中打開詳細信息頁面，如detail.jsp，並傳入表格中當前行的某幾列信息 
實現表格的onRecordDBClick事件，寫入代碼： 
open("detail.jsp?param1="+dataset.getValue("field1")+"&param2="+dataset.getValue("field2")); 
以上代碼需要注意的是，我們提交給detail.jsp頁面的參數是通過dataset獲取而不是直接從表格中的列獲取，這是由於DataTable提供 了綁定功能的機制，當我們選中了表格的某一行雙擊選擇時，dataset已經自動的定位到當前行所在的dataset的record對象上，我們通過 dataset.getValue()就是獲得表格當前選擇行所屬的record對象的getValue()方法。

 

4.如何在頁面打開時，自動鎖定表格中的指定的兩列信息 
設定表格的fixedColumn為2，並在Studio設計器中調整自己需要的兩個列到DataTable的最前面，如下的配置： 
<Control id="tableEmployee" type="DataTable" dataset="datasetEmployee" showDefinedColsOnly="true" width="100%" highlightSelection="false" height="400" fixedColumn="2"> 
<Column name="married" field="married" sortable="true" rendererType="checkbox" width="40" /> 
<Column name="employee_name" field="employee_name" sortable="true" width="150" /> 
<Column name="sex" field="sex" sortable="true" dropDown="dropdownSex" align="center" width="70" editorType="radiogroup" /> 
<Column name="birthday" field="birthday" sortable="true" width="110" /> 
<Column name="salary" field="salary" sortable="true" width="150" /> 
<Column name="web" field="web" sortable="true" readOnly="true" width="160" /> 
<Column name="operation" label="操作" align="center" readOnly="true" width="180" /> 
</Control> 
就表示當前表格鎖定的列為married和employee_name. 

5.如何隱藏表格中指定列 
雖然表格中的列提供了visible屬性，如果我們將它設定為false該列將自動隱藏。 
我們建議的最好方式是直接刪除視圖模型中DataTable中的該列 

6.如何在客戶端動態的隱藏或則添加表格中指定的列 
方法一: 
DataTable提供了removeColumn方法用於動態刪除列，實現代碼如下： 
table1.removeColumn("這里填入你想要隱藏的列的name"); 
table1.refresh();//刷新表格，使新的設定生效 
方法二： 
DataTable提供getColumn方法獲得表格中指定列對象。 
var column = table1.getColumn("employee_name"); 
column.setVisible(false); //設定該列對象的visible屬性為false,用以隱藏該列 
table1.refresh();//刷新表格，使新的設定生效 
方法三： 
利用DataTable的addColumn屬性動態的添加列 
var column = table1.addColumn("employee_name"); 
column.setField("employee_name");//設定該列綁定到記錄集合的employee_name字段 
table1.setColumnIndex(column,0);//設定該列在表格中的位置 
table1.refresh();//刷新表格，使新的設定生效

 

7.如何在表格中顯示圖片 
DataTable中的每一個表格框在初始化的以及數據更新的時候都會觸發表格中column對象的onRefresh事件，由該事件負責向表格中的 cell中寫入顯示的信息，利用這個機制。我們可以在表格中需要顯示圖片的column中的onRefresh事件中加入如下的代碼： 
cell.innerHTML = "<img src='指定你要顯示的圖片的資源路徑'>"; 
如： 
cell.innerHTML = "<img src='images/man.gif'>"; 
當然了，很多情況下我們的圖片是儲存到文件服務器或則數據庫中，而不是上面例子中圖片存儲到war包下。 
那么我們就可以修改src的url路徑為一個servlet,並且傳入表格中當前記錄的其它字段信息，以便后台根據關鍵字獲得正確的圖片文件。如： 
cell.innerHTML = "<img src='photodownload?employeeId="+record.getValue("employee_id")+"'>"; 
隨后我們可以在服務器端新增一個servlet對象。 
web.xml中配置為： 
<servlet> 
<servlet-name>photodownload</servlet-name> 
<servlet-class>sample.control.Photodownload</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>photodownload</servlet-name> 
<url-pattern>/photodownload</url-pattern> 
</servlet-mapping> 
Servlet的定義為 
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
String employeeId = request.getParameter("employeeId"); 
InputStream in = getDownloadFileInputStream(employeeId); //根據employeeId獲取要輸出文件的文件流對象 
if (in != null) { 
OutputStream out = response.getOutputStream(); 
try { 
byte[] buffer = new byte[2048]; 
int len = in.read(buffer); 
while (len != -1) { 
out.write(buffer, 0, len); 
len = in.read(buffer); 
} 
out.flush(); 
} 
catch (Exception ex) { 
/** @todo 
* to avoid "java.net.SocketException: Connection reset by peer: socket write error" 
*/ 
} 
finally { 
in.close(); 
out.close(); 
} 
} 

其中getDownloadFileInputStream是需要開發人員自定義的函數，主要功能是通過employeeId獲取一個文件流對象，開發人員可根據具體業務需求決定從文件服務器獲得文件還是數據庫獲得文件。 
以下摘抄一段oracle獲取數據庫文件流的代碼： 
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
String employeeId = request.getParameter("employeeId"); 
Connection con = getConnection();//獲取connection 
con.setAutoCommit(false); 
Statement st = con.createStatement(); 
ResultSet rs = st.executeQuery( 
"select fileName, contents from BLOBIMG where id='" + employeeId + "' "); 

if (rs.next()) { 
String fileName = rs.getString("fileName"); 
oracle.sql.BLOB blob = (oracle.sql.BLOB)rs.getBlob(1); 
InputStream ins = blob.getBinaryStream(); 
response.setContentType("application/unknown"); 
response.addHeader("Content-Disposition", 
"attachment; filename=" + fileName); 
OutputStream outStream = response.getOutputStream(); 
byte[] bytes = new byte[1024]; 
int len = 0; 
while ( (len = ins.read(bytes)) != -1) { 
outStream.write(bytes, 0, len); 
} 
ins.close(); 
outStream.close(); 
outStream = null; 
con.commit(); 
con.close(); 
} 
}

 

8.如何使用表格的匯總行 
a.視圖模型中設定表格的showFooter屬性為true; 
b.設定表格綁定的數據集中需要作匯總的字段的supportsSum為true; 

根據這個設置，dataset會自動的計算該字段的和，並顯示在表格的統計列中。通過該種方式設置的統計值會自動根據表格中統計字段的值變化而重新統計和。並刷新； 

后記： 
合計列數值的格式化定義： 
實現column的onFooterRefresh事件,代碼如： 
cell.innerHTML="<font color='red'>"+value+"</font>";//value為數據集的統計值，datatable調用該事件時，會先自動計算出這個合計值。 
return false; 

合計數值之前的一列顯示一個匯總項說明： 
設置合計列之前的一列（Column）的footValue屬性(在xml中直接指定最為簡潔) 

9.如何自定義表格的CSS風格 
默認情況下DataTable的CSS風格是通過doradohome資源目錄下（dorado項目中對應的是home）\smartweb\v2\skins\default\skin.css 
主要屬性有： 
/*數據表格*/ 
.DataTable { 
 
} 
/*數據頭*/ 
.DataTable .HeaderGrid { 
color: #405368; 
border-width: 1; 
border-color: #C5D9E8; 
border-style: solid; 
border-collapse: collapse; 
table-layout: fixed; 
} 
/*數據頭激活單元格*/ 
.DataTable .HeaderGrid .HotCell { 
background-position-y: 100%; 
background-image: url(${SkinRoot}/datatable_header_hot.gif); 
} 
/*統計欄*/ 
.DataTable .FooterGrid { 
background-color: #E1EAF1; 
border-width: 1; 
border-color: #C5D9E8; 
border-style: solid; 
border-collapse: collapse; 
table-layout: fixed; 
} 
/*鎖定列的數據表格體*/ 
.DataTable .FixedDataGrid { 
background-color: #EDF2F6; 
border-width: 1; 
border-color: #C5D9E8; 
border-style: solid; 
border-collapse: collapse; 
table-layout: fixed; 
} 
/*鎖定列的數據表格體的行指示器*/ 
.DataTable .FixedDataGrid .Indicator { 
background-color: #E6EDF2; 
} 
/*鎖定列數據表格體的數據行*/ 
.DataTable .FixedDataGrid .Row { 
} 

/*數據表格體*/ 
.DataTable .DataGrid {
background-color: #F5F7F9; 
border-width: 1; 
border-color: #C5D9E8; 
border-style: solid; 
border-collapse: collapse; 
} 
/*數據表格體的數據行*/ 
.DataTable .DataGrid .Row { 
} 
/*數據表格體的當前激活行*/ 
.DataTable .DataGrid .CurrentRow { 
background-color: #B7F39B; 
} 
通過修改這些css配置，我們就可以修改表格的默認風格。

 

10.如何設定表格列的只讀屬性 
a.(推薦)設定表格列綁定的field的readOnly 
b.設定column本身的readOnly屬性 

11.如何動態設定表格行/列的只讀特性 
表格中希望根據表格中某一列的數據動態決定該行是否可編輯。 
在dataset的afterScroll方法中添加代碼： 
var flag = dataset.getValue("flag");//獲取用於判斷的關鍵字段的值 
if (flag==true) 
datasetEmployee.setReadOnly(true);//設定dataset的狀態為不可編輯 
else 
datasetEmployee.setReadOnly(false);//設定dataset的狀態為可編輯 

使用技巧說明： 
該處會讓所有初次使用的人感到迷惑不解 

a.為什么不是設定表格中的數據而是設定dataset的readOnly？ 
datatable說：很抱歉，我的信息都是dataset管理的。同樣狀態也由dataset管理。 

b.為什么是設定整個dataset的只讀屬性而不是設定某一個record的只讀屬性？ 
dataset說：很是抱歉，雖然我有record對象，但是我的record對象不支持只讀屬性的設定。 

這樣我們所有的重擔都落到dataset上了，興好dataset找到它的cursor兄弟。cursor說：反正頁面上所有元素顯示的值都是由我決定 的。當dataset的readOnly為true時,這些元素也不可編輯，所以你直接在我(cussor)進行定位時設定dataset的只讀狀態設 定。於是dataset通過afterScroll方法進行只讀狀態的設定。 

后傳： 
有人提出新的要求，動態根據字段的值決定某些其它字段的只讀屬性： 
datasetEmployee.setFieldReadOnly("要設定字段的name",true/false); 
tableEmployee.getColumn("dept_id").setReadOnly(true/false); 
他們都支持動態設定。

 

12.如何設定表格讓它變為不可編輯 
a.(推薦)設定表格綁定數據集的readOnly屬性,這種設定方法能使所有綁定到該數據集的的組件處於不可編輯狀態; 
b.設定表格本身的readOnly屬性; 

13.如何單擊表格列中，出現一個下拉選擇界面 
設定表格列綁定的field的dropDown屬性，綁定到本視圖模型定義好的dropdown對象。 

14.如何禁止table中單擊表格列頭，表格中數據自動排序的功能 
該功能為dataTable默認集成的功能，如果想禁止，設定表格column的sortable為false 

15.Column中editorType與rendererType的區別 
editorType是在激活單元格做編輯時才起作用； 
redererType為數據渲染器，用於以設定的渲染方式顯示表格單元格的數據； 

16.readOnly與editable的區別 
editable為true時:表格不可編輯,但可以新增和刪除記錄; 
readOnly為true時:表格不可編輯,也無法新增和刪除記錄;