2

如何获取数据网格组件的行详细信息以占用网格中可用空间的整个宽度？

我尝试修改不同 css 类的 flex 和 width 属性，但我尝试过的任何方法似乎都不起作用。

https://plnkr.co/edit/Y7L3eGpYbzvd31HK0v2F?p=preview

<clr-datagrid>
  <clr-dg-column clrDgField="firstname">First name</clr-dg-column>
  <clr-dg-column clrDgField="lastname">Last name</clr-dg-column>

  <clr-dg-row *clrDgItems="let user of users">
      <clr-dg-cell>{{user.firstname}}</clr-dg-cell>
      <clr-dg-cell>{{user.lastname}}</clr-dg-cell>

      <my-detail *clrIfExpanded ngProjectAs="clr-dg-row-detail"></my-detail>
  </clr-dg-row>

  <clr-dg-footer>{{users.length}} items</clr-dg-footer>
</clr-datagrid>

@Component({
selector: "my-detail",
template: `
    <clr-dg-row-detail [clrDgReplace]="true">
        <div class="row">
          <div class="col-xs-2">Lorem Ipsum:</div>
          <div class="col-xs-4">...</div>
          <div class="col-xs-2">Lorem Ipsum:</div>
          <div class="col-xs-4">...</div>
        </div>
    </clr-dg-row-detail>
})
4

1 回答 1

2

很难说这是否是您问题的答案。您无需更改数据网格 css 即可让内容占据一整行。可扩展行可用于占用整行的内容或占用每列空间的内容。

这是一个实现了可扩展行的 plunk，因此您可以将整行内容与每列内容交换。

https://plnkr.co/edit/9cj1lE5B4dwpRSRcKXXX?p=preview

相关的 html 如下所示：

  <clr-datagrid>
      <clr-dg-column>User ID</clr-dg-column>
      <clr-dg-column>Name</clr-dg-column>
      <clr-dg-column>Creation date</clr-dg-column>

      <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user">
              <clr-dg-cell>{{user.id}}</clr-dg-cell>
              <clr-dg-cell>{{user.name}}</clr-dg-cell>
              <clr-dg-cell>{{user.creation | date}}</clr-dg-cell>

              <!-- Example using a wrapper component -->
              <clr-dg-row-detail *clrIfExpanded>
                <ng-template [ngIf]="detail === 'default'">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed
                    quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget,
                    pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. Aenean
                    sagittis nibh lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor.
                    Vestibulum vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam posuere
                    ipsum tincidunt velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis
                    sit amet metus finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo,
                    at suscipit diam.
                </ng-template>

                <ng-template [ngIf]="detail === 'cols'">
                    <clr-dg-cell>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</clr-dg-cell>
                    <clr-dg-cell>Proin in neque in ante placerat mattis id sed quam.</clr-dg-cell>
                    <clr-dg-cell>Proin rhoncus lacus et tempor dignissim.</clr-dg-cell>
                    <clr-dg-cell>Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu.</clr-dg-cell>
                    <clr-dg-cell>Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra.</clr-dg-cell>
                </ng-template>
              </clr-dg-row-detail>
          </clr-dg-row>

      <clr-dg-footer>{{users.length}} users</clr-dg-footer>
  </clr-datagrid>
于 2017-11-04T14:02:47.823 回答