<Cthuvien:DR_list>

thông tin

Controls thay thế: BSSList

Mô tả

Cthuvien:DR_list là một control danh sách chọn mở rộng (Dropdown List / ComboBox) được xây dựng trên nền <input type="text" />. Người dùng có thể click hoặc dùng phím mũi tên/Space để mở danh sách và chọn một trong các giá trị quy định sẵn (lke).

Control hỗ trợ:

Tách biệt giá trị hiển thị (lke) và giá trị lưu trữ (tra).
Tự động tích hợp với lưới GridX khi đặt trong ô lưới (CssClass bắt đầu bằng css_G).
Đặt giá trị mặc định khi load form qua gtriDau.
Kiểm soát hành vi xóa/làm mới form qua kt_xoa.

Thuộc tính

Thuộc tính chung

Tên	Kiểu	Mặc định	Có thể có	Mục đích	Ghi chú
`ten`	string	`""`		Tên hiển thị trong thông báo lỗi/sự kiện	Nếu để trống sẽ dùng giá trị `ID`
`truot`	string	`""`		Trượt menu/danh sách theo màn hình (cơ chế JS)
`rong`	int	`0`	Số nguyên dương	Độ rộng (px) của menu thả xuống	Nếu `0`, lấy theo độ rộng thẻ text tự động
`rongB`	bool	`false`	`true` / `false`	Ràng buộc độ rộng menu popup theo thẻ DIV bao ngoài	Nếu `true`, gán `rong="C"` trên client thay vì giá trị px
`nhap`	bool	`true`	`true` / `false`	Cho phép nhập tay hay không (`C`/`K` ở client)	Khi đặt trong lưới (`css_G...`) luôn là `K` bất kể khai báo
`kt_xoa`	string	`"K"`	`K`, `G`, `L`, `X`	Hành vi xóa/giữ giá trị khi làm mới form	`K`: không xóa; `G`: dùng cho mã; `L`: giữ khi làm mới; `X`: luôn xóa
`gtriDau`	string	`null`		Giá trị mặc định khi form load	Tự động tìm vị trí tương ứng trong `tra` để hiển thị `lke`

Thuộc tính dữ liệu

Tên	Kiểu	Mặc định	Có thể có	Mục đích	Ghi chú
`lke`	string	`""`	Chuỗi cách nhau bằng `,` hoặc `\|`	Danh sách text hiển thị trên dropdown
`tra`	string	`""`	Chuỗi cách nhau bằng `,` hoặc `\|`	Giá trị lưu trữ tương ứng 1-1 với `lke`	Nếu không khai báo, mặc định bằng `lke`
`traKieu`	string	`"A"`	`A`, `T`	Định dạng giá trị trả về	`A`: chỉ trả `value`; `T`: trả `value\|label`

Khởi tạo

Quá trình render phía server (`OnPreRender`)

Khi trang render, DR_list thực hiện tuần tự:

1. Xử lý dữ liệu:

Nếu tra để trống, gán tra = lke.
Nếu ten để trống, gán ten = ID.
Nếu gtriDau được khai báo, gọi P_DAT(gtriDau) để hiển thị giá trị mặc định và tính vtri (index trong tra).

2. Gán attribute lên thẻ <input>:

Attribute	Giá trị	Mô tả
`tenKieu`	`"DR_list"`	Xác định loại control
`ten`	`ten` hoặc `ID`	Tên dùng cho thông báo/lỗi
`ten_goc`	`ID`	ID gốc của control
`lke`	Giá trị `lke`	Danh sách text hiển thị
`tra`	Giá trị `tra` hoặc `lke`	Danh sách giá trị lưu trữ
`dropL`	`"L"`	Đánh dấu là control dạng dropdown
`vtri`	Index đang chọn	Vị trí hiện tại trong mảng `tra`
`traKieu`	Giá trị `traKieu`	Kiểu kết quả trả về
`nhap`	`"C"` / `"K"`	Có cho nhập tay hay không
`kt_xoa`	Giá trị `kt_xoa`	Cơ chế xóa/làm mới
`gtriDau`	Giá trị `gtriDau`	Giá trị mặc định (nếu có)
`rong`	Số px hoặc `"C"`	Độ rộng dropdown
`truot`	Giá trị `truot`	Cơ chế trượt màn hình

