2022年9月6日 星期二

Array 處理 - Array宣告 - 判斷元素是否在 Array內 - c# 判斷字串是否在長字串內

 目的: Array 的宣告 & 判斷 元素是否在 Array內

處理說明: 1>宣告 Array  :    
                        Opts1> let  Tmp_Ary=["A","B","C"];   //宣告 Tmp_Ary 共 3元素("A","B","C")
                        Opts2> let  Tmp_Ary= new Array(3);  //宣告 Tmp_Ary 共 3元素
                  2>判斷元素("A")是否在 Array內 , 利用 Array.indexOf("A") , 傳回 index 
                       if (Tmp_Ary.indexOf("A")== -1)
                  3>c# 字串判斷是否存在 , 若 Tmp_IRESAK 為"", 則傳回 0 , 非 -1
                        if ("1;2;3;4;5;6;7;8;".IndexOf(Tmp_IRESAK) == -1)
                            {
                                Tmp_RtnMsg1 = Tmp_RtnMsg1 + "[檢測結果代碼]欄位值不符!!"
                                                          +"(" +Tmp_IRESAK + ")<br>";
                            }
                        --> 所以必需先判斷 Tmp_IRESAK 是否為空字串
                               if (myfunc.checkisnull(Tmp_IRESAK.Trim()))
                                {
                                  Tmp_RtnMsg1 = Tmp_RtnMsg1 + "[檢測結果代碼]欄位值不可空白!!<br>";
                                  }

 PS: *.js  利用 "A" in Tmp_Ary 不準,  不用之   , 

        --> 但 *.cs   key in Keys 可


1>*.js  var  Tmp_Ary=["A","B","C"];

  let Tmp_Ary = ["A", "B", "C", "D"];

            console.log("1 par_WTLV in [A,B, C,D] :", ("A" in Tmp_Ary));            

            console.log("3 Tmp_Ary.indexOf(par_WTLV) :", Tmp_Ary.indexOf(par_WTLV));

            //用  Arrary 用  in  不準, 改用 indexOf

            if (Tmp_Ary.indexOf(par_WTLV)==-1)

                return;


2>*.cs  string[] Tmp_StrAry= new string[3] {"A","B","C"}

             string[]  Tmp_StrAry=new string[3] {"MITM","WITM","DDITM"};

             int[]   Tmp_intAry= new int[3]{21,22,25};

            Tmp_intAry[2]=23;

            int Tmp_int2=Tmp_intAry[2];


             Tmp_StrAry[0].Contains("A");

             Tmp_StrAry.Contains(obj.Index);


3>Array 也是 Object 的型態之一

    Ex: var Tmp_Ary=[];

           Tmp_Ary.push(cur_rec);   //method

           Tmp_Ary.length=1;          //property  

           Tmp_Ary.newSet=-1;   //宣告新的 property





V20306 - 欄位值2Checkbox - 將資料庫欄位值顯示 在 checkbox

 目的: 將資料庫欄位值轉成 checkbox  &  將畫面checkbox值轉成資料庫欄位值

處理說明: 1>顯示資料 -  將資料庫欄位值轉成 checkbox (tab1.onShow event )

                  2>儲存資料 -  將畫面checkbox值轉成資料庫欄位值(按[存檔]鈕)




1>*.js 顯示資料 - 將資料庫欄位值轉成 checkbox (tab1.onShow event )

