WebDesign 心得綜整

2023年7月5日星期三

V120202B - 標籤列印 - HTML online 模擬標籤排版 -table

目的: V120202B - 標籤列印 - HTML online 模擬標籤排版 - <table>

處理說明: 0>[列印範圍]先以框線標出

1>利用 HTML online模擬器, 模擬標簽文字內容
HTML online : https://www.tutorialspoint.com/online_html_editor.php

--> 直接修改即可看到 HTML排版結果,不需等 VS 執行後,才看到排版結果

2>以 <div><table> 的邊線畫出範圍

3>以 style 設定範圍/邊框/顏色,

style='width: 10cm; height: 4cm;border: 5px solid green; '

4><table>邊框個別設定,邊際實線 以 cellspacing=0 , border=2px , bordercolor='blue'

5>縮小元件size <tr style='transform: scale(0.9);' ></tr>

1>*.html
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<div id='print_area' style='width: 10cm; height: 4cm; border: 5px solid green;'>
<div id='my_div' style='width: 10cm; height: 4cm;border: 3px solid yellow; font-size: 4pt;'>
<table id='my_tbl1' style='width: 10cm;' border=2px cellspacing=0 borderstyle='solid' bordercolor='blue'>
<tr>
<td width=30%>機號: A049 </td>
<td width=35%>工號: 12345678 </td>
<td width=35%>工單件號: SROPN_1 </td>
</tr>
</table>
<table id='my_tbl2' style='width:10cm;' border=2px cellspacing=0 borderstyle='solid' bordercolor='red'>
<tr style='height: 0.3cm;'>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
</tr>
<tr>
<td width=50% style='height:0.4cm'></td>
<td width=50%></td>
</tr>
<tr>
<td width=50%>名稱:TFE DRY LUBE</td>
<td width=50%>儲位2:防C</td>
</tr>
<tr>
<td width=50%>儲位1:防B</td>
<td width=50%>庫房:23#</td>
</tr>
<tr>
<td width=50%>撥料數量:4</td>
<td width=50%></td>
</tr>
</table>
<table id='my_tbl3' style='width:10cm' border=2px cellspacing=0 borderstyle='solid' bordercolor='blue'>
<tr>
<td width=50%></td>
<td width=50%>需求者:612578 楊智為 856
<br>需求地點:A08</td>
</tr>
</div>
</div>
</body>
</html>

2023年7月3日星期一

V120202B - 了解畫面 DOM的結構 – sub_panel2 -append - $

目的: V120202B- 了解畫面 DOM的結構 – sub_panel2

一.顯示[畫面元件]對應[DOM] -操作說明:

1>console.log("sub_panel2:", sub_panel2);

2>由[console]分頁 , 展開 [sub_panel2] 欄位值, 點 div sub_panel2 , 跳至 [Elements]分頁

3>[Elements]分頁點選div[sub_panel2_header], 畫面顯示該 div

二. $().append處理說明: 0> Ext 元件 panel , 實際上在 DOM 的結構分成 2 div(header, body)

1>$("#sub_panel2").append("div id=my_div_barcode xxxx") ,

會加在 body 下方看不到

1>*.js

