Question

我想根据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：无法解析绑定。绑定值：foreach：$ grid.visibleColumns， css：{red：getProperty（\'SSN \'）=='123456789'} 消息：意外的令牌ILLEGAL

不知道如何为完整行获取红色字体颜色，其中我的列ssn = 123456789和fname = john。

请提出解决方案。

Answer 1

您需要在该字段defintin上使用cellTemplate，如

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

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

单元格模板只是采用字符串文字而不是templateId，在viewmodel中定义视图，就像我在上面的示例中所做的那样不好。而是创建一个自定义的celltemplate，将一个成员添加到名为templateId的定义中。喜欢

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

我已经用这个例子放下了很多时间，所以如果你不接受答案，我会扼杀你！：D

更新：

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

Answer 2

这是一个有效的JS小提琴，其中有一行突出显示name == John：http://jsfiddle.net/uyayX/1/

Mark Up：

<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 examples page获取并进行调整。

我如何使用rowTemplate属性？

2 个答案: