grid 是網頁設計上必要的元件，很可惜 wavemaker 中的grid 無法如 extjs 中的friendly 但是對一個內部表單系統 他應該可以滿足大多數對ajax 架構上的需求
基本設定:
對grid 設定 主要 是 dataSet 的部分決定 相關欄位，官方幾乎都是 使用 liveVariale 換句話說對官方來說 只要從 資料庫帶出相關資訊就可以 使用，但是對企業系統，我們遇到的幾乎要 '不能跳'與同一頁完成所有的事 我還是使用 Type 跟 Variable 進行其設定方式 可以看 官網 :
對api 有的 就不須在此 說明
相關event
- grid :
GridClick: function(inSender, evt, selectedItem, rowId, fieldId, rowNode, cellNode){
var myselect = inSender.getCell(inSender.getSelectedIndex(), 'customField'); selectedItem.getData().empid ==>取 empid 的值
} - row:
ComButClick: function(inSender) {
// 如使用 inSender 不如就 直接使用 對datagrid 已經有 的api
var selrow = this.inComGrid.getSelectedIndex();
}
- cell :
CellDblClick: function(inSender, evt, selectedItem, rowId, fieldId, rowNode, cellNode) {
var mydata = selectedItem.getData(); // 僅可抓到 view 的物件
var userid = mydata.attperson;
var filename = mydata.attfilename;
}
格式相關 :
- 將顏色與致行改變
dojoGrid1NodeFormat: function( inValue, rowId, cellId, cellField, cellObj, rowObj) { cellObj.customStyles.push("background: #808080;color:yellow;font-size:10pt;");
}- 輸入跟輸出轉值:
Grid1ButtonFormat: function( inValue, rowId, cellId, cellField, cellObj, rowObj){
if (rowObj.node== this.approveformVar.data.currentNode){ return '現有簽核'; }
else{ return inValue; }
}- 放置圖片
dojoGrid1NodeFormat: function( inValue, rowId, cellId, cellField, cellObj, rowObj){
reutrn '<img src ="resources/images/att.png" height="16">'
} - tooltip
dojo.require("dijit.Tooltip");
dojo.connect(this.dojoGrid1.dojoObj, "onCellMouseOver",this, 'showTooltip');
dojo.connect(this.dojoGrid1.dojoObj, "onCellMouseOut",this, 'hideTooltip');
製作 showToolTip
showTooltip :function(e) {
var msg;
if (e.rowIndex < 0) { msg = e.cell.name; }
else {
var item = e.grid.getItem(e.rowIndex);
var cellfiled= e.cell.field;//對欄位名進行讀取
if (cellfiled== 'mycomment' || cellfiled== 'mysuggest')
msg = e.grid.store.getValue(item, e.cell.field); //對欄位值進行讀取
else if (cellfiled== 'customField'){
var myatt = e.grid.store.getValue(item, 'attfilename');
var paper =e.grid.store.getValue(item, 'attpaper');
if (myatt.length >0 || paper.length >0)
msg ='';
if (myatt.length >0)
msg+='附件:'+myatt+'
';
if (paper.length >0)
msg+='紙本:'+paper+'\n';
}
}
if (msg) {
dijit.showTooltip(msg, e.cellNode); //會產生在後面
//dijit.showTooltip(msg, e.cellNode, ["below", "above", "after", "before"]);
}
}
製作 hideTooltip
hideTooltip : function(e) {
dijit.hideTooltip(e.cellNode);
}
- 動態隱藏欄位:
this.dojoGrid1.dojoObj.layout.setColumnVisibility(8, false);
- 雙擊下載檔案:
基本上建議 使用 flashUpload , 並製作 download (String page name) 的功能
在 ServiceeVariable 中 勾選 download ，所以於設定 update 時 系統會自動 帶入
但 如裝在 Window2003 可能會有 亂碼問題 ，所以 必須進行 檔案名稱轉型 其程式
如下:
returnname = new String(returnname.getBytes("big5"), "ISO-8859-1");
相關連結 :
- wavemaker
- dojo
tooltip
