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>

그리고 당신의 자바 스크립트에 :

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에 양식 값을 추가해야합니다.

답변

관련 문제