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

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

这里我的道场脚本

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>

请给一些建议，如何是可能的。

谢谢

来源

2013-07-02 Mr.T.K

你是否有插入表单数据到一个问题整个新的行或只是一个特定的单元格？另外，如果你可以设置一个[jsfiddle]（http://jsfiddle.net/）来演示你的问题，那么获得帮助会容易得多。 – Default

有几个问题。看到这里的工作例如：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(); 
});

来源

2013-07-02 16:44:32 Philippe

感谢Philippe。我期待这只...再次感谢。 –

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

回答

相关问题