Question

我正在寻找一个允许用户使用非常基本的HTML界面创建MySQL表的javascript插件。理想情况下，HTML表会产生CREATE语句。有谁知道这样的剧本？

Answer 1

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

/* 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);
    });
});

Javascript表编辑器 - ＆gt; MySQL CREATE语句

1 个答案: