从 Alloy UI 数据表创建 JSON

Question

我使用 alloyUI 从 JSON 创建了一个数据 table，每次单击 "Add Row" 按钮时我都会推送一个新行。完成所有这些后，我需要在 "Submit" 单击时创建此最终数据集合的 json。但是我找不到使用 alloyUI

将 datatable/HTML table（两者都可以）转换为 JSON 的方法

这是我的 html 和 js:

YUI().use('aui-datatable','json-stringify', function(A) {
 
 var data = [
             {Name: 'Bob', Age: '28',Salary: '10000',Department: 'Admin',Address: 'Kolkata'},
             {Name: 'Joe', Age: '42',Salary: '20000',Department: 'Accounts',Address: 'Kolkata'},
             {Name: 'Sarah', Age: '35',Salary: '30000',Department: 'Sales',Address: 'Kolkata'},
             {Name: 'Billy', Age: '24',Salary: '40000',Department: 'Admin',Address: 'Kolkata'},
             {Name: 'James', Age: '36',Salary: '50000',Department: 'Accounts',Address: 'Kolkata'},
             {Name: 'Stark', Age: '51',Salary: '60000',Department: 'Sales',Address: 'Kolkata'}
           ];
 
 var dtable = new A.DataTable.Base({
  columnset: ['Name', 'Age','Salary','Department','Address'],
  recordset: data
 })
 .render("#container");
 
 
 A.one('#addRow').on('click', function() {
  data.push({
   "Name": A.one('#Name').get('value'),
      "Age": A.one('#Age').get('value'),
      "Salary": A.one('#Salary').get('value'),
      "Department": A.one('#Department').get('value'),
      "Address": A.one('#Address').get('value')
  });
  dtable.set('recordset', data);
  A.one('#Name').set('value', '');
  A.one('#Age').set('value', '');
  A.one('#Salary').set('value', '');
  A.one('#Department').set('value', '');
  A.one('#Address').set('value', '');
  
 });
 A.one('#submit').on('click', function() {
    //Here I need the code to create JSON  
    });
});

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="example">
  <div>
    <input id="Name" style="width:90px" placeholder="Name"></input>
    <input id="Age" style="width:30px" placeholder="Age"></input>
    <input id="Salary" style="width:60px" placeholder="Salary"></input>
    <input id="Department" style="width:90px" placeholder="Department"></input>
    <input id="Address" style="width:100px" placeholder="Address"></input>
  </div>
  <br>
  <div id="container"></div>
  <br>
  <button id="addRow">Add row</button>
  <button id="submit">Submit</button>
</div>

Answer 1

您需要使用 JSON.stringify()。将您要发送到 JSON 的数据传递给它。对于您的示例，您应该通过 dtable.get('recordset'):

A.JSON.stringify(dtable.get('recordset'))

这是一个使用您的代码的可运行示例：

YUI().use('aui-datatable','json-stringify', function(A) {
 
 var data = [
             {Name: 'Bob', Age: '28',Salary: '10000',Department: 'Admin',Address: 'Kolkata'},
             {Name: 'Joe', Age: '42',Salary: '20000',Department: 'Accounts',Address: 'Kolkata'},
             {Name: 'Sarah', Age: '35',Salary: '30000',Department: 'Sales',Address: 'Kolkata'},
             {Name: 'Billy', Age: '24',Salary: '40000',Department: 'Admin',Address: 'Kolkata'},
             {Name: 'James', Age: '36',Salary: '50000',Department: 'Accounts',Address: 'Kolkata'},
             {Name: 'Stark', Age: '51',Salary: '60000',Department: 'Sales',Address: 'Kolkata'}
           ];
 
 var dtable = new A.DataTable.Base({
  columnset: ['Name', 'Age','Salary','Department','Address'],
  recordset: data
 })
 .render("#container");
 
 
 A.one('#addRow').on('click', function() {
  data.push({
   "Name": A.one('#Name').get('value'),
      "Age": A.one('#Age').get('value'),
      "Salary": A.one('#Salary').get('value'),
      "Department": A.one('#Department').get('value'),
      "Address": A.one('#Address').get('value')
  });
  dtable.set('recordset', data);
  A.one('#Name').set('value', '');
  A.one('#Age').set('value', '');
  A.one('#Salary').set('value', '');
  A.one('#Department').set('value', '');
  A.one('#Address').set('value', '');
  
 });
 A.one('#submit').on('click', function() {
      A.one('#json').set('innerHTML', A.JSON.stringify(dtable.get('recordset')));
    });
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
    <link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="example">
  <div>
    <input id="Name" style="width:90px" placeholder="Name"></input>
    <input id="Age" style="width:30px" placeholder="Age"></input>
    <input id="Salary" style="width:60px" placeholder="Salary"></input>
    <input id="Department" style="width:90px" placeholder="Department"></input>
    <input id="Address" style="width:100px" placeholder="Address"></input>
  </div>
  <br>
  <div id="container"></div>
  <br>
  <button id="addRow">Add row</button>
  <button id="submit">Submit</button>
</div>

<div id="json"></div>

从 Alloy UI 数据表创建 JSON

Creating JSON from Alloy UI DataTable

html

javascript

json

yui3

alloy-ui