Cách tạo input để nhúng vào form

Cách tạo các input html để nhúng vào page html

1. Cách tạo
2. Cách nhập tham số
Html1
Html2   
Html3
Grid_Frm

=====================

1. Cách tạo
Truy cập:  /Adminxml/xml_form.aspx?file=SysLayoutHTML.xml
Tạo 1 bảng ghi
* Có 3 loại kiểu control input
  - Không lấy dữ liệu file xml thì có Type để trống
  - Lấy dữ liệu file xml và lặp các bảng ghi thì có Type List
  - Lấy dữ liệu file xml và where thì có Type để trống thì có Type List_W
 


2. Cách nhập tham số
Group
: control_frm_input
Type:
   List: kiểu lấy bảng dữ liệu
   Tham số phải theo quy định

ts_01:  $Tên đối tượng---/sel:col1,col2,col3:]
            /-/
 * Luôn có dấu $ phía trước, sau đó tới tên file, nếu xử lý ngay trong file đang lấy thì gõ 2 dấu $$
 * sel là nếu bảng có nhiều cột, cần lấy cột chỉ định.
ts_02:   Trường value
            /-/
ts_03:   Trường display
            /-/
ts_04:   Giá trị mặc định value/#/Giá trị mặc định display
            /-/
ts_05:   Where
            /-/
ts_06:   Sort
 
   List_W: lấy dữ liệu theo where
ts_01:  $Tên đối tượng---/sel:col1,col2,col3:]
            /-/
 * Luôn có dấu $ phía trước
 * sel là nếu bảng có nhiều cột, cần lấy cột chỉ định.
ts_02:   Trường value
            /-/
ts_03:   Trường display
            /-/

TenTruong:Kiểu/->/$Tên đối tượng/-/ts2/-/ts3/-/ts4/-/ts5/->/ts_ii

ts1:$Tên đối tượngXML , gõ $$ đế lấy file hiện tại trên url
ts2:Where cho data XML
ts3: Lấy giá trị, vd:  PB='KT'  , PB='{value}' /  Compute , vd: $Min(Diem)     
ts4:  TenCot                                                 /   Where cho Computer
ts5: Format
ts6: Nếu tìm ko thấy thì


DataType:
  - NotRowParent thì không xử lý cấp cha con.
     * Các dữ liệu có cột SYS_KEY_Parent thì tự động tạo cột sơ đồ, nếu không muốn tạo chọn NotRowParent.
     * Bình thường để trống.
Cmd: lệnh cấu hình thêm
RemoveLinkParent: nếu có hiện thị cấp cha con thì mặc định có link, thêm lệnh này để xóa link thẻ a mà chỉ hiển thị tên.

Html1
Nhập html để hiển thị ra bên ngoài


Html2
Nhập html để hiển thị ra bên ngoài, thường là các đoạn javascript
  *Chỉ nạp cho page xml_form
  * KHÔNG nạp cho xml_form_grid (Grid Form)


    
Html3
Áp dụng cho Grid Form: lệnh đưa vào là Html / javascript để nạp giá trị sau khi nạp xong các dòng
  Giá trị sẽ gộp lại và xử lý script ở cuối tag table </table>
    * tại file html Grid Form (xml_form_grid ) sau thẻ </table>
<script>
{script_control_load}
</script>

Các giá trị gộp lại sẽ được nạp vào {script_control_load}
Nếu tại HTML3 không để <script> vì đã có

* Thêm  {Cl_RowNumber} để lấy vị trí của dòng, nếu dữ liệu có 10 bảng ghi thì sinh ra từ 1 đến 10 tương ứng với từng dòng nạp ra.

Ví dụ: mỗi dòng tạo 1 javascript

Html sinh ra ở giao diện:
<td class="col_DauTiec col_DauTiec__1 cl_right"><div class="input-number input-num-DauTiec">
<input type="text" name="DauTiec" class="form-control" value="5">
<span class="qty-up">+</span><span class="qty-down">-</span>
</div></td>
Lệnh ghi ở html3:

 $('.col_{col_name}__{Cl_RowNumber}').find("input").number( true, {para_01},',','.' );

 