Ext.getCmp("tab1").on("show", function (me, eOpts) {
        //編輯畫面顯示,將欄位值反應至編輯畫面的 checkbox 選項             
        console.log("*** tab1 show event trigger");
        var sel_recs = Ext.getCmp('grid_Single').getView().getSelectionModel().getSelection();
        if (sel_recs.length > 0) {
            var sel_rec = sel_recs[0];
            console.log("sel_rec:" , sel_rec);
            if (checkisnull(sel_rec)) {
                return true;
            }
            var Tmp_WTLV = sel_rec.data["WTLV"].toString();
            var Tmp_ITPR = sel_rec.data["ITPR"].toString();
            setcheckbox_WTLV(Tmp_WTLV);
            setcheckbox_ITPR(Tmp_ITPR);            
        }

        function setcheckbox_WTLV(par_WTLV) {            
            let Tmp_Ary = ["A", "B", "C", "D"];
            //用  Arrary 用  in  不準, 改用 indexOf
            if (Tmp_Ary.indexOf(par_WTLV)==-1)
                return;


            var WTLV_id = "WTLV_" + par_WTLV;
            Ext.getCmp(WTLV_id).setValue(true);
        }

        //欄位值 par_ITPR: A/B/C/D/E/F/G:其他1
        function setcheckbox_ITPR(par_ITPR) {
            let Tmp_Ary = ["A", "B", "C", "D", "E", "F", "G"];
            let Tmp_ITPR1 = par_ITPR.substr(0, 1);
            if (Tmp_Ary.indexOf(Tmp_ITPR1) == -1)
                return;

            var par_ITPR_Ary = new Array;
            par_ITPR_Ary = par_ITPR.split(":");         
            //設定其他備註欄位  
            if (par_ITPR_Ary[0] == "G") {
                Ext.getCmp("ITPR1").setValue(par_ITPR_Ary[1]);
            }
            var ITPR_id = "ITPR_" + par_ITPR_Ary[0];                        

            //若為 G:其他1 , 則需特別處理
            var Tmp_ITPR_id = Ext.getCmp(ITPR_id).getValue();            
            Ext.getCmp(ITPR_id).setValue(true);            
        }
    });


     //修改的存檔, 重新顯示
    Ext.getCmp('btn_save').beforeEdit = function () {
        //執行後端 Upate 程式
        isCheck = S_DB.doSave('Update');
        //後端   Insert 後, store 重取
        if (isCheck)
           Ext.getCmp("btn_Show").fireHandler();
        return isCheck;
    };


2>*.cs 儲存資料 -  將畫面checkbox值轉成資料庫欄位值(按[存檔]鈕)

[HttpPost]
        public void Update()
        {
            var c = System.Web.HttpContext.Current;
            NameValueCollection nvc = c.Request.Form;
            string[] arrCondition = getPK();
            NameValueCollection nvc1 = new NameValueCollection();
            nvc1=Proc_ITPR(nvc1, nvc);            
            excuteUpdate(nvc1, DBTable, arrCondition);
        }

public NameValueCollection Proc_ITPR(NameValueCollection par_nvc1, NameValueCollection par_nvc)
        {
            //nvc 移除 radio開頭的 key
            var Tmp_key = "";
            foreach (string key in par_nvc.Keys)
            {
                if (!key.Contains("radio"))
                    par_nvc1[key] = par_nvc[key];
            }

            //若為[ITPR]若為'G', 其他則 nvc1[ITPR]=nvc1[ITPR]+":"+nvc1[ITPR1];
            //刪除 nvc1[ITRP1]
            if (par_nvc1["ITPR"] == "G")
                par_nvc1["ITPR"] = par_nvc1["ITPR"] + ":" + par_nvc1["ITPR1"];
            par_nvc1.Remove("ITPR1");
            return par_nvc1;
        }

 public void Insert()
        {
            var c = System.Web.HttpContext.Current;
            NameValueCollection nvc = c.Request.Form;
            NameValueCollection nvc1= new NameValueCollection();            
            nvc1 = Proc_ITPR(nvc1, nvc);        
            excuteInsert(nvc1, DBTable);
        }


3>V20306_JSON.js  - 畫面欄位設計  - checkbox


