Dojo-点击提交按钮后需要将表单值添加到数据网格中

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

这里是我的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>

请给我一些可能的建议。

感谢

有几个问题。请参阅此处的工作示例：http://jsfiddle.net/psoares/Hm8j2/

我把你的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>

和您的javascript到：

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();
});

相关内容

最新更新

热门标签：