** Cách này có nhược điểm, mỗi dòng sinh ra 1 đoạn scrip sẽ không tối ưu về tốc độ và xử lý không nhanh.
Tham khảo thêm lệnh phần Grid_Frm:  <js_confg>#html3_one#</js_confg>


Grid_Frm: áp dụng khi chạy xml_form_grid
Vì để tối ưng tốc độ, không nạp lại control cho mỗi dòng, mà hệ thống nạp vào bộ nhớ sau đó thay thế lại
Ví dụ đối với combobox:
<replace>
<option  value="{0}"
<option selected value="{0}"
</replace>

{0} sẽ được nạp value ngay tại mỗi dòng.

   * Áp dùng cho lặp JS, ví dụ:

<script type="text/javascript">
$(document).ready(function(){
     $('[name={col_name}]').number( true, {para_01},',','.' );
});
$(document).ready(function(){
     $('[name={col_name}]').number( true, {para_01},',','.' );
});   
</script>

** nếu nhiều dòng làm dư thừa lệnh, để nhanh và gọn ta làm như sau

-------HTML3:

$('[name={col_name}]').number( true, {para_01},',','.' );
-------Grid_Frm:
<js_begin>$(document).ready(function(){</js_begin>
<js_end>}); </js_end>

-- Lệnh  <js_confg>#html3_one#</js_confg>

Làm cho HTML sinh ra 1 lần duy nhất:
Ví dụ:
HTML3:
$('[name={col_name}]').number( true, {para_01},',','.' );

Grid_Frm:
<js_begin>$(document).ready(function(){</js_begin>
<js_end>}); </js_end>
<js_confg>#html3_one#</js_confg>


** Nếu có 10 dòng nhưng kết quả HTML sinh ra ở giao diện:
$(document).ready(function(){
$('[name=PS2]').number( true, 0,',','.' );
});

 

** Nếu không có #html3_one#, thì dữ liệu có 10 dòng sẽ có 10 dòng HTML3

Một ví dụ HTML3:

$('[name={col_name}]').number( true, {para_01},',','.' );
//Tạo sự kiện theo nhóm Class
// input-num-{col_name} là div chưa các đối tượng có xử lý sự kiện

$('.input-num-{col_name}').each(function() {
       var $this = $(this),
        $input = $this.find('input[type="text"]'),
        up = $this.find('.qty-up'),
        down = $this.find('.qty-down');  
down.on('click', function () {
            var value = parseInt($input.val()) -  1;
            value = value < 1 ? 1 : value;
            $input.val(value);
            $input.change();    
        });//down       
up .on('click', function () {
  var value = parseInt($input.val()) +1;
  $input.val(value);
  $input.change();
});//up       
});
//each_input').each





HTML_Header: dùng cho các javascript và css nạp cho input
   * Đặc biệt nếu nạp file 1 lần rồi, sẽ không nạp lần 2.
    Giá trị đc nạp vào {script_header} của file cấu trúc file HTML.

Ví dụ:
<script src="/vendor/color-picker-huebee/dist/huebee.pkgd.min.js"></script>
<link href="/vendor/color-picker-huebee/dist/huebee.min.css" rel="stylesheet">


Đối với Grid và GridForm:
Thêm từ khóa ở <Cl_RowNumber> tại HTML sẽ ra TênÔ__VịTríDòng
Ví dụ: Tên ô là MauChu

<input type="text" name="{col_name}" class='{col_name}  <Cl_RowNumber>  form-control'  {placeholder}  value="{value}" >
--- Kết quả là
<input type="text" name="MauChu" class='MauChu  MauChu__1  form-control'    value="" >

 *** Lệnh {RowNumber} thêm vào HTML3 để ra vị trí dòng


