Dojo-单击submit按钮后需要将表单值添加到datagrid中_Dojo_Dojox.grid.datagrid_Dojox.grid

Dojo-单击submit按钮后需要将表单值添加到datagrid中

dojo

Dojo-单击submit按钮后需要将表单值添加到datagrid中,dojo,dojox.grid.datagrid,dojox.grid,Dojo,Dojox.grid.datagrid,Dojox.grid,我是dojo的初学者，我做了一些工作，但在单击submit按钮后，无法将表单值添加到网格中的相应单元格中这是我的Dojo脚本 require([ "dojo/_base/lang", "dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/dom-form", "dijit/form/TextBox", "dijit/form/Button", "dojox/gr

我是dojo的初学者，我做了一些工作，但在单击submit按钮后，无法将表单值添加到网格中的相应单元格中

这是我的Dojo脚本

require([
    "dojo/_base/lang",      
    "dojo/dom", 
    "dojo/dom-construct", 
    "dojo/on", 
    "dojo/dom-form", 
    "dijit/form/TextBox",
    "dijit/form/Button", 
    "dojox/grid/DataGrid", 
    "dojo/store/Memory", 
    "dojo/data/ObjectStore", 
    "dojo/request", 
    "dojo/domReady!"
    ],        
        function(lang, dom, domConstruct, on, domForm, TextBox, Button, DataGrid, Memory, ObjectStore, request) 
        {   
                var formJson, first, last, dob, city, state, country, mobile, formId, dataStore, grid;

                /*set up layout*/
                var layout = [[
                  {'name': 'First name', 'field': 'id', 'width': '100px'},
                  {'name': 'Last Name', 'field': 'col2', 'width': '100px'},
                  {'name': 'DOB', 'field': 'col3', 'width': '200px'},
                  {'name': 'City', 'field': 'col4', 'width': '150px'},
                  {'name': 'State', 'field': 'col5', 'width': '150px'},
                  {'name': 'Country', 'field': 'col6', 'width': '150px'},
                  {'name': 'Mobile', 'field': 'col7', 'width': '150px'},
                  ]];
                /*create a new grid*/
                var grid = new DataGrid(
                {                   
                    store: dataStore,
                    query: { id: "*" },
                    queryOptions: {},
                    structure: layout               
                }, "grid");

                    /*append the new grid to the div*/
                    grid.placeAt("gridDiv");

                    /*Call startup() to render the grid*/
                    grid.startup();
                });     
                function submitForm() {
                    first= dijit.byId('first').get('value');
                    last= dijit.byId('last').get('value');
                    dob= dijit.byId('dob').get('value');
                    city= dijit.byId('city').get('value');
                    state= dijit.byId('state').get('value');                                                                                
                    country= dijit.byId('country').get('value');                                                                            
                    mobile= dijit.byId('mobile').get('value');  
                    //console.log(first+','+last+','+dob+','+city+','+state+','+country+','+mobile);
                    formId = "myform";
                    formJson = domForm.toJson(formId);  
                    console.log(formJson);  
                    //dataStore.add(formJson);
                    //grid.setQuery({id: "*"});                 
                }
                // Connect the buttons
                on(dom.byId("submitForm"), "click", submitForm);                                
                console.log(formJson);  

        });

和html

<body class="claro">
<div id="wrapper">
    <form id="myform">
    <div id="formContainer">
        <div class="row">
        <label>First Name</label>
        <input type="text" id="first" name="first" data-dojo-type="dijit.form.TextBox" value="Thilakar" />
        </div>
        <div class="row">
        <label>Last Name</label>
        <input type="text" id="last" name="last" data-dojo-type="dijit.form.TextBox" value="Kathirvel" />
        </div>
        <div class="row">
        <label>DOB</label>
        <input type="text" id="dob" name="dob" data-dojo-type="dijit.form.TextBox" value="07/10/1983"/>
        </div>
        <div class="row">
        <label>City</label>
        <input type="text" id="city" name="city" data-dojo-type="dijit.form.TextBox" value="Chennai"/>
        </div>
        <div class="row">
        <label>State</label>
        <input type="text" id="state" name="state" data-dojo-type="dijit.form.TextBox" value="Tamilnadu"/>        
        </div>
        <div class="row">
        <label>Country</label>
        <input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
        </div>
        <div class="row">
        <label>Mobile</label>
        <input type="text" id="mobile" name="mobile" data-dojo-type="dijit.form.TextBox" value="9094730388"/>
        </div>
        <div class="row">
        <label>&nbsp;</label>
        <input type="button" value="submit" id="submitForm"/>
        </div>
    </div>
    </form>
    <h1>Saved Data</h1>
    <div id="gridDiv"></div>  
