這一功能還是練習記錄一下:
結果畫面:
這是基本的操作設定:
選了權限類別後,可以顯示資料 & 在頁上直接編輯 儲存。
=======
這是同一個頁面,同一個jqGird ,查詢後,特別處理設定值的部份,
讓它可以選擇「單位」/「人員」資訊。
(而單位/人員是 共用的元件資訊~~~)
==========================================
(當初在處理:新增時可以讓[帳號/設定值]可以改;而異動時只可以改[設定值],這段也花了不少功夫)
一開始的想法,是要試看看jqGrid 的 custom cell 可以到什麼什麼地步?
參考了這些文章:
Custom template column:http://goo.gl/LFG42L
jqgrid edittype:http://goo.gl/yzdVge
http://goo.gl/2HsWW8
而這定了了jqgrid 的colModel:
關鍵在:
而這邊,先從試試,怎麼取到cell 的原始資料,
而我的JSON格式為:
{
units: ["120102", "620110","220100"],
members: ["910129", "910370"]
}
先試怎麼拿這資料,再一步步來處理這些呈現資訊。
=================================
先拿最基本的格式來處理:(即原本的:點選後可以文字編輯[設定值])
這是試到最後的jqgrid 的 function :
1. 當你 呈現時有 format 過,一定要做[UnFormat] 的動作。
2. 因為要做成之後可以「共用」的地步,所以我用 GetExecuteObj() 來決定我要用什麼方式呈現。
定義Obj 的class (示意的javascript 版)
所以我最後定義出:
//預設的物件定義 =>呈現 基本的 textbox 處理
var DefaultObj = { ...}
//組織人員物件 =>呈現組織&人員 檢視/編輯 的處理
var MemberUnitObj = {...}
======================================
而其中,也試試如何 load template 資料到 cell 裡,一樣用基本的試驗。
若可以 把tempate 內的textbox 做呈現的話,那就可以試著載入其它不同的common controller
在這段程式裡就可以看出:
//我的template
//我的js 處理:
EditFmt: function (value, options) {
var div = $("#template_input").clone();
div.show();
var myinput = $(div).find("#fvalue");
myinput.val(value);
return div;
},
我可以設定 html 內的元件完成後,再把它放到grid 裡,
至於為何要用「clone()」,因為若只用同一個,他操作過一次後就會不見了~~~~
而在更復雜的「單位人員」元件裡,除了 clone()後,我還要給html內的元件 unique ID
而在編輯時,我 單從它event 的參數,我無法直覺的知道 unique ID
所以 unique ID 就存在全域變數裡以便處理。
================================
在 jqgrid colModel下的設定,關鍵在這些:
formatter: jqGridFormatter, //jqgrid 的display處理
unformat: jqGridUnFormatter, //要再把它unformat 拿到原始資料才可以。
edittype: 'custom',
editoptions: { custom_element: jqGridEditElement, custom_value: jqGridEditValue }
formatter/unformat:
一開始就用簡單的測試,在formatter時,在data 前面加個符號
就因為一開始沒有處理 unformat ,所以呈現時會越加越多~~~~~
而
custom_element://你要在edit mode 時要呈現什麼樣子
custom_value: //這個要定義這個cell 的"值"要如何取得~~~這個function 不知為何,沒有event觸發它 ,所以我在儲存時,要自已想辦法 call 此 function .
=================================
之間有一個主題:我要預設勾選 它選擇的 tree 資料:
在設定單位值時,要等到它tree load 完後才可以做設定,
因一開始,資料有時有勾選到,有時又沒有帶到資料,本想放棄的~~但還是要找出原因來
關鍵值:
$("#" + ucID + "_dynatree").dynatree("getRoot")._isLoading //判斷tree load完成了沒?
而我用 recall 的方式,來達到「一定要」設定到的功能。
用 setTimeout () 再一次呼叫自已~~
好在解決這問題,讓操作起來較順手~~~~
===============================================
結論:
程式一陣子沒寫,對於相關的jquery 寫法都陌生了,而透過 google 來找一些資料處理。
這次這樣一步步的實驗,將大方向切成一個個小目標達成。
也透過這樣的評估,來判斷「這條路」的可行性!
在當我完成心裡所想的這架構時,那種感覺,也算是程式開發人員的「小確幸」吧!
我喜歡這樣開發程式完成後所帶來的感覺!
所以,這份記錄,是記錄下這次的歷程,詳細的code ,以後要看再來翻翻。
而且盡量保留住那份心情。
(THE END)
結果畫面:
這是基本的操作設定:
選了權限類別後,可以顯示資料 & 在頁上直接編輯 儲存。
=======
這是同一個頁面,同一個jqGird ,查詢後,特別處理設定值的部份,
讓它可以選擇「單位」/「人員」資訊。
(而單位/人員是 共用的元件資訊~~~)
==========================================
(當初在處理:新增時可以讓[帳號/設定值]可以改;而異動時只可以改[設定值],這段也花了不少功夫)
一開始的想法,是要試看看jqGrid 的 custom cell 可以到什麼什麼地步?
參考了這些文章:
Custom template column:http://goo.gl/LFG42L
jqgrid edittype:http://goo.gl/yzdVge
http://goo.gl/2HsWW8
而這定了了jqgrid 的colModel:
colModel: [ { name: "", hidden: true },@*指定它是unique row no*@ { name: "ConfigType", hidden: true }, { name: "iaccount", hidden: true }, { name: "PersonalAccessConfigTypeDisplay", index: "PersonalAccessConfigTypeDisplay", width: 100 }, { name: "iaccountDisplay", index: "iaccountDisplay", width: 100, editable: true, editrules: { required: true } }, { name: "fvalue", index: "fvalue", formatter: jqGridFormatter, unformat: jqGridUnFormatter, editable: true, edittype: 'custom', editoptions: { custom_element: jqGridEditElement, custom_value: jqGridEditValue } } ],
關鍵在:
edittype: 'custom',editoptions: { custom_element: jqGridEditElement, custom_value: jqGridEditValue
而這邊,先從試試,怎麼取到cell 的原始資料,
而我的JSON格式為:
{
units: ["120102", "620110","220100"],
members: ["910129", "910370"]
}
先試怎麼拿這資料,再一步步來處理這些呈現資訊。
=================================
先拿最基本的格式來處理:(即原本的:點選後可以文字編輯[設定值])
//fvalue顯示格式處理 function jqGridFormatter(cellvalue, options, rowObject) { return GetExecuteObj().DisplayFmt(cellvalue, options, rowObject); } //fvalue顯示格式Un處理 function jqGridUnFormatter(cellvalue, options, cell) { return GetExecuteObj().DisplayUnFmt(cellvalue, options, cell); } //fvalue編輯時的呈現 function jqGridEditElement(value, options) { return GetExecuteObj().EditFmt(value, options); } //fvalue編輯時的取值 function jqGridEditValue(elem, operation, value) { return GetExecuteObj().EditValueFmt(elem, operation, value); }
這是試到最後的jqgrid 的 function :
1. 當你 呈現時有 format 過,一定要做[UnFormat] 的動作。
2. 因為要做成之後可以「共用」的地步,所以我用 GetExecuteObj() 來決定我要用什麼方式呈現。
定義Obj 的class (示意的javascript 版)
//預設的物件定義 var DefaultObj = { //fvalue顯示格式處理 DisplayFmt: function (cellvalue, options, rowObject) { var value = rowObject["fvalue"]; return value != null ? value : "";//Access row data:http://goo.gl/r3aw7q }, //fvalue顯示格式Un處理 DisplayUnFmt: function (cellvalue, options, cell) { return cellvalue;//.replace("my", ""); }, //fvalue編輯時的呈現 EditFmt: function (value, options) { var div = $("#template_input").clone(); div.show(); var myinput = $(div).find("#fvalue"); myinput.val(value); return div; }, //fvalue編輯時的取值 EditValueFmt: function (elem, operation, value) { var div = $(elem); var myinput = $(div).find("#fvalue"); alert(myinput.val()); if (operation === 'get') { return myinput.val(); } else if (operation === 'set') { myinput.val(value); } } }
所以我最後定義出:
//預設的物件定義 =>呈現 基本的 textbox 處理
var DefaultObj = { ...}
//組織人員物件 =>呈現組織&人員 檢視/編輯 的處理
var MemberUnitObj = {...}
======================================
而其中,也試試如何 load template 資料到 cell 裡,一樣用基本的試驗。
若可以 把tempate 內的textbox 做呈現的話,那就可以試著載入其它不同的common controller
在這段程式裡就可以看出:
//我的template
//我的js 處理:
EditFmt: function (value, options) {
var div = $("#template_input").clone();
div.show();
var myinput = $(div).find("#fvalue");
myinput.val(value);
return div;
},
我可以設定 html 內的元件完成後,再把它放到grid 裡,
至於為何要用「clone()」,因為若只用同一個,他操作過一次後就會不見了~~~~
而在更復雜的「單位人員」元件裡,除了 clone()後,我還要給html內的元件 unique ID
而在編輯時,我 單從它event 的參數,我無法直覺的知道 unique ID
所以 unique ID 就存在全域變數裡以便處理。
================================
在 jqgrid colModel下的設定,關鍵在這些:
formatter: jqGridFormatter, //jqgrid 的display處理
unformat: jqGridUnFormatter, //要再把它unformat 拿到原始資料才可以。
edittype: 'custom',
editoptions: { custom_element: jqGridEditElement, custom_value: jqGridEditValue }
formatter/unformat:
一開始就用簡單的測試,在formatter時,在data 前面加個符號
就因為一開始沒有處理 unformat ,所以呈現時會越加越多~~~~~
而
custom_element://你要在edit mode 時要呈現什麼樣子
custom_value: //這個要定義這個cell 的"值"要如何取得~~~這個function 不知為何,沒有event觸發它 ,所以我在儲存時,要自已想辦法 call 此 function .
=================================
之間有一個主題:我要預設勾選 它選擇的 tree 資料:
在設定單位值時,要等到它tree load 完後才可以做設定,
因一開始,資料有時有勾選到,有時又沒有帶到資料,本想放棄的~~但還是要找出原因來
.fn.set_selUnits_by_unitGUIDs = function (unitGUIDs) { var ucID = $(this).attr("id"); $(this).value(unitGUIDs); //如果有設定值則預設checked var unitguids = $("#" + ucID).value(); if (unitguids != null && unitguids != "") { var guidarray = unitguids.split(","); //判斷是否已載入,若未載入則reload if ($("#" + ucID + "_dynatree").dynatree("getRoot")._isLoading) { setTimeout(function () { $("#" + ucID).set_selUnits_by_unitGUIDs(unitGUIDs) }, 100); return; } var rootNode = $("#" + ucID + "_dynatree").dynatree("getRoot"); rootNode.visit(function (node) { if ($.inArray(node.data.key, guidarray) >= 0) { node.select(true); } }); $("#" + ucID).selUnitsDialog_confirmClick("", "", null, 1); } //如果有設定值則預設checked END }
關鍵值:
$("#" + ucID + "_dynatree").dynatree("getRoot")._isLoading //判斷tree load完成了沒?
而我用 recall 的方式,來達到「一定要」設定到的功能。
用 setTimeout () 再一次呼叫自已~~
好在解決這問題,讓操作起來較順手~~~~
===============================================
結論:
程式一陣子沒寫,對於相關的jquery 寫法都陌生了,而透過 google 來找一些資料處理。
這次這樣一步步的實驗,將大方向切成一個個小目標達成。
也透過這樣的評估,來判斷「這條路」的可行性!
在當我完成心裡所想的這架構時,那種感覺,也算是程式開發人員的「小確幸」吧!
我喜歡這樣開發程式完成後所帶來的感覺!
所以,這份記錄,是記錄下這次的歷程,詳細的code ,以後要看再來翻翻。
而且盡量保留住那份心情。
(THE END)
0 意見 :
張貼留言