Table

1 số chức năng sử dụng trong table

TableExpandColumn

Chức năng để ẩn/hiện column trong table

// How to use
//Khai báo var
let shtable;

//Run method
//#table thay bằng id table
shtable = $("#table").TableExpandColumn({
    shtoogle: $('.shtoogle')
});

// Trên  table cần xác định cột ẩn/hiện 
// Trên UI đặt control ẩn hiện ở trong class toggle
 <div class="toggle">
     <div class="collapse position-absolute z-index-3 end-1 top-100 mt-2" id="colLists" style="min-width:250px;">
         <ul class="card card-body text-dark text-capitalize opacity-10 max-height-500 overflow-y">
             <li class="d-flex py-2 mb-3 border-bottom">
                 <div class="form-check form-switch">
                     <input class="shtoogle form-check-input" type="checkbox">
                 </div>
                 <p class="text-sm mb-0">@Local["Cố định cột"]</p>
             </li>
             <li class="d-flex">
                 <div class="form-check form-switch">
                     <input class="shtoogle form-check-input" data-name="doccode" type="checkbox">
                 </div>
                 <p class="text-sm">@Local["Mã hồ sơ"]</p>
             </li>
             <li class="d-flex">
                 <div class="form-check form-switch">
                     <input class="shtoogle form-check-input" data-name="custoldcode" type="checkbox">
                 </div>
                 <p class="text-sm">@Local["Mã khách hàng cũ"]</p>
             </li>
         </ul>
     </div>
 </div>
 // Trong table thì add data-name
 

tablesort

// How to use
$("#table").sort()

// Mặc định sẽ sort tất cả column header
// Set giá trị không sort bằng class no-sort
<th class="no-sort" >@Local["Hủy"]</th>

// Mặc định sort theo 0-9 A-Z
// Chỉnh sửa loại theo cột
<th style="min-width: 150px;" sortby="s"> @Local["Khách hàng"]</th>
//Thay thế sortby theo dữ liệu cột

switch (sortbytype) {
     case 'd': {
         // Double // Số
     }
     case 's': {
         // String
         break;
     }
     case 'datetext': {
         // Dạng ddmmyyyy
         break;
     }
     default: {
         // Mặc định sort theo 0-9 A-Z 
         break;
     }
 }

table freeze

Chức năng để cố định số lượng cột tính từ trái sang.

// How to use
YÊU CẦU Trước là table cần sử dụng TableExpandColumn
// Trong table add class vt-table-freeze
// vt-table-freeze
<table class="table vt-table vt_table_notrps mb-0 vt-table-freeze" id="RP_Grid">
</table>

//Trong danh sách collapse ẩn/hiện cột
//Bổ sung
//data-name="freeze"
//data-freeze="4" -- Số lượng cột cố định tính từ trái sang
<li class="d-flex py-2 mb-3 border-bottom">
    <div class="form-check form-switch">
        <input class="shtoogle form-check-input" data-name="freeze" data-freeze="4" type="checkbox">
    </div>
    <p class="text-sm mb-0">@Local["Cố định cột"]</p>
</li>