Javascript Table 模擬 GridView (五) 實戰演練

 通過以上步驟,接下來便是實際給其他人引用的做法,

1. 將寫好的 script 改成物件(class)寫法
2. 使用 class 標籤加上 windows.onload 的方式,載入寫好的物件
3. 在 html 引用時,傳入對應的標籤資料
4. 實際引用

以下是程式的片段

一、將寫好的 script 改成物件 (class) 寫法

建立好 class 要傳入的標籤資料,像是傳入的 input_id,還有傳出的 output_id,像這些都要由物件來讀取使用,當然在這個實際使用的範例也加入了專案要用的一些自訂標籤,這邊就不多做敘述.

            class classJSGridView {

                constructor(myID,

                            input_id,

                            output_id,

                            grid_cols_name,

                            control_align_left,

                            button_add,

                            button_modify,

                            button_delete,

                            freeze_rows

                            ) {

            ....

            ....

二、使用 class 標籤加上 window.onload 的方式,載入寫好的物件

1. window.load 監聽 classname
2. 取得然後元素後,讀取自訂標籤
3. 建立新物件 classJSGridView

這邊要注意的是,自訂標籤如果沒有寫入,是回傳字串的 "null" ,所以要用字串的判斷才可以.

            //頁面載入後開始取得資料

            window.addEventListener(

                "load",

                function(){

                    console.log("window onload");

                    let objJSGridview = document.getElementsByClassName("gridview_20221003");

                    if (objJSGridview != null){

                        for (let Cindex=0;Cindex<objJSGridview.length;Cindex++){

                            //取得對應的 class 屬性,class 屬性要自己在 html 加入

                            let input_id = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("input_id"));

                            let output_id = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("output_id"));

                            let grid_cols_name = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("grid_cols_name"));

                            let control_align_left = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("control_align_left"));

                            let button_add = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("button_add"));

                            let button_modify = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("button_modify"));

                            let button_delete = ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("button_delete"));

                            let freeze_rows = Number(ReplaceNull_20220901(objJSGridview[Cindex].

getAttribute("freeze_rows")));

                            control_align_left.toLocaleLowerCase();

                            button_add.toLocaleLowerCase();

                            button_modify.toLocaleLowerCase();

                            button_delete.toLocaleLowerCase();

                            //產生JS Gridview

                            let bJSGridView = new classJSGridView(objJSGridview[Cindex].id,

                                                                    input_id,

                                                                    output_id,

                                                                    grid_cols_name,

                                                                    control_align_left,

                                                                    button_add,

                                                                    button_modify,

                                                                    button_delete,

                                                                    freeze_rows

                                                                    );

                            console.log("window onload finish");

                        }

                    }

                },

                false

            )

            var ReplaceNull_20220901 = function (strFieldName = "") {

                let strReturn = ""

                if (strFieldName != null) {

                    if (strFieldName != 'null'){

                        strReturn = strFieldName.trim();

                    }

                }

                return strReturn;

            }

三、在 html 引用時,傳入對應的標籤資料

最後在引用的時候,提供必要的輸入及輸出,以及要使用的樣式就可以了.

        <p>利用 CSS 將狀態欄位隱藏</p>

        <div>

            <input type="text" id="data_input1" value="[[&quot;delete482_1&quot;,&quot;modify69&quot;

,&quot;modify50&quot;],[&quot;delete165_2&quot;,&quot;modify11&quot;,&quot;modify19&quot;]]"/>

            <input type="text" id="data_output1" value=""/>

            <div class = "gridview_20221003"

                id="JSGV001"

                input_id="data_input1"

                output_id="data_output1"

                control_align_left="true"

                button_add="true"

                button_modify="true"

                button_delete="true"

                freeze_rows = 0

                grid_cols_name="第一個欄位;第二個欄位;第三個欄位;第四個欄位"

                />

        </div>

四、實際引用

以下為實際的引用範例,如果有不要用的欄位可以使用 CSS 隱藏

利用 CSS 將狀態欄位隱藏

---

將功能鍵移動到右方,然後只能修改傳入的資料

---

固定只能編輯10筆資料,刪除為清空資料