AlpacaJS表-推送数据和添加占位符

Question

我在Alapaca的Stack Overflow上发布了这篇文章，但我知道他们很忙/没有及时回复，所以希望其他人能帮助解决这个问题。

我有一张桌子。行数由另一个元素使用postRender脚本设置。但是，当我推的时候，我不能在元素中设置任何值。代码如下：

模式

"required": false,
"properties": {
  "study_group_radio": {
    "enum": [
      "2",
      "3",
      "4",
      "5",
      "6"
    ]
  },
  "study_group_table": {
    "type": "array",
    "required": false,
    "items": {
      "type": "object",
      "properties": {
        "study_group": {
          "title": "Study Groups",
          "type": "number",
          "readonly": true
        },
        "dose": {
          "title": "Dose",
          "type": "string"
         },
        "route": {
          "title": "Route",
          "type": "string"
        },
        "doses": {
          "title": "# Doses",
          "type": "string"
        },
        "animals_main": {
          "type": "string",
          "title": "Animals Main"
        },
        "animals_recovery": {
          "type": "string",
          "title": "Animals Recovery"
        }
      }
    }
  }
}

选项

{
"type": "object",
"fields": {
  "study_group_radio": {
    "type": "radio",
    "helper": "the number of selected will generate a table"
  },
  "study_group_table": {
    "type": "table",
    "id": "study_group_table",
    "label": "New table",
    "animate": true,
    "hideNone": true,
    "toolbarStyle": "button",
    "actionbarStyle": "right",
    "items": {
      "type": "tablerow"
    },
    "hideToolbarWithChildren": true,
    "datatables": {
      "paging": false,
      "lengthChange": false,
      "info": false,
      "searching": false,
      "ordering": true,
      "columns": [
        {
          "orderable": false,
          "name": "actions",
          "bSortable": false,
          "sName": "actions"
        }
      ],
      "bLengthChange": false,
      "bInfo": false,
      "aoColumns": [
        {
          "orderable": false,
          "name": "actions",
          "bSortable": false,
          "sName": "actions"
        }
      ],
      "bSort": true,
      "bPaginate": false,
      "bFilter": false
    },
    "dragRows": false,
    "showActionsColumn": false,
    "fields": {
      "dose": {
        "placeholder": "e.g. 1 mg/kg"
      }
    }
  }
}

Postrender

control.childrenByPropertyId["study_group_radio"].on("change", function() {
  var times = this.getValue();
  var value = 
  control.childrenByPropertyId["study_group_table"].getValue(value);

  if (value.length < times) {
      for (var i = value.length; i < times; i++) {
          console.log(i+1);
          value.push({
              "study_group": (i+1),
              "dose": "",
              "route": "",
              "doses": "",
              "animals_main": "",
              "animals_recovery": ""
          });
      }
  } else {
      while (value.length > times) {
          value.pop();
      }
  }
  console.log(value.study_group);
  control.childrenByPropertyId["study_group_table"].setValue(value);
});

表选项是使用示例窗体生成器预先填充的。不幸的是，当我手动输入代码时，我无法让表正常工作。我认真地研究了AlpacaJS表格文档中的10个示例，但对它们起作用的似乎对我不起作用！

问题：

我正在尝试自动对"study_group“列进行编号。尽管添加了一个值(i+1)，postRender代码创建了正确的行数，但是它们始终是空的。

我不知道如何使用Alpaca添加占位符。我可以在渲染后通过手动操作html来完成。你可以看到我在“选项”的“剂量”上试过了。

谢谢!

Answer 1

您的代码是正确的，但是您需要为表添加一个数据对象并将其设置为空，以解决空行问题。

"data": {
  "study_group_table": []
}

对于占位符问题，必须将"fields"包装到"items"属性中。

"items": {
  "fields": {
    "dose": {
      "placeholder": "e.g. 1 mg/kg"
    }
  }
}

这是一个用于此的fiddle。如果你还需要什么，告诉我，我很乐意为你效劳。