Các hàm JS dùng chung trang master adminxml

1. Lệnh từ URL master
2. Hàm Open Popup
 * Cách mở popup có xác nhận YES/NO
 * Gọi từ lệnh JS bất kỳ, không cần button
 * Cách mở popup có thay đổi giá trị gọi trên url hiển thị
 * Hiển thị popup nhưng có xác nhận yes/no mới mở
 * Tạo nút mở không cần data-toggle và data-target
 * Mở cửa số popup từ angular
  * Mở cửa sổ popup nhưng thay đổi giống sysHTMLForm
  * Hàm nạp lại được gọi từ cửa sổ con, đến cửa sổ cha khi áp dụng angular

3. Hàm đóng cửa số popup
        Đóng cửa sổ nhiều cấp khác nhau

4. Hàm Alert
5. Một số hàm thư viện common JS
------------------------
** Url
** Số
  - Áp dụng angular
** Hàm hiển thị loading
** Ngày
** Chữ

6. Lệnh CSS dùng chung
7. Quy trình xử lý gởi dữ liệu đến server thông qua query
------------------------

1. Lệnh từ URL
&config_sys=nomaster
&config_class_hide=ten_class1,ten_class2 
   * Muốn ID thêm @ trước tên class

Hay dùng:   &config_sys=nomaster&config_class_hide=bt_sys_config

