Question

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

我尝试修改不同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>
})

Answer 1

很难说这是否是你问题的答案。您不应该更改datagrid css以获取内容以占用整行。可扩展行可以与占据整行的内容一起使用，也可以与每列占用空间的内容一起使用。

这是一个实现了可扩展行的插件，因此您可以使用每列内容交换完整行内容。

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>

数据网格 - 行详细信息全宽

1 个答案: