使用DataTables(JQuery)编辑实体并通过javascript发送

时间:2013-07-05 09:41:22

标签: javascript html datatables jeditable

我使用Datatables作为我的数据,但现在我希望用户可以修改存储在db上的数据。所以我读到我可以使用jeditable,但是当你按下回车键时我不知道如何将数据发送到服务器。我读了这个问题:Link但我不知道如何实现它。谁能帮我?我需要使用第二个表示例执行此操作:

<form action="/repairServlet" method="post">
<input type="hidden" name="action" value="aggiorna">
<input type="hidden" name="keycar" value="<%=KeyFactory.keyToString(keycar)%>">
<input type="hidden" name="plate" value="<%=repair.getProperty("plate")%>">
<input type="hidden" name="km" value="<%=repair.getProperty("km")%>">
 <input type="hidden" name="keyRepair" value="<%=KeyFactory.keyToString(repairKey)%>">
    <table width="200" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td>Data Riparazione</td>
                <td><input type="date" name="date" value="<%=(String)repair.getProperty("date") %>" /></td>
                <td>Stato</td>
                <td><select  name="selectStato" size="3" multiple="multiple"
                    tabindex="1">
                        <option value="1">In corso</option>
                        <option value="2">Sospesa</option>
                        <option value="3">Conclusa</option>
                </select>
                <td>KM</td>
                <td><input type="text" name="km" value="<%=(String)repair.getProperty("km") %>" /></td>
                <td>Targa</td>
                <td><h4>
                        <label> &nbsp <%=(String)repair.getProperty("plate") %></label>
                    </h4></td>
            </tr>

        </tbody>
    </table>



    <table cellpadding="0" cellspacing="0" border="0" class="display"
        id="example">
        <thead>
            <tr>
                <th>Indice</th>
                <th>Tipo</th>
                <th>Descrizione</th>
                <th>Quantità</th>
                <th>Prezzo</th>
                <th>Totale</th>
                <th>Azioni</th>
            </tr>
        </thead>
        <tbody>
         <%for(Entity lr : listaRepairs){ %>    

            <tr>
                <td>ddd</td>
                <td><% out.print(lr.getProperty("type"));%></td>
                <td><% out.print(lr.getProperty("description"));%></td>
                <td><% out.print(lr.getProperty("qta"));%></td>
                <td><% out.print(lr.getProperty("price"));%></td>
                <td><% out.print(lr.getProperty("tot"));%></td> 
                <td><input type="submit" name="Aggiorna" /></td>                
            </tr>       


            <%-- <tr>
                <td>ddd</td>

                <td><input type="text" name="type" value="<%=lr.getProperty("type") %>" />
                     <input type="hidden" name="keyLineRepair" value="<%=KeyFactory.keyToString(lr.getKey())%>">
                </td>
                <td><input type="text" name="description" value="<%=lr.getProperty("description") %>"/></td>
                <td><input type="text" name="qta" value="<%=lr.getProperty("qta") %>"/></td>
                <td><input type="text" name="price" value="<%=lr.getProperty("price") %>" /></td>
                <td><%=lr.getProperty("tot") %></td>
                <td><input type="submit" name="Aggiorna" /></td>
            </tr> --%>
            <%} %>
        </tbody>
    </table>

1 个答案:

答案 0 :(得分:1)

查看docs

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });
  

上面的代码做了几件事:带有类编辑的元素变得可编辑。单击鼠标即可开始编辑。表单输入元素是文本。 input元素的宽度和高度与原始元素匹配。如果用户点击外部表单更改将被丢弃。如果用户点击ESC,也会发生同样的事情。当用户点击ENTER浏览器时,将文本提交到www.example.com上的save.php。

因此,在您的代码中,为表提供一个id,然后执行以下操作:

$(document).ready(function() {
         $('#mytable').editable('http://<your domain/repairServlet');
     });