Dorado中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 {
background-color: #F5F7F9;
}
/*數據頭*/
.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時:表格不可編輯,也沒法新增和刪除記錄;