0

OK、jquery コードと php を正しく書くための助けが必要です

アイデア

ユーザーが「テーブルの追加」ボタンをクリックして複数のテーブルを生成するようにします。各テーブル内で、ユーザーは「属性の追加」ボタンをクリックして属性を生成できます

このフォームを Json と jquery.post() を使用して多次元配列またはネストされたオブジェクトとして送信したい場合、php コードは各フィールドにアクセスできます

画像 : http://s11.postimg.org/4haqtm8tf/image.jpg

HTML

<form id="step_2"> <b>Type name of the table:</b> 
  <input type="button" value="Add table" class="add" id="add_t" class="space" />
  <br/>
  <input type="hidden" id="db" name='db_name' value="<?php echo $db; ?>" />
  <!----------------->
  <div id="table_wrap">
    <fieldset id="table1">
      <legend>Table:</legend>
      <input type="text" class="tablename" id="table_name" name="table_name" />
      <input type="button" value="Add attribute" class="add space" id="add" />
      <br/>
      <div class="fieldwrapper" id="field1">
        <b>Attribute</b>
        <input type="text" class="fieldname" id="att" name="att" />
        <select class="fieldtype" id="type" name="type">
          <option value="num">Number</option>
          <option value="text">Text</option>
          <option value="dt">Date/Time</option>
        </select>
      </div>
    </fieldset>
  </div>
  <!--------------------->
  <input type="button" id="back_2" value="Back" />
  <input type="button" id="save_2" value="Save" />
  <input type="button" id="next_2" value="Next" />
</form>
4

1 に答える 1

0

JSONデータは次のようなものになると思います：

  [
     {
        "table_name":"table1",
        "attributes":[
           {
              "attr_name":"id",
              "type":"integer"
           },
           {
              "attr_name":"name",
              "type":"string"
           }
        ]
     },
     {
        "table_name":"table2",
        "attributes":[
           {
              "attr_name":"id",
              "type":"integer"
           },
           {
              "attr_name":"category_id",
              "type":"integer"
           }
        ]
     }
  ]

jQuery を使用すると、このデータ構造を簡単に生成できます。これが私の提案コードです。テストしていませんが、アイデアはそれです;）

function saveTableData() {
  var tables = [];

  $("#table_wrap fieldset").each(function(index, fieldset){
    // Contains the whole table data
    var table_data = {};
    table_data['table_name'] = $(fieldset).find("#table_name").val();

    // Contains the attributes data
    var attributes = [];

    // To loop all attributes fields
    $(fieldset).find(".fieldwrapper").each(function(idx, attr){
      var attr = {};
      attr['attr_name'] = $(attr).find("#att").val();
      attr['type'] = $(attr).find("#type").val();

      // Add to the attributes collection.
      attributes.push(attr);
    });

    // Then attach attributes to the table data object.
    table_data['attributes'] = attributes;

    // Finally add the table data to final result collection.
    tables.push(table_data);
  });

  // Do something more with result ...
  $.post("/save", {"tables": tables}, function(response) {
    // ...
  })
}

次に、サーバー側のコードで、パラメーター「tables」(値は配列) を処理し、それをウォークスルーしてさらに何かを行う必要があります。

それが役立つことを願っています:)

于 2013-04-08T04:22:02.780 に答える