javascript - Dojo - 输入字段未附加到网格

Question

我使用dojo创建了一个网格。我有一个带有输入字段的表单，当我输入值并单击“添加行”按钮时，输入字段不会附加到网格中。删除选项工作正常，但添加行不起作用。我已附上 jsfiddle 的链接，请引用更多信息。

form = new Form({
    onSubmit: function(evt) {
        evt.preventDefault();
        var formValue = this.get("value");
        dataStore.newItem(formValue);
    }
}, "formContainer");
form.startup();
});

jsfiddle

Answer 1

完全同意@Himanshu。
你的 HTML 很奇怪。
如果您想使用submit按钮，您必须将其放在 <form> 内元素。

此外，仍然像@Himanshu 所说的那样，您必须提供 id为了用户newItem
请参阅以下工作 jsfiddle 示例: https://jsfiddle.net/xzkc7hbs/8/

为了更好地记录，这里有一个工作片段。 (忽略脚本错误，这些是安全警告，并在整个页面中运行它。否则脚本错误会超出文本框)

require([
  'dojo/_base/lang',
  'dojox/grid/DataGrid',
  'dojo/data/ItemFileWriteStore',
  'dojo/dom',
  'dijit/form/Button',
  'dojo/dom-class',

  "dojo/dom-construct",
  "dojo/on",
  "dijit/form/Form",
  "dijit/form/TextBox",
  "dojo/store/Memory",
  "dojo/data/ObjectStore",
  "dojo/request",
  "dijit/registry",

  'dojo/domReady!',
  'dojox/grid/_CheckBoxSelector'
], function(lang, DataGrid, ItemFileWriteStore, dom, Button, domClass, domConstruct, on, Form, TextBox, Memory, ObjectStore, request, registry) {

  var data = {
    identifier: 'id',
    items: []
  };
  var data_list = [{
    fname: "Boy",
    lname: "Mayer",
    email: "boy@mayer.com",
    num: 54526
  }, {
    fname: "Paul",
    lname: "Taucker",
    email: "paul@taucker.com",
    num: 12345
  }, {
    fname: "Steven",
    lname: "Spil",
    email: "steven@spil.com",
    num: 87654
  }, {
    fname: "computer",
    lname: "Tech",
    email: "comp@tech.com",
    num: 45158
  }, {
    fname: "User",
    lname: "Interface",
    email: "user@inter.in",
    num: 94979
  }];

  var rows = data_list.length;
  for (i = 0, l = rows; i < rows; i++) {
    data.items.push(lang.mixin({
      id: i + 1
    }, data_list[i % l]));
  }

  var dataStore = new dojo.data.ItemFileWriteStore({
    data: data
  });

  var layout = [{
      type: "dojox.grid._CheckBoxSelector",
      width: '30px'
    },
    [{
      'name': 'Sl',
      'field': 'id',
      'width': '20px',
      'editable': 'false'
    }, {
      'name': 'Firstname',
      'field': 'fname',
      'width': '140px',
      'editable': 'true'
    }, {
      'name': 'Lastname',
      'field': 'lname',
      'width': '130px',
      'editable': 'true'
    }, {
      'name': 'Email',
      'field': 'email',
      'width': '140px',
      'editable': 'true'
    }, {
      'name': 'Number',
      'field': 'num',
      'width': '80px',
      'editable': 'true'
    }]
  ];

  var grid = new DataGrid({
    store: dataStore,
    query: {
      id: "*"
    },
    queryOptions: {},
    structure: layout
  });
  grid.placeAt("gridDiv");
  grid.startup();

  var button = new Button({
    label: "Add Row",
  }, "addRow");
  button.startup();

  var button = new Button({
    label: "Delete",
  }, "deleteBtn");
  button.startup();

  dojo.connect(deleteBtn, "onclick", function() {
    var items = grid.selection.getSelected();
    if (items.length) {
      dojo.forEach(items, function(selectedItem) {
        if (selectedItem !== null) {
          dataStore.deleteItem(selectedItem);
        }
      });
    }
  });

  var form = new Form({
    onSubmit: function(evt) {
      evt.preventDefault();
      var formValue = form.get("value");
      console.debug(formValue);
      dataStore.fetch({
        onComplete: function(allItems) {
          var newId = allItems.length + 1;
          dataStore.newItem({
            id: newId,
            fname: formValue.first,
            lname: formValue.last,
            email: formValue.dob,
            num: formValue.mobile
          });
        }
      })

    }
  }, "myForm");
  form.startup();
});

*,
th {
  font: 14px'verdana', sans-serif;
}
td {
  font: 13px'verdana', sans-serif;
}
#gridDiv {
  height: 14em;
  margin-bottom: 15px;
  width: 42em;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css">

<div class="claro">
  <div id="gridDiv"></div>
  <button id="deleteBtn"></button>
  <form id="myForm">
    <div id="formContainer">
      <input type="text" id="first" name="first" data-dojo-type="dijit/form/TextBox" value="" placeholder="Firstname" required/>
      <input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="" placeholder="Lastname" required />
      <input type="text" id="email" name="dob" data-dojo-type="dijit/form/TextBox" value="" placeholder="Email" required />
      <input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="" placeholder="Mobile Number" required />
    </div>

    <button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Add Row</button>
  </form>




</div>