Question

我正在尝试在一个免提电子表格上执行列映射，我想动态加载电子表格并在每行前面加一个复选框。基于我的研究并包括How to add properties dynamically to each object in an javascript array，似乎最好的方法是为handontable＆＃34;列＆＃34;创建一个对象数组。属性。您可以在http://jsfiddle.net/kc11/o4d6gr6n/找到此信息。

所以我需要做的是创建：

 [
            {data: "check", type: 'checkbox'},
            {data: "year", type: 'text'},
            {data: "car", type: 'text'},
            {data: "available", type: 'text'},
            {data: "comesInBlack", type: 'text'},
          ]

从：

 function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
    ];
  }

我开始时通过获取列的键并在前面检查＆＃39;柱：

    var keys = $.map(getCarData()[0], function(element,key) { return key; }); 
keys.unshift("check");

但由于我有限的JS知识，我不知道如何完成其余的工作。任何人都可以建议我下一步做什么？

Answer 1

可以遍历数组并添加属性，例如：

var myData = getCarData();
$.each(myData, function(){
    /* add new property "checked" */
    this.checked = false
});

/* or */
 var myData = $.map(getCarData(), function(row){
      row.checked = false;
      return row;
 });
/* returns rows like 
 {checked:false, car: "Mercedes A 160", year: 2006, available:....}*/

然后使用文档中的checkbox template列定义

var example2 = document.getElementById('example2');
var hot2 = new Handsontable(example2,{
  data:myData,
  columns: [
      {
      data: "checked",
      type: "checkbox",
      checkedTemplate: true,
      uncheckedTemplate: false
    },
     {data: "year", type: 'text'},
     {data: "car", type: 'text'},
     {data: "available", type: 'text'},
     {data: "comesInBlack", type: 'text'},
  ]
});

Answer 2

我认为您正在尝试为check返回的数组中的每个对象添加getCarData密钥。您没有为密钥指定值，因此我为每个对象将其设置为true。

  function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
    ];
  };
    //This is where I add the 'check' key
    var addCheckKey=function(obj){
        obj.check='true';
        return obj;
    };
    var data=$.map(getCarData(),addCheckKey);

生成此数据：

[{"car":"Mercedes A 160","year":2006,"available":true,"comesInBlack":"yes","check":"true"},{"car":"Citroen C4 Coupe","year":2008,"available":false,"comesInBlack":"yes","check":"true"},{"car":"Audi A4 Avant","year":2011,"available":true,"comesInBlack":"no","check":"true"},{"car":"Opel Astra","year":2004,"available":false,"comesInBlack":"yes","check":"true"},{"car":"BMW 320i Coupe","year":2011,"available":false,"comesInBlack":"no","check":"true"}]

JSFiddle：http://jsfiddle.net/vb1om7om/2/

之前代码的问题在于，您正在创建getCarData生成的数组中每个对象的键的数组，并向该数组添加新项。这样做不会对原始对象产生影响。

从javascript对象键创建对象数组

2 个答案: