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”列编号。 postRender代码创建了正确的行数，但它们总是空白的，尽管添加了一个值（i + 1）。

我无法弄清楚如何使用羊驼添加占位符。我可以通过在渲染后手动操作html来实现。您可以在选项中看到我在“剂量”上尝试过它。

谢谢！

Answer 1

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

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

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

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

这是fiddle。告诉我，如果你需要别的东西，我很乐意帮忙。

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

1 个答案: