Question

如何基于行对角形材料垫表进行排序？，我知道我们可以使用mat-sort对列进行排序，但要求是在双击时基于行进行排序。

<ng-container matColumnDef="Measure">
  <th mat-header-cell *matHeaderCellDef>Measure</th>
  <td mat-sort-header class="bold" mat-cell *matCellDef="let element">
      {{ element.name }}
  </td>
</ng-container>

在td中添加了mat-sort-header指令，而不是th，但出现错误-不能有两个具有相同id（度量）的MatSortables。

Answer 1

您可以使用Material CDK-Table并设置所需的任何排序方式。从官方docs中查看示例：

$(function () {
    $('.tree-anchor-talent').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);

        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $(".tree-table").toggle();
            return false;
        }
        

        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: './js/test.json',
            timeout: 5000,
            beforeSend: function () {
                $(".tree-table .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
               console.log('Fecthed with Ajax.');
               var obj=data;
               var json = JSON.stringify(obj);
               var s = JSON.parse(json);
   for( var i=0; i < s.menu1.length; i++)
    {
        $("#main-menu").append(' <li id="menu-list-' + i + '"><a href="#">' + s.menu1[i].name + '</a></li>');

        var list_length = s.menu1[i].children.length;
        if (list_length > 0)
            $("#main-menu li#menu-list-" + i).append('<ul></ul>');

        for( var j=0; j < list_length; j++)
        {
            $("#main-menu li#menu-list-" + i + " ul").append(' <li id="menu-list-' + i + '-children-list-' + j + '"><a href="#">'+  s.menu1[i].children[j].name + '</a></li>');

            var children_list_length = s.menu1[i].children[j].children.length;
            if(children_list_length > 0)
                $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j).append("<ul></ul>");
            for( var n=0; n < children_list_length; n++)
            {
                $("#main-menu li#menu-list-" + i + " ul li#menu-list-" + i + "-children-list-" + j + " ul").append(' <li><a href="#">'+ s.menu1[i].children[j].children[n].name +'</a></li>');
            }
        }
    }

               $('#main-menu').smartmenus({
                subMenusSubOffsetX:1,
                subMenusSubOffsetY: -8                  
               });
                $(".tree-table .content").html(data);
                $(".tree-table").toggle();

                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
            },
        });
    });
});

}

Answer 2

我有：

displayedColumns: string[] = [
'guest-name',
'rental-name',
'check-in',
'check-out',
'check-in',
'guests',
'total',
'arrival-time',

]

注意签入被重复两次导致以下错误：

<块引用>

“不能有两个具有相同 id 的 MatSortable”

角材料-垫子表排序行

2 个答案: