<Cthuvien:GridX>

Mô tả

Cthuvien:GridX là một control lưới dữ liệu (Grid/Table) mở rộng từ GridView của ASP.NET. Control cung cấp giao diện bảng tương tác phía client với khả năng điều hướng bằng bàn phím, chọn hàng, tô màu trạng thái, phân trang ảo (hiển thị/ẩn hàng), và tích hợp sâu với hệ thống JavaScript GridX_*.

GridX hỗ trợ nhiều loại lưới (loai) khác nhau để phục vụ các nhu cầu hiển thị và nhập liệu: lưới chỉ xem (X), lưới nhập liệu (N/C), lưới lớn (L), v.v. Mỗi loại ảnh hưởng đến hành vi focus, màu sắc ô, và phím tắt điều hướng.

---

Thuộc tính

Thuộc tính cấu trúc

Tên	Kiểu	Mặc định	Có thể có	Mục đích	Ghi chú
loai	string	"X"	X, N, C, L, I	Loại lưới, ảnh hưởng đến hành vi focus, màu sắc và phím tắt	X: chỉ xem; N/C: nhập liệu có focus ô; L: lưới lớn; I: lưới đặc biệt
tde	string	"C"	"C", ""	Ẩn/hiện tiêu đề cột	"C": hiện tiêu đề
rong	string	"0"	Số nguyên dương	Độ rộng tổng của lưới (px)	Nếu là 0, tự tính từ tổng độ rộng các cột
cot	string	""	Chuỗi cách nhau bởi dấu phẩy	Tên trường (field name) của từng cột theo thứ tự	Luôn có cột ẩn leGrid ở vị trí đầu
cotAn	string	""	Chuỗi tên cột cách nhau bởi dấu phẩy	Danh sách cột bị ẩn khi render	Cột fff luôn được thêm vào nếu có trong cấu trúc
cotRong	string	""	"tenCot:px,tenCot:px"	Đặt lại độ rộng cho từng cột chỉ định	Định dạng: "ma:80,ten:200"
hangKt	int	0	Số nguyên dương	Số hàng hiển thị trên một trang (page size ảo)	Nếu là 0, mặc định là 5000 (hiển thị tất cả)

Thuộc tính xác thực & dữ liệu

Tên	Kiểu	Mặc định	Có thể có	Mục đích	Ghi chú
cotNH	string	""	Chuỗi tên cột	Danh sách cột bắt buộc phải nhập ít nhất một	Dùng để kiểm tra trước khi lưu
cotS	string	""	Chuỗi tên cột	Các cột chứa dữ liệu kiểu số	Được chuyển về chữ thường khi lưu
cotN	string	""	Chuỗi tên cột	Các cột chứa dữ liệu kiểu ngày	Được chuyển về chữ thường khi lưu
cotT	string	""	Chuỗi tên cột	Cột đánh thứ tự tự động	Được chuyển về chữ thường khi lưu

Thuộc tính sự kiện (callback)

Tên	Kiểu	Mặc định	Mục đích	Ghi chú
hamRow	string	""	Tên hàm JavaScript gọi khi đổi hàng active (RowChange)	Được gọi qua GridX_hamRow(gridId)
hamUp	string	""	Tên hàm JavaScript gọi sau khi cập nhật ô	Được gọi qua GridX_hamUp(event) với tham số event
hamKtra	string	""	Tên hàm JavaScript gọi sau khi nhận giá trị	Dùng để kiểm tra dữ liệu
hamTra	string	""	Hàm trả về giá trị	Dùng khi lưới đóng vai trò là popup chọn giá trị
hamCl	string	""	Hàm xử lý sự kiện click vào ô	Cho phép can thiệp hành động click
hamLke	string	""	Hàm liên kết dữ liệu bên ngoài	Thường dùng để load danh sách từ server

Thuộc tính hiển thị & giao diện