3. Cách lênh thay thế khi soạn html
{col_name}    - Tên cột đang xử lý
{style_class}      
{style_css}
{value}           - Giá trị cột đang xử lý (đưa vào input)
{value_htmlendcode}     
   - Endcode HTML
{value_ROOT}
  - Lấy giá trị gốc đã lưu (áp dụng trong TH nội dung bị endcode  HTML)


{placeholder}
{input_add}
{para_01}
{para_02}
{para_03}
{para_04}
{para_05}
{para_ii}
{para_iii}
{3}  -> thay value
{tree_parent}              - Khi có SYS_KEY_Parent hiển thị sơ đồ cấp dữ liệu
{key_of_row}   
          * nếu table có 2 cột _SYS_KEY, TEN, LOP
                 Form đang tạo cột TEN thì tại đây cần lấy giá trị của _SYS_KEY thì gõ {key_of_row}  

4. Cú pháp

   * Cú pháp trong điều khiển như sau:
      TenTruong:Kiểu/->/ts1/-/ts2/-/ts3/-/ts4/-/ts5/->/ts_ii

  - Tên Cột đang xử lý XML sẽ thay vào {col_name}
  - ts1 sẽ thay {para_01} ... cho đến 5
  - ts_ii sẽ thay {para_ii}

      Để tạo dữ liệu có 2 kiểu:
      ts1: vl1/#/vl2/##/dp1/#/dp2 cách nhau dấu /##/ để tạo value và display khác nhau 
             Sẽ tạo ra 1 DataTable  MoTa và MoTa_2           
              Trong lệnh foreach dùng lệnh
                            {#{para_02}#} để nạp value
                            {#{para_03}#} để nạp display
   
      ts1: $tenfile.xml

  - Giá trị nạp vào điều khiển sẽ thay {value}
  - Có thể sử dụng hàm <iif-E>
  -   {foreach:  :foreach}   : các điều kiển có truy cập đối tượng sẽ dùng được và Type=List
  Ví dụ:
  {foreach:{#TenCot_DataList#}:foreach}
     Tham số thay thế: {para_02}  và   {para_03}

  -  _foreachCol:
  Ví dụ:
      {foreach:
           {    {_foreachCol: {_col_name_}:'{_value_}',:foreachCol_}     },
      :foreach}
{#SYS_NUM_ORDER#} : thứ tự dòng từ 1 cho đến tổng dòng

Thứ tự xử lý lệnh:
hàm <iif-EC>   thêm từ C
đến hàm {foreach:  :foreach}
Trong foreach sẽ thực thi hàm <iif-E>

<iif-EC>
<ValC>1=2</ValC>
Nếu đúng
<ElseC/>
Nếu sai
</iif-EC>


*** Một số lệnh xử lý thay thế trong phần HTML, HTML_2
{#Date}    - ngày kiểu dd/MM/yyyy
{#Time}   -  giờ kiểu HH:mm
{#DateTime}    - ngày kiểu dd/MM/yyyy HH:mm ss
{#NewGuid}     -  mã duy nhất trên thế giới
{#SysUser-UserName}  - tên username đang truy cập
{#SysUser-Name}  - Full name user
{RowNumber}   - nếu đang trong grivew thì lấy vị trí dòng từ 1 --> tổng bảng ghi

  Đối với Grid
{{_VALUE_}}

Tên đặt: control_frm_input_Grid_Link
Thêm R để xử lý hàm if

<iif-ER>
<ValR>'{value}'=''</ValR>
C
<ElseR/>
<a class="btn btn-primary" href="{value}" role="button">Xem</a>
</iif-ER>

*** Cách tạo input trong Gridview có vài điểm khác như sau
{RowNumber}   : thư tự bảng ghi
{_SYS_KEY}  : KEY lặp theo từng dòng
{file}    : tên file xml đang xử lý


 

Bài viết liên quan:

Cách tạo các input html để nhúng vào page html