KOGrid의 조건부 셀 서식 지정

kogrid 셀에서 양수 또는 음수를 기준으로 텍스트 색상을 변경하려고합니다. 숫자가 음수이면 텍스트 색상이 빨간색이어야합니다. 숫자가 양수이면 텍스트 색상이 녹색이어야합니다.KOGrid의 조건부 셀 서식 지정

columndefs의 cellClass 특성을 사용하여 트릭을 수행 할 수 있다고 생각했지만 작동하지 않는 것 같습니다.

function mainVm(){ 
var self = this; 

this.myData = ko.observableArray([{name: "Moroni", Balance: -50000}, 
            {name: "Tiancum", Balance: 4365}, 
            {name: "Jacob", Balance: -27677}, 
            {name: "Nephi", Balance: 29676}, 
            {name: "Enos", Balance: 3489}]); 


this.gridOptions = { 
    data: self.myData, 
    columnDefs: [{ field: 'name', displayName: 'Client Name', width: 140 }, 
       { field: 'Balance', displayName: 'Balance', width: 100, 
       cellClass: function (data) { return parseFloat(data) < 0 ? "text-negative" : "text-positive" }} 
       ]}; 
};

보기 코드 :

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

CSS :

.gridStyle { 
border: 1px solid rgb(212,212,212); 
width: 400px; 
height: 300px; 
} 
.text-negative { 
color: #b94a48; 
} 
.text-positive { 
color: #468847; 
}

마 여기

는 뷰 모델 코드 여기 http://jsfiddle.net/wood0615/Bug56/10/

을 illistrate-하는 jsfiddle입니다 아마도 cellClass 속성에 잘못된 구문이있을 수 있습니까?

출처

2014-07-14 Chris

kogrid 문서는 cellClass'보다 다른 것을 할 수있다 '것을 의미하지 않는다 문자열. 따라서 귀하의 기능은 유용하지 않을 수 있습니다 (멋진 기능이라하더라도). 그러나이 페이지에서 기본적으로 셀 템플릿을 사용하는 데 관심이있는 예제를 살펴보십시오. https://github.com/ericmbarnard/KoGrid/wiki/Cell-Template-Library –

내 직감에 대한 확인을 발견했습니다. . 이러한'td' 요소 중 하나를 검사하면 실제로'class' 세트가 있음을 알게 될 것입니다. 그러나 익명 함수의 정의는 텍스트에 있습니다. 기본적으로 함수는 문자열로 변환되었습니다. 이 경우 kogrid는 knockout의 일반적인 데이터 바인딩 구문을 사용하는 것처럼 문자열 대 함수 관측 값을 해석하는 것에 영리하지 않습니다. –

코는 템플릿을 인라인 문자열로만 사용합니다. 나는 이것을 감싸서 템플릿 ID만을 지적하고 싶다. 이것은 다음 표준 KO의 템플릿을 사용하여 자사의 단지 문제를

CustomField = function(displayName, templateId) { 
    this.displayName = displayName; 
    this.cellTemplate = '<div data-bind="template: { name: \'' + templateId + '\', data: $parent.entity }"></div>'; 
};

같은 사용자 정의 필드를 생성하여 수행 할 수 있습니다

http://jsfiddle.net/Bug56/12/

출처

2014-07-14 23:48:53 Anders

답변

관련 문제