Tên	Kiểu	Mặc định	Mục đích	Ghi chú
truot	string	"K"	Cơ chế trượt trang (scroll ảo)	"D": hiển thị tất cả (không ẩn hàng); "K": có trượt
cthich	string	""	Tooltip cho tiêu đề cột	Định dạng: "tenCot:nội dung|tenCot:nội dung"
maucot	string	""	Màu nền đặc biệt cho từng cột
kieuLoc	string	""	Kiểu lọc dữ liệu: X chỉ xếp, T có tìm kiếm	Chỉ có hiệu lực khi hamLke được khai báo

---

Chức năng JavaScript

Toàn bộ tương tác phía client được xử lý bởi các hàm GridX_* trong file JS đính kèm.

Điều hướng & chọn hàng

Hàm	Mô tả
GridX_click(event)	Xử lý click chuột. Nếu giữ Ctrl, toggle chọn/bỏ chọn hàng. Nếu click thường, đặt hàng đó làm active và gọi hamRow.
GridX_keyN(event)	Xử lý phím ↑↓ PgUp PgDn cho lưới không có slide (phân trang phía client).
GridX_keyX(event)	Xử lý phím ↑↓ PgUp PgDn cho lưới có slide (phân trang phía server).
GridX_datA(gridId, hang, cot)	Đặt hàng chỉ định làm active (hiện icon, tô màu).
GridX_thoiA(gridId, hang)	Hủy trạng thái active của một hàng (hoặc tất cả nếu hang là null).
GridX_nhay(gridId, hang, cot)	Kết hợp datA và gọi hamRow, thường dùng sau khi chuyển trang slide.

Tô màu

Hàm	Mô tả
GridX_doiMauH(gridId, hang, dk)	Đổi màu toàn bộ hàng: 'f' → xanh cyan (được chọn/active), 'b' → trắng (bình thường).
GridX_laiMau(gridId)	Quét lại toàn bộ lưới và tô lại màu cho các hàng có cột ccc = 'f'.
GridX_doiMauBF(event)	Đổi màu ô và control khi focus/blur (dùng trong lưới nhập liệu).
GridX_Fb_hangChon(gridId, hang)	Kiểm tra hàng có đang được chọn (màu xanh) hay không.

Lấy & đặt dữ liệu

Hàm	Trả về	Mô tả
GridX_Fas_layGtri(gridId, hang, cot)	Array hoặc string	Lấy giá trị một hoặc nhiều cột tại hàng chỉ định.
GridX_Fas_layGtriA(gridId, cot)	Array hoặc string	Lấy giá trị tại hàng đang active.
GridX_Fdt_layGtri(gridId, cot)	Array 2 chiều	Lấy giá trị toàn bộ lưới cho các cột chỉ định.
GridX_Fdt_cotGtriC(gridId, cot)	Array 2 chiều	Lấy giá trị các hàng đang được chọn (multi-select).
GridX_datGtri(gridId, hang, cot, gtri, dk, dat)	—	Đặt giá trị vào hàng. dk='C' sẽ xóa trắng hàng trước khi đặt.
GridX_datGtriA(gridId, cot, gtri, dk, dat)	—	Đặt giá trị vào hàng đang active.
GridX_datBang(gridId, cot, dt)	—	Đặt toàn bộ dữ liệu vào lưới (làm mới lưới trước).
GridX_chenBang(gridId, vtri, cot, dt)	—	Chèn thêm dữ liệu vào lưới tại vị trí chỉ định.

Quản lý hàng

Hàm	Mô tả
GridX_chenHang(gridId, vtri, soHang)	Chèn thêm hàng mới tại vị trí vtri. Nếu vtri < 1, thêm vào cuối.
GridX_boHang(gridId, vtri, soHang)	Xóa soHang hàng từ vị trí vtri.
GridX_boChon(gridId, dk)	Xóa các hàng đang được chọn (dk='C') hoặc không được chọn (dk='K').
GridX_chuyenHang(gridId, ch)	Hoán đổi hàng active với hàng kề (ch=-1: lên trên, ch=1: xuống dưới).
GridX_ThemHang(gridId)	Tự động thêm hàng mới sau khi nhập liệu đến hàng cuối.
GridX_chinh(gridId)	Cân chỉnh lại số hàng: bỏ hàng trắng thừa hoặc bổ sung hàng trắng thiếu.
GridX_moi(gridId, hangSo)	Làm mới toàn bộ lưới (xóa trắng dữ liệu, cân chỉnh hàng).

