Как нарисовать панели данных в стиле Excel в угловых? - PullRequest
Новая
       8

Как нарисовать панели данных в стиле Excel в угловых?

0 голосов
/ 07 сентября 2018

Я хочу добавить панели данных за значениями в выбранном столбце в моей сетке, например, параметр Условное форматирование панелей данных в Excel.

Этот ответ покажите мне, используя таблицу данных jquery. Может ли кто-нибудь дать мне идею для этого на угловом 6.

Примечание. Я не использую какую-либо стороннюю сетку, я создал эту сетку самостоятельно.

Это должно выглядеть примерно так. enter image description here

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Не уверен, в каком сценарии вы хотите добавить это, но посмотрите на это: https://css -tricks.com / CSS3-прогресс-бары /

Это классический HTML и CSS "трюк" для создания полосы, которую вы можете определить длиной.

Основой этого является то, что у вас есть элемент «обертка», который определяет максимальную длину, и элемент «bar» внутри, который вы установили width: [0-100]%, и цвет фона этого.

Это пример того, как создать синюю полосу шириной 50%. 

.wrapper {
    width: 100%;
}

.bar {
    background: blue;
    height: 5px;
}

<div class="wrapper">
    <div class="bar" style="width: 50%"></div>
</div>

Используйте это для создания углового компонента, которому вы можете отправить ширину, что-то вроде этого: 

import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-bar',
    template: `
      <div class="wrapper">
          <div class="bar" [style.width]="width"></div>
      </div>
    `,
    styles: [`
    .wrapper {
        width: 100%;
    }
    .bar {
        background: blue;
        height: 5px;
    }
    `]
})

export class BarComponent {
    @Input() width: number;
}
0 голосов
/ 29 сентября 2018

Это сделает работу. 

@Component({
  selector: 'my-app',
  template: `
  <div class="holder">
    <div class="bar" *ngFor="let item of data">
      <div #bar class="{{item >= 0 ? 'positive' : 'negative'}}">
        <div class="size" [style.width.px]="getWidth(item, bar)">
          {{item}}
        </div>
      </div>
    </div>
  </div>
  `
})
class AppComponent {  
  maxValue = 100;  
  data: Number[] = [
    10,20,30,-45,90,-90,-80,50,100
  ]

  getWidth(dataItem: number, bar: HTMLElement):number {
    return (parseInt(bar.offsetWidth) / this.maxValue)  * Math.abs(dataItem);
  }
}

CSS: 

.holder {
  border: 1px solid black;
  margin: 10px;
  padding: 5px;
  width: 200px;
}

.bar {
  border: 1px solid grey;
  padding: 3px;
  margin: 10px 5px;
  text-align: center;
}

.positive {
  color: blue;
  width: 90px;
  margin-left: 90px;
}

.negative {
  color: red;
  width: 90px;
  margin-right: 90px;

  .size {
    margin-left: auto
  }
}

.size {
  background: green;
}
0 голосов
/ 07 сентября 2018

Вы можете использовать таблицу данных PrimeNg и функцию их форматирования ячеек, мы можем отформатировать каждую ячейку на основе определенных условий, таких как изменение цвета или его раскраска, это может вам помочь. PrimeNg Cell Style

...