VANHIEP.NET - Làm web giá rẻ - Thiết Kế Website - Thiết Kế Ứng Dụng Mobile
Xây dựng hàm đệ quy để hiển thị dữ liệu dạng bảng

Xây dựng hàm đệ quy để hiển thị dữ liệu dạng bảng

Để thực hiện được hàm đệ quy ta dựa vào trường parent_id của từng bản ghi đó.

Đầu tiên ta lấy ra những bản ghi có parent_id gốc thường thì ta để 0 hoặc null

Sau đó xử lý gom những bản ghi con lại 1 nắm. xem ví dụ như hình sau

Có 4 bản ghi gốc

Trong các bản ghi gốc sẽ có các bản ghi con

Nếu dùng laravel thì bạn có thể khai báo như thế này trong model để query ra data con luôn. Nếu không bạn lấy bản ghi gốc ra rồi chạy vòng lặp để lấy ra các bản ghi con.

  $scope.renderCategory = function(arr, str='', dataHtmCategoryItem ='')
    {
        arr.forEach((element, index) => {
            let img = element.image ? element.image : 'images/no-image.jpg';
            let checked = element.status == 'true' ? 'checked' : '';
            console.log(element.categories.length);
            let name = element.parent_id == null ? '<b>'+str+element.name+'</b>' : str+'+ '+element.name;
            dataHtmCategoryItem += `<tr>
                                        <th scope="row"><input type="checkbox"></th>
                                        
                                        <td>${name}</td>
                                        
                                        <td>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" id="customSwitches${element.id}" ${checked} ng-click="statusCategory($event, ${element.id})">
                                                <label class="custom-control-label" for="customSwitches${element.id}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <i ng-click="viewEdit('${base}/admin/category/edit/${element.id}')" class="btn btn-warning btn-xs fa fa-pencil-square-o"
                                                    aria-hidden="true"></i>
                                            <i ng-click="deleteCategory($event, ${element.id})" class="btn btn-danger btn-xs fa fa-trash" aria-hidden="true"></i>
                                        </td>
                                    </tr>`;
            if(element.categories.length > 0)
            {
                let newHtm = $scope.renderCategory(element.categories, '&emsp;&emsp;&emsp;&emsp;', '')
                dataHtmCategoryItem += newHtm;
                newHtm = '';
            }
        });
        return dataHtmCategoryItem;
    }