Javascript Dialog 自訂輸入視窗 (一) 建立自訂物件、物件序列化
寫完 Gridview 後,想了一下還是把輸入視窗也寫一下好了,於是先構思一下,結果需要的一些觀念及邏輯,已經不是入門了,所以之後寫的內容會開始比較難懂,有問題的要麻煩自己去搜尋一下,這邊就不詳細解說為什麼會這樣了.
以下為需要的步驟
- 建立自訂物件、物件序列化
- 建立自訂物件 - 輸入屬性
- 自訂物件序列化
- HTML規劃輸入視窗樣式
- CSS 樣式
- HTML 格式
- 使用自訂物件產生輸入視窗
- 產生基本的輸入視窗
- 將物件放入產生的輸入視窗
- 建立輸入按鈕事件及檢查資料
- 建立輸入按鈕事件
- 建立取消事件程式碼
- 建立清除事件程式碼
- 建立檢查事件程式碼
- 回傳資料事件及處理
一、建立自訂物件 - 輸入屬性
首先要入的資料,基本上必須要先知道,輸入的方式及輸入的選項,以下是範例需要的基本內容
//基本屬性
class classProperty_Detail {
constructor (title,input_type,option_data,option_label,default_value){
this.title = title;
this.input_type = input_type;
this.option_data = option_data;
this.option_label = option_label;
this.default_value = default_value;
}
}
Javascript 建立物件的基本語法
- 使用 class 命名物件名稱
- 使用 constructor 設定傳入的資料
- 使用 this 將傳入的變數變成class內可用的全區域變數
- this 的變數不能監聽內使用,需要額外傳入才可以使用
二、自訂物件序列化
建立好輸入的屬性後,因為會有多個輸入選項,所以接下來就是進行序列化的動作.序列化的方式,最簡單的方式,就是先建立一個空的陣列物件,然後再用 push 填入物件,主要方式如下
//設定要使用的輸入型態及內容
let input_1 = new classProperty_Detail("輸入框","text","","","預設資料");
let input_2 = new classProperty_Detail("單一選擇","radio",["01","02","03"],["北區","中區","南區"],["02"]);
let input_3 = new classProperty_Detail("選核方塊","checkbox",["A","M","D","I","P"],["新增","修改","刪除","執行","列印"],["M","I"]);
let input_4 = new classProperty_Detail("下拉式選單","select",["001","002","003"],["管理者","組長","組員"],["002"]);
//序列化載入
//let step2 = new classProperty();
let step2 = [];
step2.push(input_1);
step2.push(input_2);
step2.push(input_3);
step2.push(input_4);
實際的範例,這邊是再用一個 class 包起來,程式碼如下
//序列化
class classProperty {
constructor(){
this.myProperty_Detail = [];
}
add(myProperty_Detail){
this.myProperty_Detail.push(myProperty_Detail);
}
getLenght(){
return this.myProperty_Detail.length;
}
getStringify(){
let strReturn = JSON.stringify(this.myProperty_Detail);
return strReturn;
}
getTitle(index){
let strReturn = "";
try {
strReturn = this.myProperty_Detail[index].title;
} catch (error) {
strReturn = error;
}
return strReturn;
}
getInput_type(index){
let strReturn = "";
try {
strReturn = this.myProperty_Detail[index].input_type;
} catch (error) {
strReturn = error;
}
return strReturn;
}
getOption_data(index){
let strReturn = "";
try {
strReturn = this.myProperty_Detail[index].option_data;
} catch (error) {
strReturn = error;
}
return strReturn;
}
getOption_label(index){
let strReturn = "";
try {
strReturn = this.myProperty_Detail[index].option_label;
} catch (error) {
strReturn = error;
}
return strReturn;
}
getDefault_value(index){
let strReturn = "";
try {
strReturn = this.myProperty_Detail[index].default_value;
} catch (error) {
strReturn = error;
}
return strReturn;
}
}
對於要取出的資料,再使用 try catch 來避免直接取出資料產生異常的錯誤.
然後再把建立的方式由陣列改為物件,方式如下
//設定要使用的輸入型態及內容
let input_1 = new classProperty_Detail("輸入框","text","","","預設資料");
let input_2 = new classProperty_Detail("單一選擇","radio",["01","02","03"],["北區","中區","南區"],["02"]);
let input_3 = new classProperty_Detail("選核方塊","checkbox",["A","M","D","I","P"],["新增","修改","刪除","執行","列印"],["M","I"]);
let input_4 = new classProperty_Detail("下拉式選單","select",["001","002","003"],["管理者","組長","組員"],["002"]);
//序列化載入
let step2 = new classProperty();
step2.add(input_1);
step2.add(input_2);
step2.add(input_3);
step2.add(input_4);
剩下來的就是偵錯了,依序判斷輸入的資料是否正確,完整的程式碼在下方,請用檢視網頁原始程式碼的方式將程式擷取回去研究
留言
張貼留言