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
            });
        }
    };

但我想将一个计算的observable作为单元格中的单元格数据。例如，我想显示单元格中另外两个单元格的总和。

任何想法都会受到赞赏。

Answer 1

好的，这是我的解决方案。代码片段未经过优化，只是一个简单的想法。

通过这种方式，您可以为每个特定单元格指定计算的observable。第三列是前三列的总和，第四列是它们的乘法。 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

以下是如何向数组添加observable和计算器：

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/

如何将计算的observable作为单元格数据放在Handsontable中

2 个答案: