자바 스크립트 테이블 편집기 -> MySQL의 CREATE 문

Question

나는 아주 기본적인 HTML 인터페이스를 사용하여 MySQL 테이블을 만들 수있는 자바 스크립트 플러그인을 찾고있다. 이상적으로 CREATE 문은 HTML 테이블에서 발생합니다. 누구든지 그러한 스크립트를 알고 있습니까?

Answer 1

내 지식에 당신이 실제로 SQL 등을 처리하기 위해 여전히 일부 서버 측 코드를 사용해야하는 것과 상관없이 데이터베이스 테이블을 '만들 수있는 jquery 플러그인이 없습니다. 뭔가를 만드는 것이 어렵지 않습니다. 너 자신을 찾고, 내가 함께 두들겨 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와 처리 할 수있는 '행동'

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