javascript - Javascript 表编辑器 -> MySQL CREATE 语句

Question

我正在寻找一个 javascript 插件，它可以让用户使用非常基本的 HTML 界面创建 MySQL 表。理想情况下，CREATE 语句将来自 HTML 表。有人知道这样的脚本吗？

Answer 1

据我所知，没有一个 jquery 插件可以让你“创建”数据库表，不管你仍然需要使用一些服务器端代码来处理实际的 SQL 等。自己创建东西并不太难，我敲了我认为这就是你要找的东西。注意：这不是一个完整的实现：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>