1

KendoUI グリッドが ko vm にバインドされています

特定の要件 (一部の列のアイコン、リンクなど) により、ko テンプレートとして定義する rowTemplate を定義する必要があります。

しかし、通常の行と交互の行を異なる背景色で表示したいです。

このため、以下のように 2 つの同一のテンプレートを定義しました

        <script id="rowTmpl" type="text/html">
            <tr role="row" >         
                <td align="center">
                    <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                        <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
                    </a>
                </td>
                <td data-bind="text: CheckNumber"></td>
                ....
            </tr>
        </script>
        <script id="altTmpl" type="text/html">
            <tr class="k-alt" role="row">
                <td align="center">
                    <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                        <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
                    </a>
                </td>
                <td data-bind="text: CheckNumber"></td>
                ....
            </tr>
        </script>

alt テンプレートの class class="k-alt" がテーブル行に適用されていることを除いて、基本的に 2 つのテンプレートは同じです。

しかし、このアプローチは、行テンプレートのマークアップ全体を複製するため、非常に悪いものです。

必要なことを達成するためのより良い方法は何ですか?

ありがとうございました

4

3 に答える 3

2

代替行のスタイルのみを変更したい場合は、ここでサンプルを参照できます: http://jsfiddle.net/P5EQt/

HTML

<div data-bind="kendoGrid: { data: items, rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div>
<button data-bind="click: addItem">Add Item</button>
<script id="rowTmpl" type="text/html">
    <tr data-bind="css:{strong:id%2===0}">
        <td data-bind="text: id"></td>
        <td>
            <input data-bind="value: name" />
        </td>
        <td>
            <a href="#" data-bind="click: $root.removeItem">x</a>
        </td>
    </tr>
</script>

Javascript

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: ko.observable("apple")},
        { id: "2", name: ko.observable("orange")},
        { id: "3", name: ko.observable("banana")}
    ]);

    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: "new" + num});
    };

    this.removeItem = function(item) {
        this.items.remove(item);
    }.bind(this);
    };
ko.applyBindings(new ViewModel());

CSS

.strong { background-color:red; }

代替行を区別する id (私のサンプル) の条件でノックアウト css バインディングを使用する

于 2013-12-09T03:44:46.510 に答える