&_s_call_js
Muốn gọi 1 hàm javascript qua tham số url thêm
  _s_call_js=tenham('ts');tenham2('ts2)

Ví dụ:
  &_s_call_js=alert_pIIF('thông báo','thành công')

  Khi chạy vào trong sẽ thông báo alert


2. Hàm Open Popup
  * Mở popup trong page xem cách tạo
  * Mở ra 1 trang mới dạng popup:

Để mở cửa sổ mới ta dùng thẻ a hay button, sau đó thay thế lại các chữ màu đỏ
    Ví dụ gọi áp dụng Query:
Html:
 <button  type="button" class="bt_open_w_pIIF" p_l="url" p_w'="80%" p_h="600px" p_t="Tên" data-toggle="modal" data-target="#Obj_popup_pIIF" >OK</button>

** ví dụ thẻ a
<a class="bt_open_w_pIIF" p_l="link"  p_w="500px" p_h="600px" p_t="Tên_cửa_sổ" data-toggle="modal" data-target="#Obj_popup_pIIF"  href="#">[Xem phiếu]</a>

* Gọi từ 1 lệnh JS bất kỳ, không cần button

  IIF_f_OpenUrlPopup_call('https://iif.vn',"1000px","1000px",'title');

* Khi hiển thì popup muốn các menu hệ thống ẩn đi các thẻ html
thêm:
   &config_sys=nomaster&config_class_hide=bt_sys_config

    Ân đi thẻ tiêu đề của form: &config_class_hide=title_frm

* Một số tham số gọi trên url
Muốn gọi 1 hàm javascript qua tham số url thêm _s_call_js=tenham('ts');tenham2('ts2)

<a class="bt_open_w_pIIF" p_l="xml_form_ds.aspx?name=NhaHang/TaoMoiHopDong&key=xx&config_sys=nomaster&config_class_hide=bt_sys_config"  p_w="500px" p_h="600px" p_t="Tên_cửa_sổ" data-toggle="modal" data-target="#Obj_popup_pIIF"  href="#">[Xem phiếu]</a>

Javascript hàm này đã có trong trang master: (ko cần viết thêm)
$(".bt_open_w_pIIF").click(function(){  
    
    var url_go=$(this).attr('p_l');
    var w=$(this).attr('p_w');
    var h=$(this).attr('p_h');
    var t=$(this).attr('p_t');
    IIF_f_OpenUrlPopup(url_go,w,h,t);
});

** Trong TH muốn gán vào class khác
$(".ten_class").click(function(){  
    
    var url_go=$(this).attr('p_l');
    var w=$(this).attr('p_w');
    var h=$(this).attr('p_h');
    var t=$(this).attr('p_t');
    alert(url_go);
    IIF_f_OpenUrlPopup(url_go,w,h,t);
});
Viết rút gọn 1:
$(".ten_class").click(function(){          
    IIF_f_OpenUrlPopup($(this).attr('p_l'),$(this).attr('p_w'),$(this).attr('p_h'),$(this).attr('p_t'));
});
Viết rút gọn 2:
$(".ten_class").click(function(){          
    IIF_f_OpenUrlPopup_Obj($(this));
});
Viết rút gọn 3(thay đối url):
$(".ten_class").click(function(){          
   var dom_b = $(this);
   dom_b.attr("p_l","link" );
    IIF_f_OpenUrlPopup_Obj(dom_b);
});

-----------

* Cách mở popup có xác nhận YES/NO
Ví dụ:
<a class="bt_open_w_pIIF_alert btn btn-outline-danger" p_alert="Bạn có muốn copy dữ liệu đến THANH LÝ?" p_l="...."  p_w="700px" p_h="300px" p_t="Copy" data-toggle="modal" data-target="#Obj_popup_pIIF"  href="#"><i class="far fa-copy"></i> Copy số lượng từ hợp đồng sang</a>

Khi click vào sẽ hỏi câu: Bạn có muốn copy dữ liệu đến THANH LÝ?

Nếu OK thì mới mở url chỉ định

**** Các hàm mở cửa sổ con muốn debug xem giá trị URL hãy thêm p_debug="1"

* Cách mở popup có thay đổi giá trị gọi trên url hiển thị

   -- Khi muốm mở lên nhưng thay thế giá trị 1 ô từ input vào url mở:
  <a class="bt_open_w_pIIF_Replace btn btn-primary" p_txt_re="{TuThayThe}" p_obj_get="DoiTuongHTML" p_l="/adminxml/table_data.aspx?file=QR:NhaHang/HopDong_DanhSach_Chon&col=So-/-Số&objreturn=thongtinsohopdong&colfindgrid=So&value_select={TuThayThe}"  p_w="95%" p_h="700px" p_t="X" data-toggle="modal" data-target="#Obj_popup_pIIF"  href="#">Chọn</a>

Ví dụ:
 <a class="bt_open_w_pIIF_Replace btn btn-primary" p_txt_re="{so}" p_obj_get="#SoHopDongThamChieu" p_l="/adminxml/table_data.aspx?file=QR:NhaHang/HopDong_DanhSach_Chon&col=So-/-Số&objreturn=thongtinsohopdong&colfindgrid=So&value_select={so}"  p_w="95%" p_h="700px" p_t="X" data-toggle="modal" data-target="#Obj_popup_pIIF"  href="#">Chọn</a>

Giải thích dòng lệnh:
  p_txt_re="{so} chỉ định từ thay thế   
  Lấy giá trị có ID=SoHopDongThamChieu thay thế vào {0} p_l

Javascript hàm này đã có trong trang master: (ko cần viết thêm)
$(".bt_open_w_pIIF_Replace").click(function(){ 
    var name_obj_get=$(this).attr('p_obj_get'); // #txtSo
    var val_Re=  $(name_obj_get).val();
    var p_txt_re=$(this).attr('p_txt_re'); // giá trị tìm trong url thay
    var url_go=$(this).attr('p_l');
    url_go=url_go.replace(p_txt_re,val_Re  );
    var w=$(this).attr('p_w');
    var h=$(this).attr('p_h');
    var t=$(this).attr('p_t');
    IIF_f_OpenUrlPopup(url_go,w,h,t);
});

-----------

Tạo nút mở không cần data-toggle và data-target

Thêm vào 2 dòng
 <input class="btOPWP_hiif d-none"  type="button" value="" cmd_url=""  data-toggle="modal" data-target="#Obj_popup_pIIF"/>
    <input class="btOPWP_hiif_call" cmd_url="https://phanmeminhoadon.com;PMHD" type="button" value="Nút" />

$('.btOPWP_hiif').click(function(){
    //alert( $(this).attr("cmd_url") );
    ll= $(this).attr("cmd_url");
    ll_0= ll.split(';')[0];
    ll_1=  ll.split(';')[1];
    if(ll_1==undefined) ll_1="WEB";
    IIF_f_OpenUrlPopup_h(ll_0,"100%","600px",ll_1);
});
$('.btOPWP_hiif_call').click(function(){
  ll=$(this).attr("cmd_url") ;
    $('.btOPWP_hiif').attr("cmd_url",ll);
    $('.btOPWP_hiif').trigger("click");
    
});

 Mở cửa số popup từ angular

Nếu dùng angular mở cửa sổ dạng html sẽ bị lỗi, nên cần:

  <button  ng-click="Call_OpenPopup_TinhTrang(x)" type="button" class="btn btn" data-toggle="modal" data-target="#Obj_popup_pIIF" >OPEN<i class="fas fa-home"></i></button>

Chú ý: không cần class='bt_open_w_pIIF'

   Thêm hàm trong angular:
 $scope.Call_OpenPopup_TinhTrang= function (id) {
url="/adminxml/xml_form_ds.aspx?name=BanHang_iif_sv/BanHang_ThanhToan&config_sys=nomaster&config_class_hide=bt_sys_config&key="+id;
        IIF_f_OpenUrlPopup(url,"900px","600px",'Xem đơn hàng'); //hàm này trong trang master
    };  

// Thêm config_sys=nomaster để không có giao diện chính
//  &config_sys=nomaster&config_class_hide=bt_sys_config

// nếu ẩn luôn tiêu đề form thêm &config_sys=nomaster&config_class_hide=bt_sys_config,title_frm

   Chú ý: từ cửa sổ con (iframe) có gọi được hàm javascript trong angular hay không ?
     Trả lời: Không được.
     Cách xử lý: tạo 1 nút lệnh và gọi qua trigger

       * Cửa số cha: <a class="btn btn-primary btNapLai" ng-click="loadData ()" role="button">Nạp lại</a>
         loadData: hàm loadData trong angular
 

       * Cửa số con:
    $("#btClose").click(function(){
 window.parent.$(".btNapLai").trigger("click");
 window.parent.IIF_f_Close_Popup(); // nếu muốn đóng cửa sổ
 
});


     --- Từ của sổ con gọi hàm ở cửa sổ cha với angular

 window.parent.angular.element( window.parent.document.getElementById('mainIIF_angu')).scope().openFrmKhachHangXXX('');


       -- Bên cửa số Parent viết hàm call_from_Popup_TenCuaSo_TenHanhDong

TenHanhDong: doSave / doDel ...
$scope.call_from_Popup_TenCuaSo_TenHanhDong= function (vl) {

         $interval(function () {
           // code ở đây
          }, 100,1);
};


  [Tham khảo từ angular]

 * Mở cửa sổ những thay đổi lại tiêu đề từ SysFormHTML

Khi tạo SysFormHTML sẽ có tiêu đề, khi gọi nó từ 1 cửa sổ bất kỳ dạng popup
 Thì tiêu đề do lệnh gọi quyết định
       IIF_f_OpenUrlPopup(url,"700px","600px","Tiêu đề....");
 Ta muốn cửa sổ popup mở lên thay đổi lại tiêu đề giống với tiêu đề của SysFormHTML đã tạo

  Tại lệnh page load của cửa sổ gọi:
 if($(".title_frm strong")!=undefined);
    parent.$(".title_pp_pIIF").html( $(".title_frm strong").html());

 * Khi cửa sổ con mở lên muốn gọi các javascript từ cửa sổ cha thì dùng
<script>
window.parent.lệnh;   ví dụ: window.parent.location="http://google.com";          window.parent.hàm_viết_bên_trang_con() ;
window.parent.location.reload();   //nạp lại web
 </script>

** Hiển thị popup nhưng có xác nhận mới mở
<a class="bt_open_w_pIIF_alert"  p_alert="Bạn có muốn ?" p_l="xml_form_ds.aspx?name=NhaHang/TaoMoiHopDong&key=xx&config_sys=nomaster&config_class_hide=bt_sys_config"  p_w="500px" p_h="600px" p_t="Tên_cửa_sổ" data-toggle="modal" data-target="#Obj_popup_pIIF"  href="#">Thực thi</a>
 

 *** Hàm nạp lại được gọi từ cửa sổ con, đến cửa sổ cha khi áp dụng angular
loadData_CallFPageParent_From_Popop(nameButtonTriger, cmd_close,alert_msg,alert_caption,alert_cmd)
Hàm thông thường nạp lại:
     window.parent.location.reload();   //nạp lại web
  Ví dụ:
        window.parent.loadData_CallFPageParent_From_Popop("#btLoad","close","Xóa thành công !");

  Ví dụ đầy đủ khi gọi 1 query:
<script>
 $(".btDel").click(function(){
 if (confirm("Bạn có chắc chắn xóa ?") == true) {
 url="/adminxml/Query_Do.aspx?name=NhaHang_ThuChi/ChungTu_Delete&out=json&_SYS_KEY="+key;
   $.get(url, function(data, status){
    //alert(   JSON.stringify(data ) );
    //alert(data.Q1[0].Row_Delete);
    if(data.Q1[0].Row_Delete>0)
    {
        window.parent.loadData_CallFPageParent_From_Popop("#btLoad","close","Xóa thành công !");
    }
    
  });
}
});
</script>
 

3. Hàm đóng cửa số popup
Hàm này đã có trong trang master
function IIF_f_Close_Popup()
{
    $(".close_pIIF").trigger( "click" );
}
function IIF_f_Close_Popup_R()
{
    $(".close_pIIF").trigger( "click" );
    location.reload();
}

Nếu từ cửa sổ con được mở hãy gọi hàm:
window.parent.IIF_f_Close_Popup();
window.parent.IIF_f_Close_Popup_R();
 

* Đóng cửa số khi mở nhiều cấp khác nhau

   Nếu từ trang cao nhất thì gõ lệnh
  window.parent.$(".btClose_xxx").trigger( "click" );
  Nếu từ trang cha thì gõ $(".btClose_xxx").trigger( "click" );
  với btClose_xxx là tham số ?name =xxx

   ? Xem html ngay tại nút close

4. Hàm Alert
alert_pIIF('thông báo','Lưu thành công !'); //hàm này trong trang master
Thêm tham số
alert_pIIF('thông báo','Lưu thành công !',thời_gian_ẩn,màu_nền,thời gian nạp_lại_nếu_iframe ); //hàm này trong
function alert_pIIF(title,msg,time_hide,bgr_color,isframe_reload){}

5. Một số hàm thư viện common JS

** Url
urlGetValuePara(name)
urlGetValuePara_Null(name,ifnull)
urlIsNotEmpty(name)
urlIsEmpty(name) trả về true hay false
urlHasPara(name)
urlIsEmpty_objHtmlHide(nameUrl,nameHtml)
UpdateValueUrl(url,name,value)

** Hay dùng
urlCurrent_AddPara(name,value)
  Ví dụ:
   url trình duyệt: http://iif.vn?id=10
   var url = window.location;
   url = urlCurrent_AddPara("id","20");   
   window.location.href =url ;
     * Chỉ thay đổi giá trị id chứ không thêm mới http://iif.vn?id=10&id=20
    Tham khảo javascript URL

* Xử lý chuyển url đến co tham số

if( urlIsEmpty('tungay') && urlIsEmpty('denngay'))
{
 var today = new Date();

  var date =today.getDate()+"/" + (today.getMonth()+1) + "/"+ today.getFullYear();

  url_g= urlCurrent_AddPara("tungay",date ); // add tham số hiện tại, nếu có thì sửa
  url_g= urlStr_AddPara(url_g,"denngay",date );
  window.location.assign(url_g);
}

urlCurrent_DelPara(name)
  * Xóa tham số hiện tại

urlCurrent_AddPara_Del(name,value,name_del)
  * Thêm vào và xóa tham số

** Số
covertNumberToStr(vl)
// 2.000 đồng 2.000 vnd
// ==> 2000

NumFormat  (prototype)
 Có biến kiểu số so=20000
  so.NumFormat()   sẽ ra 20.000


converStrNum
     200.000,23
     Kết quả là 200000.23  (giá trị này để lưu csdl)

   Chuyển từ STRING -> STRING, nhưng thay đổi 20.000,45 -> 20000.45 để lưu CSDL

addZerosNumberFormat(num, totalLength)

     addZerosNumberFormat(2,3)  ->   002

iif_NumberFormat_Zero(so,strFrm)

iif_NumberFormat_Zero(4,'0000')  -> 0004

iif_NumFormat  - chuyển từ số sang định dạng hiển thị VN.

* Nếu trong angular định nghĩa lại trước khi dùng:
$scope.iif_NumFormat  = function (x) {
        return iif_NumFormat(x);
    }

** Ngày
convertDateToStr(vl)
    * Đầu vào: ngày dạng JSON
    Chuyển kiểu ngày json sang định ngày bằng chữ có kiểu dd/mm/yyyy

    -> Kiểu json trả về chuổi ngày: 2024-08-18T12:55:07.517
    convert 2023-12-31 T 00:00  -> 31-12-2023

convertDateToTimeStr

  * Đầu vào: ngày dạng JSON
    Chuyển kiểu ngày sang định ngày bằng chữ có kiểu hh:MM:ss

    -> Kiểu json trả về chuổi ngày: 2024-08-18T12:55:07.517
    convert 2024-08-18T12:55:07.517  -> 12:55:07.517

convertStr_DateAndTime_ToJson
// Gộp dd/mm/yyyy và hh:MM:ss.mls -> (chuổi) 2024-08-18T12:55:07.517

Dùng để lưu lại vào DB SQL

convertDateToStrFormat(vl, format,charAdd)
Hàm giống hàm trên nhưng ta có thể định dạng kết quả trả về

format:
   dd ngày , MM tháng, yyyy năm , hh giờ,  mm: phút

charAdd: nếu có thêm chuổi giống ký tự dd mm  thì thêm charAdd=*  / ký tự bất kỳ

Ví dụ: convertDateToStrFormat('2023-12-31 T 00:00', 'ngày *dd/*MM','*')


convertDate_dmy_ymd(vl)
  // convert 31/12/2023  ->  2023/12/31
  // Tham số đưa vào là kiểu chữ

getDateCurrent_ymd()
    // trả về giá trị chữ với ngày hiện hành có dạng 2023/12/31

getDateCurrent_dmy()
     // trả về giá trị chữ với ngày hiện hành có dạng 31/12/2023

getHourMinuterStr()
   // Trả về giờ phút giây hiện hành
   // 04:20 45

convertDateJsonToObjDate(vl)
 // Chuyển giá trị biến kiểu ngày từ Json sang kiểu Date trong Javascrip
 // Giá trị json có định dạng 2023-12-31 T 00:00, sẽ chuyển sang kiểu Date

convertStrToObjDate
 // Chuyển giá trị chữ sang kiểu ngày
 // Tham số vào có thêm giờ: 29/2/2023 14:30
 // Tham số vào không có giờ: 29/2/2023
 // Kết quả trả về biến kiểu ngày JS.

convertStrToObjDate_num
 // Chuyển giá trị chữ sang kiểu ngày
 // Tham số vào có thêm giờ: convertStrToObjDate_num(21,4,2024,6,30)
  // Tham số vào không có giờ: convertStrToObjDate_num(21,4,2024)
 // Kết quả trả về biến kiểu ngày JS.
 

 convertDateObjToStr
   Chuyển kiểu ngày JS đến chữ

  Ví dụ:
   ngaydangky = new Date() ; // nếu ngày hiện hành là 2/24/2024
   alert(  convertDateObjToStr(ngaydangky ) );  // in ra 24/2/2024

convertDateObjToStr
   Chuyển kiểu ngày JS đến chữ có format

  Ví dụ:
   ngaydangky = new Date(),
   alert(  convertDateObjToStr_Frm(ngaydangky,'yyyy-mm' ) );  // in ra 2024-2
   format:  yyyy,mm,dd

convertDateObjToStr_saveDB
   chuyển kiểu Date thành str để lưu DB: nam/thang/ngay gio:phut

convertDateToJsonStr

     Chuyển từ date to json
Ví dụ:
    $scope.ThayDoiNgay_X = function (st) {                        
            gt=$scope.objCHUNGTU.GioVao;
            var date_cv = convertDateJsonToObjDate(gt);
            date_cv.setDate(date_cv.getDate() + st);
            gt = convertDateToJsonStr( date_cv);           
            $scope.objCHUNGTU.GioVao= gt;
    }//ThayDoiNgay_X



Tạo lịch chọn ngày dương lịch và âm lịch

<script LANGUAGE="JavaScript" SRC="/vendor/ngay_amlich/amlich-hnd.js"></script>
<link href="/vendor/ngay_amlich/style.css" rel="stylesheet">

<script>
// Nếu hiển thị mà không cần chọn thì ko đưa hàm alertDayInfo vào
function alertDayInfo(dd, mm, yy, leap, jd, sday, smonth, syear) {
    var lunar = new LunarDate(dd, mm, yy, leap, jd);
    var s = getDayString(lunar, sday, smonth, syear);
    var gtSet= sday+"/"+smonth+"/"+syear;
    
    url_back__=  urlGetValuePara_Null("url_back","");
    url_back__ =  url_back__.replace("{date}", gtSet);
    
    window.location.href =decodeURIComponent( url_back__ );
}
</script>
<div class="ChonLich_iif"></div>
<script language="JavaScript">
setOutputSize("100%");
$(".ChonLich_iif").html(printSelectedMonth());
</script>

Thư viện chọn thời gian từ ngày, tháng, quý

<script src="/themes/lib_cm/lib_app.js"></script>

// Code này để tại hàm load page

var chon='homnay'; //  homqua / tuannay / tuantruoc / thangnay / thangtruoc / namnay / namtruoc

const ngay_select = new iif_Date_Select(chon);

//  trả ngày kiểu chữ dạng d/m/y

$scope.tungay=ngay_select.tungay_dmy(); 

$scope.denngay=ngay_select.denngay_dmy();

// nếu trên url có set_tungay / set_denngay thì lấy giá trị trên url

if( ngay_select.has_date_url() )

{

  $scope.tungay=ngay_select.tungay_dmy();

  $scope.denngay=ngay_select.denngay_dmy();

}

where_ngay=ngay_form_to.url_where_time();

// kết quả dạng: &tungay=2024/6/1 00:00&denngay=2024/6/30 23:59

Thư viện sinh ra câu where thời gian từ ngày đến ngày

  // tungay: kiểu chữ nhập từ input có dạng dd/mm/yyyy

  var ngay_form_to = new iif_Date_TuNgayDenNgay($scope.tungay,$scope.denngay);

 // chuyển sang dạng : y/m/d 

    tungay_ymd= ngay_form_to.tungay_ymd() ;

    denngay_ymd= ngay_form_to.denngay_ymd() ;

   var url=  "/adminxml/Query_Do.aspx?name=BanHang_iif_sv/ChungTu_Get_DanhSach&out=json&"+ngay_form_to.url_where_time();

** Tham khảo nếu sử dụng gọi url_back


 

** Hàm hiển thị loading

Để trống tham số
loadding_show();  --> mặc định: Loading Vui lòng đợi, đang xử lý
Loading : là ảnh gif mặc định có 3 dấu chấm.

loadding_show(str);
Ví dụ: loadding_show("Đang tải...") ;
 str: là chữ hay gõ #imgloading để lấy ảnh loading động gif (ảnh to)
Ví dụ: loadding_show( "#imgloading") ;

Nếu muốn hình loading nhõ chỉ có ... hãy sử dụng lệnh
   loadding_show( "Đang xử lý: #imgloading") ;

loadding_hide()

iif_alert_show("nội dung", thời_gian_ẩn); //thời_gian_ẩn 
Ví dụ: iif_alert_show("Lưu xong",2);
    - Lưu tại ham_master_top.js

** thiết kế loading riêng tại mỗi page

Đưa html vào page, nơi xuất hiện

<div class="col-md-12 mb-2 text-center iif-loading"></div>

   Khi gọi hàm  loadding_show(); sẽ hiện thị  ,  loadding_hide(): ẩn

** Chữ

isEmpty(gt)
    * Trong đó có so sánh null, empty, undefined

isEmptySet(val,val_is_empty)

   * nếu biến rỗng thì gán giá trị cho biến, nếu khác rỗng thì lấy giá trị val
 

iif_comp_txt_list(vl,list)  , so sách dạng chính xác và chứa đựng
Ví dụ

iif_comp_txt_list('111','111')  -> true
iif_comp_txt_list('111','112')  -> false
iif_comp_txt_list('111','111,112')  -> true
iif_comp_txt_list('113','111,112')  -> false

iif_LayChuCuoi

Ví dụ: iif_LayChuCuoi("tran van nguyen a",2)  -> nguyen a

iif_cutRight_text

Ví dụ:

x="12345678";
alert( iif_cutRight_text(x,6,'...'));

  ** Khác
htmlEncode(input)
hide_column_tb('tên id table', vị trí cột ẩn) (nằm trong ham_master_top.js)


  6. Một số lệnh css dùng chung
    *  adminxml/xml_lib/css/cauhinh.css

iif_hand : rê chuột đợi