使用 jquery + jeditable + bootstrap 在表格上添加可编辑的新行

Question

我有测试可能的方法来解决这个问题，但没有什么是真正好的解决方案。我需要 jeditable + 数据表用于其他显示。这就是为什么 jeditable 是强制性的。

我正在尝试在表（id、type、phone、default）上使用 jquery + jeditable 来做：

1. 添加行/删除行（如果 val 2 & 3 为空则删除）
2. 编辑添加的新行的字段 1 和 2

HTML：

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>

<h4>Tél <button id="add-phone" class="btn btn-mini btn-primary" type="button"> + </button></h4>
<table border="1" width="80%">
    <tr>
        <th>id</th>
        <th>Type</th>
        <th>Tel</th>
        <th></th>
    </tr>
    <tr>
        <td>1</td>
        <td class="dblclick">mob</td>
        <td class="dblclick">0000000</td>
        <td><input type="radio" name="1-tel-default" id="1-tel-default-1" value="1" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td class="dblclick">mob</td>
        <td class="dblclick">0000000</td>
        <td><input type="radio" name="1-tel-default" id="1-tel-default-2" value="1" /></td>
    </tr>
        <tr>
        <td>3</td>
        <td class="dblclick">mob</td>
        <td class="dblclick">0000000</td>
        <td><input type="radio" name="1-tel-default" id="1-tel-default-3" value="1" /></td>
    </tr>
</table>

Javascript：

$(document).ready(function(){ 

    $(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
        indicator : "Loading...",
        submit: 'Ok',
        cancel: 'Cancel',
        tooltip   : "Double-click for edit...",
        event     : "dblclick",
        style  : "inherit"
    });

    // trigger event when button is clicked
    $("#add-phone").click(function()
    {
        //alert("click");

        // add new row to table using addTableRow function
        var clone = $("#phonelist tbody tr:last")
        .clone()
        .find('td')
        .text('Edit')
        .end()
        .insertAfter("#phonelist tbody tr:last");

        /*$('#phonelist tbody tr:last').after('<tr id="last" ><td class="dblclick">Editer</td><td class="dblclick">Editer</td><td><input type="radio" name="default" id="default-last" value="0"></td></tr>');*/

        // prevent button redirecting to new page
        return false;
    });

});

这是我在 jsfiddle 上的可编辑测试：http://jsfiddle.net/supersonique/ncHQ5/

感谢您的帮助。

Answer 1

如果值 2 和 3 为空，则要删除一行，请尝试使用回调。在函数中，value 是 POST "http://www.appelsiini.net/projects/jeditable/php/echo.php" 的返回值。因此，如果要删除该行，请使其返回“删除”。它还必须在您的数据库/数据存储中进行删除。

$(".dblclick").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { 
    indicator : "Loading...",
    submit: 'Ok',
    cancel: 'Cancel',
    tooltip   : "Double-click for edit...",
    event     : "dblclick",
    style  : "inherit",
    callback: function(value, setting) {
      if(value == "delete") $(this).parent().hide();
    }
});

您可能需要调整使用的 .parent() 函数的数量，具体取决于单击的元素与行元素的嵌套程度。

此外，如果您要添加要使用 jeditable 的新行，则不要在文档准备好时绑定 jeditable，而是在文档单击时绑定它，这样每次单击新添加的行时，都会将可编辑行为绑定到它们.

$(document).on('click', function() {
  // your jeditable stuff here
});