{
  xtype: 'radiogroup', fieldLabel: '重量等級', labelWidth: 160, layout: 'vbox',
id: 'WTLV',
items: [
{
boxLabel: '極重(木箱)',
name: 'WTLV', 
id: 'WTLV_A', 
inputValue: 'A',
border: 1,
width:300
}, {
boxLabel: '很重(七層紙箱)',
name: 'WTLV', 
id: 'WTLV_B', 
inputValue: 'B',
border: 1,
}, {
boxLabel: '重(五層紙箱)',
name: 'WTLV', 
id: 'WTLV_C', 
inputValue: 'C',
checked: true,
},
{
boxLabel: '一般(三層紙箱)',
name: 'WTLV', 
id: 'WTLV_D', 
inputValue: 'D',
}
]
}, // end of  WTLV重量等級
{
                xtype: 'radiogroup', fieldLabel: '內層包裝需求', labelWidth: 160, layout: 'vbox',
id: 'ITPR',
items: [
{
boxLabel: '旭化層',
name: 'ITPR', 
id: 'ITPR_A', 
inputValue: 'A',
}, {
boxLabel: '大氣泡布',
name: 'ITPR', 
id: 'ITPR_B', 
inputValue: 'B',
}, {
boxLabel: '小氣泡布',
name: 'ITPR', 
id: 'ITPR_C', 
inputValue: 'C',
checked: true,
},
{
boxLabel: '舒美布',
name: 'ITPR', 
id: 'ITPR_D', 
inputValue: 'D',
},
{
boxLabel: '牛皮紙',
name: 'ITPR', 
id: 'ITPR_E', 
inputValue: 'E',
},
{
boxLabel: '紙版',
name: 'ITPR', 
id: 'ITPR_F', 
inputValue: 'F',
},
                                         //用 panel - 包含 checkbox & TextField  
{
xtype: 'panel', layout: { type: 'hbox' }, border: 0,
items: [
{
xtype: 'radio', boxLabel: '其他', name: 'ITPR',
id: 'ITPR_G', 
inputValue: 'G',
},
{ xtype: 'textfield', id: 'ITPR1', width: 150, padding: "0 5 0 5" },
]
},
]
}, // end of  ITPR

2022年9月2日 星期五

V20306 - 若Template Grid畫面有 CheckBoxModel ,則判斷選擇資料會錯誤 - 移除 parent.onclick function -改用自定的 onclick

       目的: 若Grid畫面有 CheckBoxModel ,則判斷選擇資料會錯誤 , 

                 已勾選資料,但編輯時,仍會顯示"請先選擇一筆資料!! "

                  --> Template 的錯誤, 更  TMGrid.js  & TMSingleViewEdit.js 即可

處理說明: 方法1>將 parent 的 onclick 解除  Listener 

                              不呼叫 parent.onclick function , 只呼叫 child.onclick function

                              V20306 繼承自 TMSingleViewEdit class,  onClick時,會先呼叫 parent .onClick

                             (因 constructor: function (config){ ...   ;  this.callParent(config);}    ) 

                  方法2>置換 V20306.grid_Single 元件,將 grid.SelModel 改成 checkboxModel 





1>方法一:   *.js   移除 parent .onclick function  - 改用自定的 onclick   

//兩種方法均可  - un("click",handlerFn)   - removeEventListener("click", handlerFn);
Ext.getCmp('btn_edit').un("click", Ext.getCmp('btn_edit').events.click.listeners[0].fn);
//Ext.getCmp('btn_edit').removeEventListener("click", Ext.getCmp('btn_edit').events.click.listeners[0].fn);        