3. Gán sự kiện client:

Control luôn gắn:

onmousedown="form_LIST_CLICK(this, 'L');"
onkeydown="lke_XUONG(event);"

Nếu control nằm ngoài lưới và đã có onchange khai báo sẵn, hệ thống tự thêm kiểm tra danh sách vào trước:

onchange="list_P_KTRA(this);<hàm_cũ>;"

Nếu control nằm trong lưới (CssClass bắt đầu bằng css_G), render theo cơ chế lưới — không cho nhập tay, tự động gọi cập nhật GridX:

nhap="K"
onchange="list_P_KTRA(this); GridX_hamUp(event);"
onblur="GridX_doiMauBF(event);"
onfocus="GridX_doiMauBF(event);"

4. CSS class mặc định:

Nếu CssClass chưa được đặt, control tự gán css_list.

Chức năng JavaScript

Điều hướng & mở danh sách

`lke_XUONG(event)`

Xử lý sự kiện onkeydown của control:

Space / ↓ (40): Mở dropdown. Nếu là DR_list thì truyền cờ 'L', ngược lại là 'K'.
Enter (13): Chuyển focus sang ô tiếp theo (tương đương Tab).
F1 (112): Mở form tra cứu (goiForm).
Các phím khác: gọi form_LIST_DO() để xử lý logic list.

// Tự động gắn qua onkeydown="lke_XUONG(event);"

Đặt & lấy giá trị

`lke_P_DAT(b_ctrId, b_gtri)`

Đặt giá trị cho control. b_gtri có thể là:

Array [traAn, textAn]: gán trực tiếp giá trị ẩn và text hiển thị.
String dạng "value|label": tách ra và gán.
String đơn: gán cả traAn lẫn textAn bằng cùng giá trị.

Sau khi đặt, cập nhật attribute traAn (giá trị lưu) và textAn (text hiển thị) lên control.

lke_P_DAT('GT', 'F|Nữ');   // Đặt giá trị "F", hiển thị "Nữ"
lke_P_DAT('GT', ['F', 'Nữ']); // Tương đương dạng array
lke_P_DAT('GT', '');        // Xóa trắng control

`lke_Fs_TRA(b_ctrId, b_dk) → string`

Lấy giá trị lưu trữ của control. So sánh value hiện tại với textAn (không phân biệt hoa thường):

Nếu khớp: trả về traAn. Nếu traKieu='T' hoặc b_dk='T', trả về "traAn|textAn".
Nếu không khớp (người dùng tự gõ không hợp lệ): trả về chuỗi rỗng.

var b_ma = lke_Fs_TRA('GT');      // Trả về "F"
var b_full = lke_Fs_TRA('GT','T'); // Trả về "F|Nữ"

`lke_Fs_GTRI(b_vuId, b_ten, b_dk) → string`

Lấy giá trị control theo tên (ten) trong vùng (b_vuId). b_dk quyết định phần nào được trả về:

b_dk = 'A': trả về toàn bộ chuỗi "value|label".
b_dk = 'T': trả về phần label.
Mặc định (các giá trị khác): trả về phần value.

var b_ma = lke_Fs_GTRI('frm1', 'Giới tính');       // Trả về "F"
var b_ten = lke_Fs_GTRI('frm1', 'Giới tính', 'T'); // Trả về "Nữ"

`lke_P_TeDAT(b_vuId, b_ten, b_gtri)`

Đặt giá trị cho control theo tên (ten) trong vùng (b_vuId). Là wrapper của lke_P_DAT dành cho trường hợp không có trực tiếp tham chiếu đến control.

lke_P_TeDAT('frm1', 'Giới tính', 'F|Nữ');

`lke_P_TeDATj(b_vuId, b_ten, b_js)`

Đặt giá trị từ một chuỗi JSON dạng bảng (b_js). Tự động trích xuất cặp value|label từ kết quả JSON và gọi lke_P_TeDAT.

lke_P_TeDATj('frm1', 'Giới tính', b_jsonString);

Kiểm tra & xử lý kết quả

`lke_P_KTRA(b_ctr)`