</div>
</body>


名字
姓
出生日期
城市
陈述
国家
可移动的
保存的数据

请给出一些如何可能的建议

谢谢

有几个问题。请参见此处的工作示例：

我将您的html更改为：

<div id="wrapper">
<form id="myform">
    <div id="formContainer">
        <div class="row">
        <label>First Name</label>
            <input type="text" id="first" name="first" data-dojo-type="dijit/form/TextBox" value="Thilakar" />
        </div>
        <div class="row">
        <label>Last Name</label>
            <input type="text" id="last" name="last" data-dojo-type="dijit/form/TextBox" value="Kathirvel" />
        </div>
        <div class="row">
        <label>DOB</label>
            <input type="text" id="dob" name="dob" data-dojo-type="dijit/form/TextBox" value="07/10/1983"/>
        </div>
        <div class="row">
        <label>City</label>
            <input type="text" id="city" name="city" data-dojo-type="dijit/form/TextBox" value="Chennai"/>
        </div>
        <div class="row">
        <label>State</label>
            <input type="text" id="state" name="state" data-dojo-type="dijit/form/TextBox" value="Tamilnadu"/>        
        </div>
        <div class="row">
        <label>Country</label>
        <input type="text" id="country" name="country" data-dojo-type="dijit.form.TextBox" value="India"/>
        </div>
        <div class="row">
        <label>Mobile</label>
            <input type="text" id="mobile" name="mobile" data-dojo-type="dijit/form/TextBox" value="9094730388"/>
        </div>
        <div class="row">
        <label>&nbsp;</label>
            <button type="submit" value="submit" data-dojo-type="dijit/form/Button" id="submitForm">Submit</button>
        </div>
    </div>
</form>
<h1>Saved Data</h1>
<div id="gridDiv"></div>

将表单数据插入整个新行或特定单元格时是否遇到问题？另外，如果你能建立一个测试来演示你的问题，那么获得帮助就会容易得多。

require([
"dojo/_base/lang",      
"dojo/dom", 
"dojo/dom-construct", 
"dojo/on", 
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button", 
"dojox/grid/DataGrid", 
"dojo/store/Memory",
"dojo/data/ObjectStore", 
"dojo/request", 
"dijit/registry",
"dojo/domReady!"
], function(lang, dom, domConstruct, on, Form, TextBox, Button, DataGrid, Memory, ObjectStore, request, registry){   
    var layout, dataStore, grid, form;

    /*set up layout*/
    layout = [
       {'name': 'First name', 'field': 'first', 'width': '100px'},
       {'name': 'Last Name', 'field': 'last', 'width': '100px'},
       {'name': 'DOB', 'field': 'dob', 'width': '200px'},
       {'name': 'City', 'field': 'city', 'width': '150px'},
       {'name': 'State', 'field': 'state', 'width': '150px'},
       {'name': 'Country', 'field': 'country', 'width': '150px'},
       {'name': 'Mobile', 'field': 'mobile', 'width': '150px'}
     ];

     dataStore = new ObjectStore({ objectStore : new Memory() });

     /*create a new grid*/
     grid = new DataGrid({ 
         store: dataStore,
         query: { id: "*" },
         queryOptions: {},
         structure: layout               
     }, "gridDiv");

     /*Call startup() to render the grid*/
     grid.startup();
     form = new Form({
         onSubmit : function(evt) {
             evt.preventDefault();
             var formValue = this.get("value");
             console.debug(formValue);
             dataStore.newItem(formValue);
         }
     }, "formContainer");      
    form.startup();
});