3

Kogrid の列の値に基づいて行のフォントの色を変更したいですか? 設定方法を教えてください。私は次のことを試しました：

<div id="grid" style="height: 700px; width: 650px;"
    data-bind="koGrid: {
                data: gridItems, afterSelectionChange: function (rowItem, event) {

                    if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
                        location.href = '/Home/Index?AcctID=' + selObj()[0].AcctID.toString();
                    }

                }, columnDefs: [{ field: 'AcctID', displayName: '  ',width: 120, cellTemplate: $('#editCellTemplate').html()
                                },
                                { field: 'AcctID', displayName: '  ',width: 120, cellTemplate: $('#openCellTemplate').html()
                                },
                { field: 'FName', displayName: 'First Name', width: '150' },
                { field: 'LName', displayName: 'Last Name', width: '100' },
                { field: 'AcctID', displayName: 'AcctID', width: '100' },
                { field: 'SSN', displayName: 'SSN', width: '100' },
                { field: 'AffinityName', displayName: 'Affinity Name', width: '205' }],
                    autogenerateColumns: false,
                    isMultiSelect: false,
                    showFilter: true,
                    showColumnMenu: true,
                    enablePaging: false,
                    showGroupPanel: true,
                    displaySelectionCheckbox: false,
                    enableColumnResize: false,
                    multiSelect: false,
                    selectedItems: selObj,
                    canSelectRows: true ,
                    rowTemplate:$('#searchRowTemplate').html()
                 }">
</div>

<script type="text/html" id="searchRowTemplate">
     <div data-bind="foreach: $grid.visibleColumns, 
                   css: { red: getProperty(\'SSN\') == '123456789' }"> 
             <div data-bind="attr: { \'class\': cellClass() 
                   \' kgCell col\' + $index() }, kgCell: $data"></div>
              </div>

   </script>

:- Uncaught SyntaxError: Unable to parse bindings. バインディング値: foreach: $grid.visibleColumns, css: { red: getProperty(\'SSN\') == '123456789' } メッセージ: Unexpected token ILLEGAL

私の列 ssn = 123456789 および fname = johnの完全な行の赤いフォントの色を取得する方法がわかりません。

解決策を提案してください。

4

2 に答える 2

1

cellTemplateのように定義されたそのフィールドで使用する必要があります

http://jsfiddle.net/A29GA/4/

{
    field: "age", 
    displayName: "Age",
    cellTemplate: "content"
}

セル テンプレートは奇妙なことに、templateId ではなく文字列リテラルのみを使用します。上記の例で行ったようにビューモデルでビューを定義するのは適切ではありません。代わりに、カスタム celltemplate を作成し、templateId という定義にメンバーを追加します。お気に入り

http://jsfiddle.net/A29GA/6/

私はこの例に多くの時間を費やしてきたので、もしあなたが答えとして受け入れないなら、私はあなたを絞め殺します! :D

アップデート：

http://jsfiddle.net/A29GA/10/

于 2014-02-21T08:20:47.473 に答える
0

これは、行が強調表示されている作業中の JS フィドルname == Johnです。http://jsfiddle.net/uyayX/1/

マークアップ:

<div class="gridStyle" data-bind="koGrid: gridOptions"></div>

JS:

function rowTemplateVM() {
    var self = this;
    this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
                     { name: "Tiancum", age: 43 },
                     { name: "Jacob", age: 27 },
                     { name: "Nephi", age: 29 },
                     { name: "John", age: 34 }]);
    this.gridOptions = { 
        data: self.myData,
        rowTemplate: '<div data-bind="foreach: $grid.visibleColumns, 
                           css: { red: getProperty(\'name\') == John }">' +
                     '<div data-bind="attr: { \'class\': cellClass() + 
                           \' kgCell col\' + $index() }, kgCell: $data"></div>'+
                      '</div>',
        columnDefs: [{field: 'name', displayName: 'Name'},
                    {field: 'age', displayName: 'Age'}]
    };
}
ko.applyBindings(new rowTemplateVM());

CSS:

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

.red {
    background-color: red;
    color: white;
    height: 30px;
}

参考までに、これはKoGrid の例のページから直接取得し、適応させたものです。

于 2014-02-21T10:10:17.277 に答える