Kiểm tra tính hợp lệ của giá trị đang hiển thị. Nếu value khác textAn (người dùng tự gõ không khớp danh sách), tự động xóa trắng control bằng lke_P_DAT(b_ctr, '|').

// Tự động gắn qua onchange="list_P_KTRA(this);..."

`lke_P_VTRI_KQ(b_kq)`

Xử lý kết quả trả về từ server (JSON) sau khi tra cứu popup. Nếu có lỗi thì hiển thị thông báo, ngược lại gọi lke_P_VTRI_DAT để đặt giá trị.

Cấu trúc JSON trả về:

{ "ctrid": "GT", "vtri": 1, "ma": "F", "ten": "Nữ" }

`lke_P_VTRI_DAT(b_ctrId, b_hang, a_dt)`

Đặt giá trị vào control dựa trên kết quả chọn từ popup:

Nếu b_hang < 2 hoặc control có luu='K': gọi lke_P_DAT và list_P_ROW để cập nhật.
Ngược lại (có nhiều dòng kết quả hơn): trả focus về control để người dùng tiếp tục.

Ví dụ

<Cthuvien:DR_list
    ID="GT"
    runat="server"
    ten="Giới tính"
    lke="Nam,Nữ,Khác"
    tra="M,F,O"
    gtriDau="M" />

HTML render tương ứng:

<input
    id="ctl00$MainContent$GT"
    type="text"
    class="css_list"
    tenKieu="DR_list"
    ten="Giới tính"
    ten_goc="GT"
    gtriDau="M"
    kt_xoa="K"
    onmousedown="form_LIST_CLICK(this, 'L');"
    onkeydown="lke_XUONG(event);"
    nhap="C"
    lke="Nam,Nữ,Khác"
    tra="M,F,O"
    dropL="L"
    vtri="0"
    traKieu="A"
    value="Nam" />

Không khai báo `tra`

<Cthuvien:DR_list
    ID="TT"
    runat="server"
    ten="Trạng thái"
    lke="Mới,Đang xử lý,Hoàn thành" />

Vì không khai báo tra, control tự hiểu tra = lke:

tra = "Mới,Đang xử lý,Hoàn thành"

Dùng dấu `|` để phân tách

<Cthuvien:DR_list
    ID="L"
    runat="server"
    ten="Loại"
    lke="Loại A|Loại B|Loại C"
    tra="A|B|C"
    gtriDau="B" />

Đặt trong lưới GridX

<asp:BoundField DataField="gt" HeaderText="Giới tính" ItemStyle-Width="80px" />

<Cthuvien:DR_list
    ID="gt"
    runat="server"
    CssClass="css_Glist"
    lke="Nam,Nữ"
    tra="M,F" />

Render trong ô lưới:

<input
    class="css_Glist"
    tenKieu="DR_list"
    nhap="K"
    lke="Nam,Nữ"
    tra="M,F"
    dropL="L"
    onmousedown="form_LIST_CLICK(this, 'L');"
    onkeydown="lke_XUONG(event);"
    onchange="list_P_KTRA(this); GridX_hamUp(event);"
    onblur="GridX_doiMauBF(event);"
    onfocus="GridX_doiMauBF(event);" />

Mô tả​

Thuộc tính​

Thuộc tính chung​

Thuộc tính dữ liệu​

Khởi tạo​

Quá trình render phía server (OnPreRender)​

Chức năng JavaScript​

Điều hướng & mở danh sách​

lke_XUONG(event)​

Đặt & lấy giá trị​

lke_P_DAT(b_ctrId, b_gtri)​

lke_Fs_TRA(b_ctrId, b_dk) → string​

lke_Fs_GTRI(b_vuId, b_ten, b_dk) → string​

lke_P_TeDAT(b_vuId, b_ten, b_gtri)​

lke_P_TeDATj(b_vuId, b_ten, b_js)​

Kiểm tra & xử lý kết quả​

lke_P_KTRA(b_ctr)​

lke_P_VTRI_KQ(b_kq)​

lke_P_VTRI_DAT(b_ctrId, b_hang, a_dt)​

Ví dụ​

Dropdown giới tính​

Không khai báo tra​

Dùng dấu | để phân tách​

Đặt trong lưới GridX​