首页 > 解决方案 > 嵌套表行以角度 5 排序

问题描述

我想对嵌套表行进行排序,但没有找到任何角度库,下面是我的代码。

<table class="table table-bordered tabledesign">
    <thead>
        <tr>
            <th></th>
            <th>
                Sr #
                <span class="sort-icons"></span>
            </th>
            <th class="cursor">
                Menu Name
                <span class="sort-icons"></span>
            </th>
            <th class="text-center" *ngFor="let permissionListNew of permissionList;">
                {{permissionListNew.name}}
            </th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngTemplateOutlet="treeViewTemplate; context:{ $implicit: menusList }">
        </ng-container>
    </tbody>
</table>
<ng-template #treeViewTemplate let-menusList>
    <ng-container *ngFor="let parameter of menusList;let i=index;">
        <tr [ngStyle]="{'background-color': parameter.color ? parameter.color : '' }">
            <td class="text-left">
                <a *ngIf="parameter.child_menus?.length > 0" (click)="parameter.expand = !parameter.expand">
                    <i class="fa plus-icon" [ngClass]="parameter.expand ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i>
                </a>
                <i *ngIf="parameter.child_menus?.length <= 0" class="fa fa-circle"
                    style="font-size: 10px; padding-right: 3px;color: #f68c1f;"></i>
            </td>
            <td>{{parameter.sr_no}}</td>
            <td class="text-left">{{parameter.name}}</td>
            <td class="text-center" *ngFor="let permissionListNew of parameter.permissions;let permissionIndex=index;">
                <input type="checkbox" class="custom-control-input"
                    [name]="'permission_' + parameter.row_id + '_' + permissionIndex"
                    [checked]="permissionListNew.is_permitted" [(ngModel)]="permissionListNew.is_permitted">
            </td>
        </tr>
        <ng-container *ngIf="parameter.expand && parameter.child_menus?.length > 0" class="pl-4">
            <ng-container *ngTemplateOutlet="treeViewTemplate; context:{ $implicit: parameter.child_menus }">
            </ng-container>
        </ng-container>
    </ng-container>
</ng-template>

使用这个我无法拖放表格行,下面是代码 UI 的图像

在此处输入图像描述

使用哪个库我可以拖放(排序)表格行向上和向下角5

标签: angularbootstrap-4angular5nested-sortable

解决方案


推荐阅读