javascript - Javascript テーブル エディター -> MySQL CREATE ステートメント

Question

ユーザーが非常に基本的な HTML インターフェイスを使用して MySQL テーブルを作成できるようにする JavaScript プラグインを探しています。理想的には、CREATE ステートメントは HTML テーブルから生成されます。そのようなスクリプトを知っている人はいますか？

Answer 1

私の知る限り、実際のSQLなどを処理するためにサーバー側のコードを使用する必要があるにもかかわらず、データベーステーブルを「作成」できるjqueryプラグインはありません。自分で何かを作成するのはそれほど難しくありません。一緒に、これはあなたが探しているものだと思います。注：これは完全な実装ではありません：P単なるアイデアです。基本的にはhtmlを使用してテーブルを作成し、それをjsonに解析してから、サーバーに送信して処理します。

最初の html 'テンプレート':

<table id="table_designer">
    <tr class="table_name">
        <td><input type="text" placeholder="table name" /></td>
    </tr>
    <tr class="field_name">
        <td>name</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="type">
        <td>type</td>
        <td><select>
            <option>int</option>
            <option>varchar</option>
            <option>date</option>
        </select></td>
    </tr>
    <tr class="primary_key">
        <td>primary key</td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr class="relationship">
        <td>related type</td>
        <td><select>
            <option>none</option>
            <option>one to many</option>
            <option>many to one</option>
            <option>many to many</option>
        </select></td>
    </tr>
    <tr class="related_table">
        <td>related table</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="related_field">
        <td>related field</td>
        <td><input type="text" /></td>
    </tr>
    <tr class="controls">
        <td><button id="save">save</button></td>
        <td>
            <button id="delete">delete</button>
            <button id="add">add</button>
        </td>
    </tr>
</table>

「アクション」を処理するためのjquery

/* parses table as json and sends to server */
$('#save').click(function() {
    var json= {};

    $('#table_designer tr').each(function(){
        var $t = $(this),
            prop = $t.attr('class');

        json[prop] = [];

        $t.children('td').each(function() {
            json[prop].push($(this).children().first().val());
        });
    });

    alert(JSON.stringify(json, null, " "));

    /* send the data to the server
    $.post('www.mysite.com', json, function(d, t, j) 
           { alert('success'); });
    */
});

/* deletes parent column */
$('#delete').click(function() {
    var $t = $(this),
        pos = $t.parents('td').index() + 1;

    $('#table_designer tr').each(function(){
        $(this).children('td:nth-child(' + pos +')').remove();
    });
});

/* adds a new field */
$('#add').click(function() {
    var $t = $(this),
        pos = $t.parents('td').index() + 1;

    $('#table_designer tr').each(function(){
        var clone = $(this).children('td').last().clone(true);
        clone.children('input').val('');
        $(this).children('td:nth-child(' + pos +')').after(clone);
    });
});

</p>