Hướng dẫn làm datatable phân cấp bằng javascript

Hôm nay trong một lần làm dự án mình được giao nhiệm vụ làm chức năng có cái bảng phân cấp dữ liệu giống cây thư mục vậy đó nó sẽ cho phép người dùng tích chọn các dòng của nó trong bảng theo thứ tự cha con, sau một hồi tìm tòi trên mạng để làm được chức năng này nhưng không có mấy gợi ý thì mình đã vô tình tìm được một ý tưởng có thể làm được cái datatable kiểu phân cấp thế này nên hôm nay mình sẽ chia sẻ với các bạn cách để làm nó.

Đầu tiên chúng ta sẽ tạo một dự án gồm có các file sau index.html, style.css, và script.js.

Về thư viện Jquery Tree Table bạn có thể tìm nó trên google và làm theo các bước hướng dẫn trong tài liệu thư viện để cài đặt nó vào dự án của chúng ta.

Đầu tiên trong file index.html bạn sẽ viết và dòng code đơn giản để tạo ra cấu trức bảng của chúng ta như sau.

Tạo cấu trúc bảng HTML

Chỉ cần tạo cấu trúc bảng đơn giản mà bạn muốn sử dụng là được. Ý tưởng làm cái bảng này là mình sẽ sử dụng thư viện Jquery TreeTable để tạo một bảng phân cấp sau đó chúng ta sẽ viết thêm những chức năng mà chúng ta muốn như của mình là các checkbox để cho người dùng có thể lựa chọn.

Sau khi bạn đã tạo được bảng bằng HTML xong thì bạn bắt đầu viết javascript cho nó nhé.

Đầu tiên chúng ta hãy nhìn cấu trúc dữ liệu data của chúng chúng ta xem như thế nào nhé.

Cấu trúc dữ liệu

Như cấu trúc dữ liệu của mình sẽ là một mảng chứa các đối tượng và chúng sẽ quan hệ với nhau bằng cặp id và IdParent tức là thằng con chứa id của thằng cha. Dựa vào cấu trúc này chúng ta hãy bắt đầu render các dòng để gắn vào trang html của chúng ta.

Đầu tiên viết một hàm để ánh xạ các control được sử dụng trên web vào các biến để sử dụng một cách thuận tiện hơn.

Như bạn thấy hàm này khá là đơn giản đúng không nào.

Sau đó chúng ta sẽ viết một hàm render dữ liệu ra HTML.

Render dữ liệu

Như bạn thấy hàm này rất đơn giản chúng ta chỉ lặp qua mảng dữ liệu được truyền vào hàm này và xét điều kiện kiểm tra là idParent có khác null hay không để in ra các dòng cha hoặc con trong bảng dữ liệu theo cấu trúc dữ liệu của Jquery TreeTable.

Tiếp theo chúng ta sẽ viết chức năng chọn tất cả của checbox chọn tất cả đầu tiên chức năng này viết khá đơn giản như sau

Checkbox chọn tất cả

Như bạn thấy trong đoạn code trên mình lắng nghe sự kiện click của checkbox chọn tất cả, khi check box này được chọn nó sẽ lấy tất cả các checkbox con có class là chk và sau đó lặp qua từng item trong danh sách con lấy được và đặt thuộc tính checked của nó theo thuộc tính checked của checkbox cha là chkAll.

Rổi giờ chúng ta sẽ viết tiếp sự kiện khi nhấn vào các nút checkbox của các nút con.

Gán sự kiện cho các nút con

Đoạn code trên đầu tiên chúng ta sẽ lấy danh sách các checkbox có class là chk để tiến hành gán sự kiện cho các checkbox con. Đầu tiên là lặp qua các phần tử của danh sách và gán sự kiện onclick cho nó khi click thì nó sẽ thực hiện hành động là lấy giá trị của checkbox vừa được click tức là id của item được chọn trong cái mảng data của mình sau đó sẽ lấy danh sách các các checkbox con thuộc checkbox đó thông qua id đã lấy được và nó sẽ lặp qua danh sách con này và gán thuộc tính checked của các node con theo node cha. Ở dưới chúng ta còn có hai hàm nữa là CheckStatusChkAll(),CheckParent(); mình sẽ nói ở phần sau.

Hàm CheckStatusChkAll() được sử dụng để kiểm tra xem có còn nút con nào được chọn không nếu còn thì nút chon tất cả sẽ được bật còn nếu không còn thì sẽ bỏ chọn nút chọn tất cả này.

Hàm kiểm tra nút cha

Còn hàm CheckParent() được sử dụng đển kiểm tra và đặt trạng thái của các nút cha khi click chọn nút con nó cũng kiểm tra và thực hiện hành động như hàm kiểm tra nút chọn tất cả thôi.

Hàm set chọn các nút cha

Hàm này cũng khá đơn giản nó sẽ lần theo cái idParent và tìm được nút cha và set giá trị checked bằng giá trị checked của con.

Thế là chỉ bằng vài bước đơn giản bạn đã có thể tạo được một bảng dữ liệu kiểu phân cấp mà có thể chọn checkbox theo cấu trúc cây rồi. HI vọng phần hướng dẫn này có thể giúp các bạn giải quyết được vấn đề mà mình gặp phải.