クラス IgxColumnComponent

Ignite UI for Angular Column - ヘルプ

Ignite UI Column は igx-grid 要素で列が表示するデータを定義するために使用されます。 並べ替え、フィルタリング、編集などの機能は列レベルで有効にされます。 ng-template` を使用して列のすべてのセルに使用されるカスタム コンテンツを含むテンプレートを設定できます。

階層

実装

  • AfterContentInit

コンストラクタ

constructor

プロパティ

cdr

cdr: ChangeDetectorRef

cellClasses

cellClasses: any

列セルの条件付きクラス セレクターを設定します。 キーと値のペアを含むオブジェクト リテラルを受け取ります。 キーは CSS クラスの名前です。 値はブール値を返すコールバック関数またはブール値です。 例:

callback = (rowData, columnKey) => { return rowData[columnKey] > 6; }
cellClasses = { 'className' : this.callback };
<igx-column [cellClasses] = "cellClasses"></igx-column>
<igx-column [cellClasses] = "{'class1' : true }"></igx-column>
次のメンバー:

IgxColumnComponent

children

children: any

子列を取得または設定します。

let columnChildren = this.column.children;
this.column.children = childrenColumns;
次のメンバー:

IgxColumnComponent

dataType

dataType: DataType = DataType.String

列値のデータ タイプを取得または設定します。 デフォルトは string です。

let columnDataType = this.column.dataType;
<igx-column [dataType] = "'number'"></igx-column>
次のメンバー:

IgxColumnComponent

defaultWidth

defaultWidth: string

非表示

editable

editable: any = null

列の編集が可能かどうかを取得または設定します。 デフォルトは false です。

let isEditable = this.column.editable;
<igx-column [editable] = "true"></igx-column>
次のメンバー:

IgxColumnComponent

field

field: string

field 値を取得または設定します。

let columnField = this.column.field;
<igx-column [field] = "'ID'"></igx-column>
次のメンバー:

IgxColumnComponent

filterable

filterable: boolean = true

列フィルターが可能かどうかを取得または設定します。 デフォルトは true です。

let isFilterable = this.column.filterable;
<igx-column [filterable] = "false"></igx-column>
次のメンバー:

IgxColumnComponent

filteringIgnoreCase

filteringIgnoreCase: boolean = true

列フィルタリングが大文字と小文字を区別するかどうかを取得または設定します。 デフォルト値は true です。

let filteringIgnoreCase = this.column.filteringIgnoreCase;
<igx-column [filteringIgnoreCase] = "false"></igx-column>
次のメンバー:

IgxColumnComponent

formatter

formatter: function

列のフォーマッタを取得または設定します。

let columnFormatter = this.column.formatter;
this.column.formatter = (val: Date) => {
return new Intl.DateTimeFormat("en-US").format(val);
次のメンバー:

IgxColumnComponent

Type declaration

    • (value: any): any
    • パラメーター

      • value: any

      返却 any

gridAPI

gridAPI: GridBaseAPIService<IgxGridBaseComponent>

gridID

gridID: string

igx-gridid を取得または設定します。

let columnGridId = this.column.gridID;
this.column.gridID = 'grid-1';
次のメンバー:

IgxColumnComponent

groupable

groupable: boolean = false

列のグループ化が可能かどうかを取得または設定します。 デフォルトは false です。

let isGroupable = this.column.groupable;
<igx-column [groupable] = "true"></igx-column>
次のメンバー:

IgxColumnComponent

hasSummary

hasSummary: boolean = false

列の集計を有効または無効にします。 デフォルト値は false です。

let hasSummary = this.column.hasSummary;
<igx-column [hasSummary] = "true"></igx-column>
memberof

IgxColumnComponent

header

header: string = ""

header 値を取得または設定します。

let columnHeader = this.column.header;
<igx-column [header] = "'ID'"></igx-column>
次のメンバー:

IgxColumnComponent

headerClasses

headerClasses: string = ""

列ヘッダーのクラス セレクターを取得または設定します。

let columnHeaderClass = this.column.headerClasses;
<igx-column [headerClasses] = "'column-header'"></igx-column>
次のメンバー:

IgxColumnComponent

maxWidth

maxWidth: string

列の最大の width を取得または設定します。

let columnMaxWidth = this.column.width;
<igx-column [maxWidth] = "'75%'"></igx-column>
次のメンバー:

IgxColumnComponent

minWidth

minWidth: string = this.defaultMinWidth

列の最小の width を取得または設定します。 デフォルト値は 88 です。

let columnMinWidth = this.column.minWidth;
<igx-column [minWidth] = "'15%'"></igx-column>
次のメンバー:

IgxColumnComponent

movable

movable: boolean = false

列が移動可能かどうかを取得または設定します。 デフォルトは false です。

let isMovable = this.column.movable;
<igx-column [movable] = "true"></igx-column>
次のメンバー:

IgxColumnComponent

parent

parent: any = null

親列を取得または設定します。

let parentColumn = this.column.parent;
this.column.parent = higherLevelColumn;
次のメンバー:

IgxColumnComponent

resizable

resizable: boolean = false

列のサイズ変更が可能かどうかを取得または設定します。 デフォルトは false です。

let isResizable = this.column.resizable;
<igx-column [resizable] = "true"></igx-column>
次のメンバー:

IgxColumnComponent

searchable

searchable: boolean = true

列が検索可能 (searchable) かどうかを取得または設定します。 デフォルト値は true です。

let isSearchable =  this.column.searchable';
 <igx-column [searchable] = "false"></igx-column>
次のメンバー:

IgxColumnComponent

sortable

sortable: boolean = false

列の並べ替えが可能かどうかを取得または設定します。 デフォルトは false です。

let isSortable = this.column.sortable;
<igx-column [sortable] = "true"></igx-column>
次のメンバー:

IgxColumnComponent

sortingIgnoreCase

sortingIgnoreCase: boolean = true

列並べ替えが大文字と小文字を区別するかどうかを取得または設定します。 デフォルト値は true です。

let sortingIgnoreCase = this.column.sortingIgnoreCase;
<igx-column [sortingIgnoreCase] = "false"></igx-column>
次のメンバー:

IgxColumnComponent

widthSetByUser

widthSetByUser: boolean

非表示

アクセサー

allChildren

  • 子列のコレクションを返します。 列が子列を含まない場合、空の配列を返します。

    let childrenColumns =  this.column.allChildren;
    次のメンバー:

    IgxColumnComponent

    返却 IgxColumnComponent[]

bodyTemplate

  • get bodyTemplate(): TemplateRef<any>
  • set bodyTemplate(template: TemplateRef<any>): void
  • bodyTemplate への参照を返します。

    let bodyTemplate = this.column.bodyTemplate;
    次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • 本文のテンプレートを設定します。

    <ng-template #bodyTemplate igxCell let-val>
       <div style = "background-color: yellowgreen" (click) = "changeColor(val)">
          <span> {{val}} </span>
       </div>
    </ng-template>
    @ViewChild("'bodyTemplate'", {read: TemplateRef })
    public bodyTemplate: TemplateRef<any>;
    this.column.bodyTemplate = this.bodyTemplate;
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • template: TemplateRef<any>

    返却 void

calcWidth

  • get calcWidth(): any

cells

columnGroup

  • get columnGroup(): boolean
  • 列が ColumnGroup かどうかを示すブール値を返します。

    let columnGroup =  this.column.columnGroup;
    次のメンバー:

    IgxColumnComponent

    返却 boolean

defaultMinWidth

  • get defaultMinWidth(): string
  • 列のデフォルト最小の width を取得します。

    let defaultMinWidth =  this.column.defaultMinWidth;
    次のメンバー:

    IgxColumnComponent

    返却 string

disableHiding

  • get disableHiding(): boolean
  • set disableHiding(value: boolean): void
  • 非表示が無効かどうかを取得します。

    let isHidingDisabled =  this.column.disableHiding;
    次のメンバー:

    IgxColumnComponent

    返却 boolean

  • 列の非表示を有効/無効にします。 デフォルトは false です。

    <igx-column [hidden] = "true"></igx-column>
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • value: boolean

    返却 void

filterCell

  • get filterCell(): IgxGridFilteringCellComponent
  • 列のフィルター セルへ参照を返します。

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
    let filterell = column.filterell;
    次のメンバー:

    IgxColumnComponent

    返却 IgxGridFilteringCellComponent

filteringExpressionsTree

filters

  • get filters(): any
  • set filters(classRef: any): void
  • 列の filters を取得します。

    let columnFilters = this.column.filters'
    次のメンバー:

    IgxColumnComponent

    返却 any

  • 列の filters を設定します。

    this.column.filters = IgxBooleanFilteringOperand.
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • classRef: any

    返却 void

grid

groupingComparer

  • get groupingComparer(): function
  • set groupingComparer(funcRef: function): void
  • グループ化する値を比較する関数を取得します。

    let groupingComparer = this.column.groupingComparer'
    次のメンバー:

    IgxColumnComponent

    返却 function

      • (a: any, b: any): number
      • パラメーター

        • a: any
        • b: any

        返却 number

  • グループ化される値を比較するためにカスタム関数を設定します。 並べ替え済みのデータ内の次の値のために 0 が返されられた場合、この値はグループ化されたという意味です。

    this.column.groupingComparer = (a: any, b: any) => { return a === b ? 0 : -1; }
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • funcRef: function
        • (a: any, b: any): number
        • パラメーター

          • a: any
          • b: any

          返却 number

    返却 void

headerCell

  • get headerCell(): IgxGridHeaderComponent
  • 列のヘッダーへの参照を返します。

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
    let headerCell = column.headerCell;
    次のメンバー:

    IgxColumnComponent

    返却 IgxGridHeaderComponent

headerTemplate

  • get headerTemplate(): TemplateRef<any>
  • set headerTemplate(template: TemplateRef<any>): void
  • ヘッダー テンプレートへの参照を返します。

    let headerTemplate = this.column.headerTemplate;
    次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • ヘッダー テンプレートを設定します。

    <ng-template #headerTemplate>
      <div style = "background-color:black" (click) = "changeColor(val)">
          <span style="color:red" >{{column.field}}</span>
      </div>
    </ng-template>
    @ViewChild("'headerTemplate'", {read: TemplateRef })
    public headerTemplate: TemplateRef<any>;
    this.column.headerTemplate = this.headerTemplate;
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • template: TemplateRef<any>

    返却 void

hidden

  • get hidden(): boolean
  • set hidden(value: boolean): void
  • 列が非表示にされるかどうかを取得します。

    let isHidden = this.column.hidden;
    次のメンバー:

    IgxColumnComponent

    返却 boolean

  • 列の hidden プロパティを設定します。 デフォルトは false です。

    <igx-column [hidden] = "true"></igx-column>
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • value: boolean

    返却 void

index

  • get index(): number
  • 列インデックスを取得します。

    let columnIndex = this.column.index;
    次のメンバー:

    IgxColumnComponent

    返却 number

inlineEditorTemplate

  • get inlineEditorTemplate(): TemplateRef<any>
  • set inlineEditorTemplate(template: TemplateRef<any>): void
  • インライン エディター テンプレートへの参照を返します。

    let inlineEditorTemplate = this.column.inlineEditorTemplate;
    次のメンバー:

    IgxColumnComponent

    返却 TemplateRef<any>

  • インライン エディター テンプレートを設定します。

    <ng-template #inlineEditorTemplate igxCellEditor let-cell="cell">
        <input type="string" [(ngModel)]="cell.value"/>
    </ng-template>
    @ViewChild("'inlineEditorTemplate'", {read: TemplateRef })
    public inlineEditorTemplate: TemplateRef<any>;
    this.column.inlineEditorTemplate = this.inlineEditorTemplate;
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • template: TemplateRef<any>

    返却 void

level

  • get level(): number
  • 列グループの列のレベルを返します。 列に parent がない場合、0 を返します。

    let columnLevel =  this.column.level;
    次のメンバー:

    IgxColumnComponent

    返却 number

pinned

  • get pinned(): boolean
  • set pinned(value: boolean): void
  • 列が pinned かどうかを取得します。

    let isPinned = this.column.pinned;
    次のメンバー:

    IgxColumnComponent

    返却 boolean

  • 列がピン固定されるかどうかを設定します。 デフォルトは false です。

    <igx-column [pinned] = "true"></igx-column>
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • value: boolean

    返却 void

sortStrategy

  • sortStrategy 列を取得します。

    let sortStrategy = this.column.sortStrategy'

    class CustomSortingStrategy extends SortingStrategy { ... } `

    次のメンバー:

    IgxColumnComponent

    返却 ISortingStrategy

  • sortStrategy を設定します。 `typescript this.column.sortStrategy = new CustomSortingStrategy().

    class CustomSortingStrategy extends SortingStrategy { ... } `

    次のメンバー:

    IgxColumnComponent

    パラメーター

    返却 void