Tìm kiếm

Hàm	Trả về	Mô tả
GridX_Fi_timHangA(gridId)	int	Chỉ số hàng đang active.
GridX_Fi_timHangC(gridId)	int	Chỉ số hàng cuối cùng có dữ liệu.
GridX_Fi_timHangT(gridId)	int	Chỉ số hàng trống đầu tiên.
GridX_Fi_timHangD(gridId, cot, gtri, dk)	int	Tìm hàng thỏa điều kiện so sánh đơn.
GridX_Fb_hangTrang(gridId, hang, cot)	bool	Kiểm tra hàng có trống không.
GridX_Fb_gridTrang(gridId)	bool	Kiểm tra lưới có rỗng không.

Quản lý cột

Hàm	Mô tả
GridX_anCot(gridId, cotAn, dat)	Ẩn (dat=true) hoặc hiện (dat=false) các cột chỉ định.
GridX_rongCot(gridId, ten)	Đặt lại độ rộng cột theo định dạng "tenCot:px".
GridX_titCot(gridId, cot, ten)	Đổi tiêu đề hiển thị của cột.
GridX_dropCot(gridId, cot, ch)	Đặt danh sách chọn (dropdown) cho cột chỉ định.

---

Khởi tạo

Quá trình khởi tạo phía server (OnPreRender & OnLoad)

Khi trang ASP.NET render, GridX thực hiện các bước sau:

1. Tính toán cấu hình:

• Lấy danh sách tên cột từ thuộc tính cot hoặc tự quét Columns[i].DataField nếu không khai báo.
• Luôn thêm cột ẩn leGrid ở đầu làm cột chứa icon chỉ hàng active.
• Tính độ rộng tổng: nếu rong = 0, tự cộng độ rộng từng cột (bỏ qua các cột trong cotAn).

2. Render attribute lên thẻ <table>:

<table id="grid1"
    cot="ma,ten,ngay"
    width="600px"
    loai="X"
    hangKt="10"
    cotAn="fff"
    hamRow="grid1_rowChange"
    ...>

3. Render từng hàng dữ liệu:

• Hàng 0 (<thead>): tiêu đề cột, CSS class gridX_cot.
• Hàng 1..n: mỗi GridViewRow được gắn thêm:
  • Attribute hang="1", hang="2", ... (chỉ số hàng, dùng để JS định vị).
  • onkeydown="GridX_key(event,'gridId')" để xử lý phím.
  • TabIndex="-1" để hàng có thể nhận focus.
  • Ô đầu tiên (cột leGrid) chứa một thẻ <img> ẩn (display:none) dùng làm icon mũi tên chỉ hàng active.
  • Mỗi ô còn lại: onmousedown="GridX_click(event)".

4. Sau khi render (OnLoad, lần đầu):

• Đăng ký script khởi tạo client:

  GridX_cbi('gridId');

• Đặt dữ liệu mặc định (lưới rỗng) bằng P_GRID_MOI: tạo DataTable theo cấu trúc cột, thêm 1 hàng trắng, bind vào lưới.

Quá trình khởi tạo phía client (GridX_cbi)

Khi DOM sẵn sàng, hàm GridX_cbi(gridId) chạy tuần tự:

1. Ẩn cột (cotAn): gọi GridX_anCot để ẩn tất cả cột khai báo trong attribute cotAn.
2. Đặt độ rộng cột (cotRong): gọi GridX_rongCot nếu có attribute cotRong.
3. Đặt tooltip cột (cthich): gán title cho các ô tiêu đề theo cú pháp "tenCot:nội dung|...".
4. Làm mới lưới (GridX_moi): xóa trắng dữ liệu, cân chỉnh số hàng bằng hangKt, hiển thị đúng số hàng.

