wjFlexGridColumn クラス

wjFlexGridColumn 連結は wjFlexGrid 連結内に記述する必要があります。 次に例を示します。

<p>FlexGrid コントロールの例：</p>
<div data-bind="wjFlexGrid: { itemsSource: data }">
    <div data-bind="wjFlexGridColumn: {
        header: 'Country',
        binding: 'country',
        width: '*' }">
    </div>
    <div data-bind="wjFlexGridColumn: {
        header: 'Date',
        binding: 'date' }">
    </div>
    <div data-bind="wjFlexGridColumn: {
        header: 'Revenue',
        binding: 'amount',
        format: 'n0' }">
    </div>
    <div data-bind="wjFlexGridColumn: {
        header: 'Active',
        binding: 'active' }">
    </div>
</div>

wjFlexGridColumn 連結は、 Column クラスのすべての読み取り/書き込みプロパティおよびイベントをサポートします。 isSelected プロパティは双方向にバインドされます。

wjFlexGridColumn 連結には、 Column クラスのプロパティと一致する通常の属性に加えて、条件付き書式を提供する wjStyle 連結と、 セルテンプレートとして使用されるHTMLフラグメントを含めることができます。 グリッドの行は、カスタムセルの内容を収めるために自動的に高さが拡張されます。

wjStyle 連結およびHTMLフラグメントでは、現在の行にバインドされた項目を表すKnockoutJS連結の $item オブザーバブル変数を使用できます。 また、セルの行インデックスと列インデックスを含む $row および $col オブザーバブル変数も使用できます。次に例を示します。

<div data-bind="wjFlexGridColumn: {
        header: 'Symbol',
        binding: 'symbol',
        readOnly: true,
        width: '*' }">
  <a data-bind="attr: {
        href: 'https://finance.yahoo.com/q?s=' + $item().symbol() },
        text: $item().symbol">
  </a>
</div>
<div data-bind="wjFlexGridColumn: {
     header: 'Change',
        binding: 'changePercent',
        format: 'p2',
        width: '*'
        },
        wjStyle: {
        color: getAmountColor($item().change) }">
</div>

これらの連結は2つの列を作成します。 最初の列は、連結された項目の"symbol"プロパティに基づいてハイパーリンクを生成するテンプレートを持ちます。 2番目の列は、コントローラーに実装された関数によって決定された色で値をレンダリングする条件付きスタイルを持ちます。