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' } 消息：意外令牌非法

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

请提出解决方案。

4

2 回答 2

1

您需要cellTemplate在该字段上使用定义，例如

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

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

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

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

我在这个例子上花了很多时间，所以如果你不接受这个答案，我会勒死你！:D

更新：

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

于 2014-02-21T08:20:47.473 回答
0

这是一个有效的 JS fiddle，其中行突出显示：http name == John: //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 回答