---

Ví dụ

Lưới xem đơn giản

<Cthuvien:GridX
    ID="gDSach"
    runat="server"
    loai="X"
    cot="ma,ten,diachi,dienthoai"
    cotAn="ma"
    hangKt="15"
    hamRow="gDSach_rowChange">
    <Columns>
        <asp:BoundField DataField="leGrid" HeaderText=" " ItemStyle-Width="14px" />
        <asp:BoundField DataField="ma" HeaderText="Mã" ItemStyle-Width="60px" />
        <asp:BoundField DataField="ten" HeaderText="Tên" ItemStyle-Width="200px" />
        <asp:BoundField DataField="diachi" HeaderText="Địa chỉ" ItemStyle-Width="250px" />
        <asp:BoundField DataField="dienthoai" HeaderText="Điện thoại" ItemStyle-Width="100px" />
    </Columns>
</Cthuvien:GridX>

HTML render tương ứng:

<table id="ctl00$MainContent$gDSach"
    cot="ma,ten,diachi,dienthoai"
    cotAn="ma,fff"
    loai="X"
    hangKt="15"
    width="624px"
    hamRow="gDSach_rowChange"
    class="...">
  <tr class="gridX_cot">
    <th style="width:14px"> </th>
    <th style="width:60px">Mã</th>
    <th style="width:200px">Tên</th>
    ...
  </tr>
  <tr hang="1" onkeydown="GridX_key(event,'...')" tabindex="-1">
    <td tabindex="-1"><input type="image" src="~/images/bitmaps/phai.gif" style="display:none" /></td>
    <td>...</td>
    ...
  </tr>
</table>

JavaScript rowChange:

function gDSach_rowChange() {
    var b_ma = GridX_Fas_layGtriA('gDSach', 'ma');
    // xử lý khi đổi hàng
}

---

Lưới nhập liệu có thêm/xóa hàng

<Cthuvien:GridX
    ID="gChiTiet"
    runat="server"
    loai="N"
    cot="stt,ma,ten,sl,dongia"
    cotS="sl,dongia"
    cotT="stt"
    hangKt="10"
    hamUp="gChiTiet_hamUp"
    hamRow="gChiTiet_rowChange">
    <Columns>
        <asp:BoundField DataField="leGrid" HeaderText=" " ItemStyle-Width="14px" />
        <asp:BoundField DataField="stt" HeaderText="STT" ItemStyle-Width="40px" />
        <asp:BoundField DataField="ma" HeaderText="Mã" ItemStyle-Width="80px" />
        <asp:BoundField DataField="ten" HeaderText="Tên hàng" ItemStyle-Width="200px" />
        <asp:BoundField DataField="sl" HeaderText="SL" ItemStyle-Width="60px" />
        <asp:BoundField DataField="dongia" HeaderText="Đơn giá" ItemStyle-Width="80px" />
    </Columns>
</Cthuvien:GridX>

---

Lấy dữ liệu toàn bộ lưới (phía JavaScript)

// Lấy dữ liệu tất cả hàng có dữ liệu (lọc theo cột hoa)
var b_dt = GridX_Fdt_cotGtriH('gChiTiet');
var a_cot = b_dt[0];  // ['ma', 'ten', 'sl', 'dongia']
var a_gtri = b_dt[1]; // [[...], [...], ...]

// Lấy giá trị hàng đang active
var a_hang = GridX_Fas_layGtriA('gChiTiet', 'ma,ten,sl');

// Tính tổng cột số lượng
var b_tongSL = GridX_Fn_Tong_KDK('gChiTiet', 'sl');

---

Đặt dữ liệu từ server vào lưới (phía JavaScript)

// b_ch là chuỗi dữ liệu dạng bảng từ server
function loadDanhSach(b_ch) {
    GridX_datBang('gDSach', b_ch);
    // Sau khi load, đặt active hàng đầu
    GridX_datA('gDSach', 1);
    GridX_hamRow('gDSach');
}