{

xtype: 'button', text: '顯示 QrCode ', id: 'sub_QrCode_Btn',

listeners: {

click: function () {

//genQRcodeDiv("sub_panel2", "5325YET064602&test&123eee");

var Tmp_barcode_text = "5325YET064602&test&123eee";

var Tmp_QrcodeStr= "<div id='my_div_barcode' style='width: 150px; height: 150px;margin-top: 5pt;margin-left: 30pt; font-size: 6pt;' >"

+ genQRcodeStr(Tmp_barcode_text, 100, 100, true)

+ "</div>"

//$("#print_area").remove();

//var Tmp_sub_panel2 = $("#sub_panel2"); --> 會看不到條碼

var Tmp_sub_panel2 = $("#sub_panel2-innerCt"); //20230703

Tmp_sub_panel2.append(Tmp_QrcodeStr);

console.log("0 Tmp_sub_panel2:", Tmp_sub_panel2);

var pub_print_area_Str1 = "<div id='print_area' style='border: 5px solid green;'>";

Tmp_sub_panel2.append(pub_print_area_Str1);

console.log("1 Tmp_sub_panel2:", Tmp_sub_panel2);

}

2023年6月29日星期四

V120502B 1>Qrcode:二維條碼 2>Barcode:一維條碼 3>預覽列印:printThis.js 4>套件載入: centerTab.cshtml

目的: V120502B - 二維條碼列印 - 預覽列印 - printThis.js

處理說明: 1>二維條碼套件 : qrcode.js
2>一維條碼套件: JsBarcode.code39.min.js
3>預覽列印: printThis.js

4>套件放在 ..\Scripts\目錄 : 如上3檔案屬於套件的 *.js

5>centerTab.cshtml : 程式啟動時 ,必需載入如上套件檔案

1>二維條碼 : qrcode.js

2>一維條碼 : JsBarcode.code39.min

3>套件放在 ..\Scripts\目錄

4>centerTab.cshtml : 程式啟動時 ,必需載入如上套件檔案

2023年6月26日星期一

V120202E –[領料明細查詢] – 資料未正常顯示 , null.toString() --> Error - nulltoStr(rec["ITMNO]) - 將欄位值轉為 str

目的: V120202E –[領料明細查詢] – 資料未正常顯示 , null.toString() à Error

處理說明: 1> null.toString() à Error , rec["MATNR"].toString() ,
若rec["MATNR"]為 null, 則會Error
2> 先利用 rec2Str(rec) , 將 rec 的欄位值為 null , 轉成 ""

3>function DatetoStr(par_date) { //若日期為空白,則傳回 ""

if (checkisnull(par_date)) {

return "";

}

var Tmp_DateStr;

Tmp_DateStr = Ext.Date.format(new Date(par_date), 'Y/m/d');

return Tmp_DateStr;

}

1>*.js

//開啟 store;

Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {

console.log("records:", records);

if (successful) {

//設定畫面欄位值 -

np["sub_APNO"] = par_APNO;

var Tmp_url = "../../api/V120202FAPI/get_main_data";

//取得挑選資料的 dt2JSON 字串

var rtn_Str = getUrlStr(Tmp_url, np, "設定畫面資料");

console.log("rtn_Str:", rtn_Str);

if (checkRtnOK(rtn_Str)) {

var recs = Ext.decode(rtn_Str);

console.log("recs:", recs);

var rec = recs[0];

console.log("0 rec:", rec);

rec2Str(rec);

//for (key in rec) {

// var value = rec[key];

// if (checkisnull(value)) {

// rec[key] = '';

// };

//};

console.log("1 rec:", rec);

var Tmp_APNO, Tmp_MATNR, Tmp_APER, Tmp_APDT, Tmp_MPKUPP, Tmp_MPKUPDT;

var Tmp_APER_, Tmp_MPKUPP_;

Tmp_APNO = rec["APNO"].toString();

Tmp_MATNR = rec["MATNR"].toString();

Tmp_APER = rec["APER"].toString();

Tmp_APER_ = rec["APER_"].toString();

Tmp_APDT = DatetoStr(rec["APDT"], "Y/m/d");

Tmp_MPKUPP = rec["MPKUPP"].toString();

Tmp_MPKUPP_ = rec["MPKUPP_"].toString();

Tmp_MPKUPDT = DatetoStr(rec["MPKUPDT"], "Y/m/d");

Ext.getCmp('sub_APNO').setValue(Tmp_APNO);

Ext.getCmp('sub_MATNR').setValue(Tmp_MATNR);

Ext.getCmp('sub_APER').setValue(Tmp_APER);

Ext.getCmp('sub_APER_').setValue(Tmp_APER_);

Ext.getCmp('sub_APDT').setValue(Tmp_APDT);

Ext.getCmp('sub_MPKUPP').setValue(Tmp_MPKUPP);

Ext.getCmp('sub_MPKUPP_').setValue(Tmp_MPKUPP_);

Ext.getCmp('sub_MPKUPDT').setValue(Tmp_MPKUPDT);

}// end of if (checkRtnOK(rtn_Str))

} //end of if(sucessful)

}

); //end of on load

function DatetoStr(par_date) {

//若日期為空白,則傳回 "" , 否則會傳回 , 0NaNNan

if (checkisnull(par_date)) {

return "";

}

var Tmp_DateStr;

Tmp_DateStr = Ext.Date.format(new Date(par_date), 'Y/m/d');

return Tmp_DateStr;

}

2023年6月20日星期二

V20302 - 判斷 cur_rec={} 為空 Object

目的: V20302 - 判斷 cur_rec={} 為空 Object

處理方法: 1>var cur_rec={} , cur_rec.keys(cur_rec --> [] 傳回 array

if (cur_rec.keys(cur_rec).length==0){}

2>JSON.

V120202E 清除 store 所有資料 - removeAll - clearData

目的: V120202E 清除 store 所有資料

處理說明: 1> var Tmp_gridstore = Ext.getCmp("sub_Grid").store;
Tmp_gridstore.clearData();
Tmp_gridstore.removeAll();

1>*.js

Tmp_Str = Tmp_Str
+ "申請單號(" + cur_rec.data["APNO"].toString() + ") <br> "
+ "退庫歸儲完成!!<br>";
Ext.Msg.alert('確認', Tmp_Str, ok2go);
function ok2go(id) {
console.log("id:", id);
if (id == 'ok') {
//mysuccessalert("退庫歸儲完成 !!");
//清空 [點料人員][退庫原因] & grid 資料
Ext.getCmp("sub_BKMG").setValue("");
Ext.getCmp("sub_APNO").setValue("");
Ext.getCmp("sub_CAUSE_REMARK").setValue("");
var Tmp_gridstore = Ext.getCmp("sub_Grid").store;
Tmp_gridstore.clearData();
Tmp_gridstore.removeAll();
}// end of if(id=='yes')
} //end of callbackfunc

V120202E – 確定後,才繼續往下執行 – Ext.Msg.alert –Ext.Msg.confirm - [退庫歸儲]鈕 , 詢問

目的: V120202E – 確定後,才繼續往下執行 – Ext.Msg.alert –Ext.Msg.confirm - [退庫歸儲]鈕

處理說明: 1> Ext.Msg.confirm('是&否', me.delMessage, yes2go);
function yes2go(id)

{ if (id == 'yes') { }}

2> Ext.Msg.alert('確定', me.delMessage, ok2go);
function ok2go(id)

{ if (id == 'ok') { }}

1>*.js

- Ext.Msg.alert - ok

Tmp_Str = Tmp_Str

+ "申請單號(" + cur_rec.data["APNO"].toString() + ") <br> "

+ "退庫歸儲完成!!<br>";

Ext.Msg.alert('確認', Tmp_Str, ok2go);

function ok2go(id) {

console.log("id:", id);

if (id == 'ok') {

//mysuccessalert("退庫歸儲完成 !!");

//清空 [點料人員][退庫原因] & grid 資料

Ext.getCmp("sub_BKMG").setValue("");

Ext.getCmp("sub_APNO").setValue("");

Ext.getCmp("sub_CAUSE_REMARK").setValue("");

var Tmp_gridstore = Ext.getCmp("sub_Grid").store;

Tmp_gridstore.clearData();

Tmp_gridstore.removeAll();

}// end of if(id=='yes')

} //end of callbackfunc

}

-Ext.Msg.confirm - Yes & No

me.delMessage = "確定刪除勾選的資料嗎?";

Ext.Msg.confirm('提醒', me.delMessage, callBackFunc);

function callBackFunc(id) {

if (id == 'yes') {

console.log("cur_recs.length:", cur_recs.length);

var gridstore = Ext.getCmp('grid_Single').store;

for (let i = 0; i <= cur_recs.length - 1; i++) {

console.log("i:", i);

Ext.getCmp('grid_Single').getSelectionModel().select(cur_recs[i]); //grid select指向所選的資料

cur_rec = Ext.getCmp('grid_Single').getSelectionModel().getSelection();

console.log("cur_rec: ", cur_rec);

if (Ext.getCmp('btn_del').afterDel() == false) {

return;

}

} // end of for (let i=0,)

//資料庫均刪除完成後, 才由 gridstore 移除資料

for (let i = 0; i <= cur_recs.length - 1; i++) {

gridstore.remove(cur_recs[i]); //畫面上隱藏刪除列

} // end of for (let i=0,)

Ext.getCmp('grid_Single').getView().refresh();

buttonModel.modelType = 0;

} // end if (id == 'yes')

} // end of callbackfunc

2023年7月5日星期三

V120202B - 標籤列印 - HTML online 模擬標籤排版 -table

2023年7月3日星期一

V120202B - 了解畫面 DOM的結構 – sub_panel2 -append - $

2023年6月29日星期四

V120502B 1>Qrcode:二維條碼 2>Barcode:一維條碼 3>預覽列印:printThis.js 4>套件載入: centerTab.cshtml

2023年6月26日星期一

V120202E –[領料明細查詢] – 資料未正常顯示 , null.toString() --> Error - nulltoStr(rec["ITMNO]) - 將欄位值轉為 str

2023年6月20日星期二

V20302 - 判斷 cur_rec={} 為空 Object

V120202E 清除 store 所有資料 - removeAll - clearData

V120202E – 確定後,才繼續往下執行 – Ext.Msg.alert –Ext.Msg.confirm - [退庫歸儲]鈕 , 詢問

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2023年7月5日 星期三

2023年7月3日 星期一

2023年6月29日 星期四

2023年6月26日 星期一

2023年6月20日 星期二

追蹤者

網誌存檔

關於我自己

2023年7月5日星期三

2023年7月3日星期一

2023年6月29日星期四

2023年6月26日星期一

2023年6月20日星期二