wavemaker-grid

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 

須於 start 加入:

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

datagrid

•    dojo 

dojox.grid. dataGrid
tooltip