Handsontable에서 셀 데이터로 계산 된 관찰 가능을 넣는 방법

Question

Handsontable과 KnockoutJS의 통합은 여기 http://jsfiddle.net/NHpEH입니다.

 ko.bindingHandlers.handsontable = { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      var value = valueAccessor(); // TODO: what happens if value is null?   
      var allBindings = allBindingsAccessor(); 
      var colHeaders = allBindings.colHeaders() || true; 
      var data = allBindings.handsontable(); 

      // TODO: make options customizable 
      $(element).handsontable({ 
       data: data, 
       minRows: value().length || 5, 
       minCols: value()[0].length || 5, 
       minSpareCols: 0, 
       minSpareRows: 1, 
       colHeaders: colHeaders, 
       contextMenu: true, 
       onChange: function (data, source) { 
        var headers = $(element).handsontable("getColHeader") 
        var tableData = $(element).handsontable("getData"); 

        value(tableData); 

        allBindings.colHeaders(headers); 
       } 
      }); 

      $(element).handsontable("loadData", value()); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor) { 
      var value = valueAccessor(); 
      var valueUnwrapped = ko.utils.unwrapObservable(value); 
      var allBindings = allBindingsAccessor(); 
      var colHeaders = allBindings.colHeaders(); 

      $(element).handsontable("updateSettings", { 
       minRows: value().length, 
       minCols: value()[0].length 
      }); 
     } 
    }; 

그러나 계산 된 관측 값을 셀 데이터로 넣고 싶습니다. 예를 들어 셀에 두 개의 다른 셀의 합계를 표시하려고합니다.

어떤 아이디어라도 감사 할 것입니다. 여기

Answer 1

OK, 이건 내 솔루션입니다. 코드 스 니펫은 최적화되지 않았으며 단순한 아이디어 일뿐입니다.

이렇게하면 각 특정 셀에 대해 계산 된 관찰 가능을 지정할 수 있습니다. 세 번째 열은 첫 번째 세 열의 합이며 네 번째 열은 두 열이 곱한 값입니다. jsfiddle

function SumRowRenderer(instance, td, row, col, prop, value, cellProperties) { 
    td.innerHTML = '<b>' + viewModel.SumForFirstRow() + '</b>'; 
    $(td).css({ 
     background: 'yellow' 
    }); 
} 

function MultiplyRowRenderer(instance, td, row, col, prop, value, cellProperties) { 
    td.innerHTML = '<b>' + viewModel.MultiplyForFirstRow() + '</b>'; 
    $(td).css({ 
     background: 'pink' 
    }); 
} 
ko.bindingHandlers.handsontable = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(); // TODO: what happens if value is null?   
     var allBindings = allBindingsAccessor(); 
     var colHeaders = allBindings.colHeaders() || true; 

     var data = value(); 

     $(element).handsontable({ 
      data: data, 
      minRows: value().length ? (value().length) : 5, 
      minCols: value()[0].length || 5, 
      minSpareCols: 0, 
      minSpareRows: 0, 
      colHeaders: colHeaders, 
      contextMenu: false, 
      onChange: function (data, source) { 
       var headers = $(element).handsontable("getColHeader") 
       var tableData = $(element).handsontable("getData"); 

       value(tableData); 

       allBindings.colHeaders(headers); 
      }, 
      cells: function (row, col, prop) { 
       if (row == 0) { 
        if (col === 3) { 
         return { type: { renderer: SumRowRenderer,readOnly: true}}; 
        } else if (col === 4) { 
         return {type: {renderer: MultiplyRowRenderer,readOnly: true}}; 
        } 
       } 
      } 
     }); 

    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.utils.unwrapObservable(value); 
     var allBindings = allBindingsAccessor(); 
     var colHeaders = allBindings.colHeaders(); 

     $(element).handsontable("updateSettings", { 
      minRows: value().length, 
      minCols: value()[0].length 
     }); 
    } 
}; 

var viewModel = { 
    data: ko.observableArray([ 

     [10, 10, 12, 0, 0] 

    ]), 
    colHeaders: ko.observableArray(["One", "Two", "Three", "Sum", "Multiply"]) 
}; 

viewModel.SumForFirstRow = ko.computed(function() { 

    return parseInt(this.data()[0][0]) + 
    parseInt(this.data()[0][1]) + 
    parseInt(this.data()[0][2]); 

}, viewModel); 
viewModel.MultiplyForFirstRow = ko.computed(function() { 

    return parseInt(this.data()[0][0]) * 
    parseInt(this.data()[0][1]) * 
    parseInt(this.data()[0][2]); 

}, viewModel); 

ko.applyBindings(viewModel); 

Answer 2

당신이 당신의 배열에 관찰 가능한 및 계산을 추가하는 방법입니다 :

var 2008Kia = ko.observable(10); 
var 2008Nissan = ko.observable(11); 
var 2008Toyota = ko.observable(12); 
var 2008Honda = ko.observable(13); 
var 2008Total = ko.computed(function() { 
    return 2008Kia() + 2008Nissan() + 2008Toyota() + 2008Honda(); 
}); 

var data = ko.observableArray([ 
    ["", "Kia", "Nissan", "Toyota", "Honda", "Total for Year"], 
    ["2008", 2008Kia, 2008Nissan, 2008Toyota, 2008Honda, 2008Total], 
    ["2009", 20, 11, 14, 13], 
    ["2010", 30, 15, 12, 15] 
]); 

는 여기에 바이올린입니다 : http://jsfiddle.net/tlarson/NHpEH/1/