Ext.getCmp('btn_edit').on("click", function (me, e, eOpts) {
        var sel_recs = Ext.getCmp('grid_Single').getView().getSelectionModel().getSelection();
if (sel_recs.length > 0) {
var sel_rec = sel_recs[0];
            setFormData(sel_recs);
            buttonModel.setModelType(2);
            Ext.getCmp("tab2").setDisabled(true);                              
            Ext.getCmp("TMSingleViewEdit").setActiveTab("tab1");
}
 else {
            mywarnalert("請先選擇一筆資料 !!");
        }

        setFieldsCls('myform', ['ASPNO', 'LCNO', 'MCNM', 'ORDID', 'PCTP', 'FICNMA', 'STLCT', 'PCQTY', 'LRULT', 'LRUWT', 'LRUHG'], ['ASPNO'],['ASPNO','RPNOAF','LCNO','LRWET','MCNM','ASPSTA','ORDID','PCTP','FICNMA','STLCT','PCQTY','ASLV','ASPRMK','NGONOAF','PN','LCITM','LCETDT','LCCHID','LCORAO','LRULT','LRUWT','LRUHG','WTLV','ITPR']);
        showFormButton('myform', ['btn_RPNOAF', 'btn_LRWET', 'btn_MCNM', 'btn_ASPSTA', 'btn_ORDID', 'btn_PCTP', 'btn_FICNMA', 'btn_STLCT', 'btn_ASPRMK', 'btn_NGONOAF', 'btn_PN', 'btn_LCCHID']);
        return false;
    });


方法2:  置換 selModel 成  Ext.selection.CheckboxModel
              另外Template   TMGrid.js  & TMSingleViewEdit.js   也要換成最新版本