summaries

  • get summaries(): any
  • set summaries(classRef: any): void
  • 列の summaries を取得します。

    let columnSummaries = this.column.summaries;
    次のメンバー:

    IgxColumnComponent

    返却 any

  • 列の summaries を設定します。

    this.column.summaries = IgxNumberSummaryOperand;
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • classRef: any

    返却 void

topLevelParent

  • get topLevelParent(): any
  • 最上位の親列への参照を返します。

    let topLevelParent =  this.column.topLevelParent;
    次のメンバー:

    IgxColumnComponent

    返却 any

visibleIndex

  • get visibleIndex(): number
  • 列の表示インデックスを取得します。 列が表示されない場合、 -1 が返されます。

    let visibleColumnIndex =  this.column.visibleIndex;
    次のメンバー:

    IgxColumnComponent

    返却 number

width

  • get width(): string
  • set width(value: string): void
  • 列の width を取得します。

    let columnWidth = this.column.width;
    次のメンバー:

    IgxColumnComponent

    返却 string

  • 列の width を設定します。

    <igx-column [width] = "'25%'"></igx-column>
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • value: string

    返却 void

メソッド

autosize

  • autosize(): void
  • 列を現在表示中のセルヘッダーを含むセル値に自動でサイズ変更します。 `typescript @ViewChild('grid') grid: IgxGridComponent;

    let column = this.grid.columnList.filter(c => c.field === 'ID')[0]; column.autosize(); `

    次のメンバー:

    IgxColumnComponent

    返却 void

