Javascript Table 模擬 GridView (三) 自動匯出、匯入
經過上兩篇的實作,一個 Gridview 的基本功能應該都能正常運作了,接下來會有一個問題便是要如何取得 Gridview 內的資料 , 以及是否可以事先將資料傳入到 Gridview 內 ? 接下來的步驟將依序說明如何自動匯出及匯入
- 自動匯出 Gridview 資料
- 自動匯入 Gridview 資料
一、自動匯出 Gridview 資料
要自動匯出資料的話,必須要有一個當作接收的地方,所以先在 html 上面新增一個要接收的 input
<br><br><br>
<!-- 設定輸出資料欄位 -->
<div><label>輸出欄位</label><input id = "JSGridview_Output" type = "text" value=""/></div>
接下來便開始寫接收資料的| script ,要注意的事項都寫在程式中,其中比較特別的是 JSON 的用法, 要將陣列直接輸出字串的話,可以直接使用 JSON.stringify(陣列變數);
//取得資料
function getData(){
//取得要控制的 Table , 這個範例為 JSGridview_table
let tbodyRef = document.getElementById("JSGridview_table").getElementsByTagName("tbody")[0];
//有陣列資料才需要動作
if (tbodyRef.rows.length > 0){
//先設定一維陣列
let strDataArray = new Array(tbodyRef.rows.length-1);
let strLog = "";
//1.先取得 Row
for (let intRow = 0 ; intRow < tbodyRef.rows.length; intRow++){
//設定二維陣列 (扣除按鈕2格)
strDataArray[intRow] = new Array(tbodyRef.rows[intRow].cells.length - 3);
//2.再取得 cell (扣除按鈕2格)
for (let intCell = 0; intCell < tbodyRef.rows[intRow].cells.length - 2 ; intCell ++){
//取得資料
strDataArray[intRow][intCell] = tbodyRef.rows[intRow].cells[intCell].innerHTML;
strLog += "[" + tbodyRef.rows[intRow].cells[intCell].innerHTML + "]";
}
strLog += "\n";
}
console.log(strLog);
//取得資料
let JSGridview_Output = document.getElementById("JSGridview_Output");
//將陣列資料使用 JSON 傳出
JSGridview_Output.value = JSON.stringify(strDataArray);
} else {
let JSGridview_Output = document.getElementById("JSGridview_Output");
JSGridview_Output.value = "";
}
}
好了,先將取得資料的 script 寫好後,接下來就在 addRow();、btnDelete監聽click事件、btnModify監聽click事件 這三個地方的結尾處加上 getData(); 就完成自動匯出功能了,其他程式如 ASP.net 僅要在存檔時取出 input 資料即可.
以下是執行時的畫面
二、自動匯入 Gridview 資料
如果要再程式一開就先將資料填入到 GridView 時,基本上做法是一樣的只是反過來而已.
首先一樣先在 html 新增一個要傳入資料的 input ,在這個範例中先直接將要顯示的二維陣列資料寫入,在 html 中資料為雙引號 " 要用 " 取代.
<br><br><br>
<!-- 設定輸入資料欄位 -->
<div><label>輸入欄位</label>
<input id = "JSGridview_Input" type = "text"
value="[["delete482_1","modify69","modify50"],["delete165_2","modify11","modify19"]]"
/>
</div>
<!-- 設定輸出資料欄位 -->
<div><label>輸出欄位</label><input id = "JSGridview_Output" type = "text" value=""/></div>
然後在開始寫取出的script 之前,要先去修改原來 addRow(); 的 script ,因為要將資料填入可以直接使用這邊的程式碼,只是多加入帶入的陣列參數而已,修改後的上半段如下
//測試新增一列
function addRow(strDataArray = null){
//取得要控制的 Table , 這個範例為 JSGridview_table
let tbodyRef = document.getElementById("JSGridview_table").getElementsByTagName("tbody")[0];
//產生要新增的物件, insertRow() 不填索引則為最後一筆
let newRow = tbodyRef.insertRow();
//取得總共的資料數量
let row_count = tbodyRef.rows.length;
//刪除按鈕加上 id 並監聽 , id 避免重複,所以加上亂數
let delete_id = "delete" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "_" + row_count;
let modify_id = "modify" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "_" + row_count;
//要產生的 明細
let strHTML = "";
if (strDataArray != null){
strHTML += "<td>" + strDataArray[0] + "</td>";
strHTML += "<td>" + strDataArray[1] + "</td>";
strHTML += "<td>" + strDataArray[2] + "</td>";
} else {
strHTML += "<td>" + delete_id + "</td>";
strHTML += "<td></td>";
strHTML += "<td></td>";
}
strHTML += "<td><button id = '" + modify_id + "''>修改</button></td>";
strHTML += "<td><button id = '" + delete_id + "'>刪除</button></td>";
newRow.innerHTML = strHTML;
//取得資料
getData();
... ...
修改後的 addRow 要注意的是增加傳入值 strDataArray = null , 然後產生 <td> 的時候 , 判斷 strDataArray 是否有資料 , 如果有資料則新增的時候 , 就將資料直接帶入.
改好後,接下來才是開始寫設定 Gridview 資料的 script , 整段如下 , 然後避免傳入的資料在 JSON 分解時產生異常(通常為資料傳入不正確) , 加上 try catch 讓程式可以繼續往下執行.
//設定資料
function setDate() {
let setOK = false;
//取得傳入的資料,如果有問題就不動作
try {
let JSGridview_Input = document.getElementById("JSGridview_Input");
let strData = JSGridview_Input.value;
//分解成陣列
const strDataArray = JSON.parse(strData);
console.log (">" + strDataArray[0][0]);
for (let i = 0; i < strDataArray.length;i++){
addRow(strDataArray[i]);
}
setOK = true;
} catch (error) {
console.log ("err:" + error);
}
}
最後只要在 init(); 之後加上 setData(); 就行了
//初始化
init();
//測試新增一列
// addRow();
//新增傳入資料
setDate();
以下是執行畫面,執行時便會直接帶入資料到 Gridview ,然後程式又會直接產生結果到輸出欄位.
如果匯出的內容要在 ASP.net 上使用的話,可以參考之前寫的
留言
張貼留言