Ext.onReady(function () {
    var TMSingleViewEdit = Ext.create('TMSingleViewEdit');
    
    Ext.getCmp('grid_Single').destroy(); //20220905
    var grid_Single = Ext.create('grid_Single', {
        id: 'grid_Single',
        resizable: true,
        selModel: Ext.create('Ext.selection.CheckboxModel', {
            selectionMode: 'SIMPLE',
            listeners: {
                /*selectionchange: function (cb, selected, eOpts) {
                    //view.selModel.getSelection()
                },*/
                RowMouseDown: function (view, record, item, index, e) {
                    var me = this;
                    if (index !== -1) {

                        if (!me.allowRightMouseSelection(e)) {
                            return;
                        }

                        if (e.shiftKey && me.lastFocused) {
                            me.selectRange(me.lastFocused, record, e.ctrlKey);
                            me.processSelection(view, record, item, index, e);
                        }

                        if (!me.isSelected(record)) {
                            me.mousedownAction = true;
                            me.processSelection(view, record, item, index, e);
                        } else {
                            me.mousedownAction = false;
                        }
                    }

                }
            }
        })
    });
    Ext.getCmp('tab2').add(grid_Single); //將grid加入到tab裡面
    Ext.getCmp('tab2').updateLayout();


2022年9月1日 星期四

JS - 箭頭函式的用法 => , 即函式的簡約寫法

 目的: 了解 JS 箭頭函式的用法  =>

處理說明:  1>箭頭函式  =>  , 即  function 的簡要 statement
                   2>var func = function (x) { return x + 1 }
可簡約寫成 var func= (x)=>x+1
3>若用 {} , 則需自行 (return 傳回值)
var func1=function (x) { return x+1}
需簡約寫成 var func1=(x)=>{return x+1};
--> 若簡約寫成 var func1=(x)=>{x+1}; , 會無傳回值

JS - class 的寫法 - 和 prototype的關係, 如何用 extends 達到繼承 (inheritance) 效果

 目的: 了解 JavaScript class 的寫法及 繼承(extends)  &  static 的用法

處理說明: 1>JavaScript  class 的本體是 函式(function) , 

                      class 只是宣告函式的一種特別的語法。

                 2>class person_child extends person_parent{

                     }                     

                     -->JavaScript將 person_child.prototype 的 [[Prototype]] 設為 person_parent.prototype,

[傳統寫法] [class寫法]

一.傳統寫法   - 物件屬性 - 以 prototype 定義屬性
1>傳統宣告 Object _的方法 - function ObjectName(par_param) { }
    1>>定義物件 - 以 function 函式定義物件 - constructor()  , this.property=xxxx;
function Person(par_name){
this.name=par_name;
}

    2>>定義屬性 Object.prototype.property
        Person.prototype.name="Defaultname";

    3>>定義方法 Object.prototype.property=function() { }
Person.prototype.SayHello=function(){
console.log(" Hello !! "+this.name);
}

   4>實際建立 Object  - new Constructor
       var Person1=new Person("parent Micro Tsai");
       Person1.SayHello();
 
--> 執行結果 :
      Hello!!  parent Micro Tsai


二.傳統宣告 Object 的 _inherit 方法  -  child.prototype=parent.prototype;
1>>宣告 person_son Object
function person_son(par_name,par_age){
this.name=par_name;
this.age=par_age
}
2>>person_son 繼承自 person 
//person_son.prototype.__proto__ = Person.prototype;
person_son.prototype = Person.prototype;
person_son.prototype.ShowName = function(){
console.log("My name is "+this.name);
}
person_son.prototype.ShowAge = function(){
console.log("My age is "+this.age);
}
var person_son1=new person_son("child Micro Tsai",28);
person_son1.SayHello();    //person_son1未定義 SayHello ,因繼承自 parent ,所以可以用 SayHello
person_son1.ShowName();
person_son1.ShowAge();

--> 執行結果:
 Hello !! child Micro Tsai
My name is child Micro Tsai
My age is 28


三.class 的物件寫法 
1>宣告 class  -  class  class_name{ constructor(){}; SayHello(){}; }
class Person_parent{
    constructor(par_name){
        this.name=par_name;
    }
    SetName(par_name){ this.name=par_name; }
    SayHello(){
        console.log(" Hello "+this.name);
    }
}

Person2=new Person_parent("Micro Tsai 2");
Person2.SayHello();
Person2.SetName("Micro Tsai 3");
Person2.SayHello();
--> 執行結果:
Hello parent Micro Tsai 
Hello parent Micro Tsai SetName

2>class的繼承   子class  extends  父class
class Person_child extends Person_parent{    
    constructor (par_name,par_gender){
        super(par_name);  //call parent.constructor
        this.gender=par_gender;
    }
    
    SetAge(par_age){
        this.age=par_age;
    }
    ShowAge(){
        console.log(this.name+" age is "+this.age);
    }
    SayHello(par_name){
        console.log("please Jump !! "+par_name);
        super.SayHello();  //call parent function SayHello();  
    }
    ShowGender(){
        console.log(this.name+" gender is "+this.gender);
    }
}

Person_child=new Person_child("Micro Tsai 5","Male");
Person_child.SayHello(Person_child.name);
Person_child.SetAge(57);
Person_child.ShowAge();
Person_child.ShowGender();

--> 執行結果:
please Jump !! Micro Tsai 5
 Hello Micro Tsai 5
Micro Tsai 5 age is 57
Micro Tsai 5 gender is Male


2022年8月31日 星期三

JS Callback function - function 的執行順序

 目的 :  認識 callback function 的定義及用法

處理說明:  JavaScript 是一個「非同步」的語言,
當我們執行程式時, for 迴圈並不會等待處理作業(statement)結束後才繼續
而是在執行階段就一口氣將statement執行完

一. callback function 的定義:  call function , 只有滿足某個條件(event 發生時)才會被執行

    Callback function 跟一般的函式沒什麼不同, 差別在於被呼叫執行的時機

     Office.addEventListener( '電話響', function(){ /* 接電話 */ }, false);

Callback function就是「把函式當作另一個函式的參數,透過另一個函式來呼叫它

Ex1>   window.setTimeout( function(){ ... }, 1000);
Ex2>
  var handler = function() { /* 接電話 */ }; 
  Office.addEventListener( '電話響', handler, false);
Ex3:
var funcA = function(){
  console.log('function A');
};

var funcB = function(){
  console.log('function B');
};
funcA();
funcB();

         -->  先印  function A  , 再印 function B

Ex4:

         var funcA=function {
                   window.setTimeout(function(){  console.log('function A'); }, 
                    Math.random()*1000);
         }

         var funcB=function {
                   window.setTimeout(function(){console.log('function B'); }, 
                    Math.random()*1000);
         }
         funcA();
         funcB();
        --> 不確定 function A / function B 先印

Ex5: 確保 function A 先印, 再印 function B
         var funcA=function(par_callback) {
                   window.setTimeout(function(){
                    console.log('function A'); 
                    if (typeof par_callback="function"){
                        par_callback();  
                    }
                    }, 
                    Math.random()*1000);
         };
         var funcB=function(){
               window.setTimeout(function(){
                    console.log('function B'); 
                    }, 
                    Math.random()*1000);
         };
       funcA(funcB);
  
       --> 無論 funcA 在執行的時候要等多久, 
     funcB 都會等到 console.log('function A'); 之後才執行。


Ex6 : 在五秒鐘之內,每秒鐘依序透過 console.log 印出: 0 1 2 3 4

          for (var i=0;i<5;i++){
               window.setTimeout(function(){   console.log(i);  }
                    ,1000*i);
           };
           //執行結果 : 5 5 5 5 5  

--> JavaScript 是一個「非同步」的語言,執行程式時, 
   for迴圈並不會等待處理作業(statement , window.setTimeout )結束後才繼續
      而是在執行階段就一口氣將statement執行完              
--> 切分變數(i)有效範圍的最小單位是 "function"
--> 因為函式未宣告變數 i , 所以每次執行 console.log(i); 的 i 變數是去函式「外層」取得
      因 function() 內未宣告 var i, 所以會在函式外層取得 (此時for迴圈已跑完 i=5) , 所以印出 5
      for(var i =0; i<5;i++)   --> 宣告 i 為全域變數


二.IIFE(Immediately Invoked Function Expression, IIFE)

    一般宣告方式:  doit(x);
    IIFE宣告方式:  函式宣告當下即呼叫 , 傳入參數 i , 即傳入當時的 i 值(0,1,2,3,4,5)
           (function doit(x){ console.log(x);} ) (i)

--> for (var i=0;i<5;i++) 
          (function doit(x){ console.log(x);} ) (i);

JS Array 陣列宣告 - push,pop - unshift,shift

目的: 說明 陣列 (Array) 的宣告及使用

 陣列可以看作是一種特別的「物件」,同樣是零至多個元素的集合

陣列內可以是原始的資料類型、其他陣列、函式等等

陣列是個有順序性的集合,且只能透過 [] 來存取。

陣列的索引是由 0 開始計算的

一.陣列宣告的3個方法:

1>方法1:  new Array();

var a = new Array(); 
a[0] = "apple"; 
a[1] = "boy"; 
a[2] = "cat"; 
a.length; // 3

2>方法2:   []
var a = []; 
a[0] = "apple"; 
a[1] = "boy"; 
a[2] = "cat"; 
a.length; // 3

3>方法3:   ["apple","boy","cat"];
var a = ["apple", "boy", "cat"]; 
a.length; //3


二.陣列的新增/刪除

1>Array.legth 可以修改
var a = ["apple", "boy", "cat"]; 
a.length; // 3 
a.length = 1; 
console.log(a); // ["apple"] 
a.length = 3; 
console.log(a); // ["apple", undefined, undefined]

2>Array元素可以任意指定
var array = ['a', 'b', 'c']; 
array.length; // 3 
array[7] = 'z'; 
console.log(array); // ["a", "b", "c", undefined, undefined, undefined, undefined, "z"]

3>在陣列末端新增/移除元素時,可以透過 ARRAY.push() ; Array.pop()
var array = ['a', 'b', 'c']; 
array.length; // 3 
array.push('d'); 
console.log(array); // ['a', 'b', 'c', 'd']
array.pop();            //傳回 "d"
console.log(array); // ['a', 'b', 'c']

4>在陣列前端新增/移除元素時,可以透過 ARRAY.unshift() ; Array.shift()
var array=['a', 'b', 'c'];
var Tmp_el=array.shift();
console.log(array); // ['b','c']
Tmp_el=array.shift();
console.log(array); // ['c']
Tmp_el=array.unshift(4,"e");
console.log(array); // [4,"e",'c']