kogrid의 마스터/디테일 기능

Question

kogrid에서 마스터/세부 기능을 구현하고 싶습니다. 그래서 첫 번째 그리드 테이블의 필드를 선택하면 다른 모든 세부 사항이 다음 세부 그리드에 표시됩니다. 아무에게도이를 구현하는 방법을 알 수 있습니까?

Answer 1

A 마스터/디테일 그리드 세트를 생성하려면 ko.computed를 사용하여 세부 사항을 선택/필터링해야합니다.

관찰 가능한 배열은 3 개이고 계산식은 1 개가 필요합니다. 마크 업에서

var model = { 
    parent: ko.observableArray(), 
    details: ko.observableArray(), 
    selectedParents: ko.observableArray() 
}; 

model.selectedDetails = ko.computed(function() { 
    var selectedParent = this.selectedParents()[0]; 

    if (!selectedParent) { 
    return []; 
    } 

    return this.details().filter(function(item) { 
    // define filter comparison here 
    }); 
}, model); 

, 2 koGrids

을 정의

<div data-bind="koGrid: { 
    data: parent, 
    multiSelect: false, 
    selectedItems: selectParents }"></div> 

<div data-bind="koGrid: { data: selectedDetails } "></div> 

koGrid는 0 또는 1 항목으로 selectedItems를 observableArray을 채 웁니다. 계산 된 값은 두 번째 눈금이 바인딩 된 하위 필터를 실행합니다.

나는 breeding에서 columnDef 데이터 바인드 부분을 생략했습니다. 당신이 "부모"에 대한 구독을 사용 후, 세부 배열에 대해 실행하는 AJAX 쿼리가있는 경우

이 jsFiddle에 대한 참조 관찰 직선 observableArray에 selectDetails을 변경하고 AJAX 콜백

에 그 내용을 설정 기본 예제