pin

  • pin(index?: number): boolean
  • ピン固定領域で指定したインデックスに列をピン固定します。指定されない場合、デフォルトのインデックスは 0 です。 列が正常にピン固定された場合、true を返します。列をピン固定できない場合、false を返します。 列をピン固定できない原因:

    • 列はすでにピン固定されています。
    • index 引数は範囲外です。
    • ピン固定領域はグリッドの幅の 80% を超えます。
      let success = this.column.pin();
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean

unpin

  • unpin(index?: number): boolean
  • 列をピン固定解除してピン固定されない領域で指定したインデックスに配置します。指定されない場合、デフォルトのインデックスは 0 です。 列のピン固定が正常に解除された場合、true を返します。列のピン固定を解除できない場合、false を返します。 列のピン固定を解除きない原因:

    • ピン固定はすでに解除されています。
    • index 引数は範囲外です。
      let success = this.column.unpin();
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • オプション index: number

    返却 boolean

updateHighlights

  • updateHighlights(oldIndex: number, newIndex: number): void
  • 列インデックスが変更されたときに強調表示を更新します。

    this.column.updateHighlights(1, 3);
    次のメンバー:

    IgxColumnComponent

    パラメーター

    • oldIndex: number
    • newIndex: number

    返却 void

Static updateHighlights