0

私はトリックを行う方法をテストしましたが、本当に良い解決策はありません。他のディスプレイには jeditable + datatable が必要です。そのため、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 で jeditable な私のテストです: http://jsfiddle.net/supersonique/ncHQ5/

ご協力いただきありがとうございます。

4

1 に答える 1

0

値 2 と 3 が空白の場合に行を削除するには、コールバックを使用してみてください。関数内で、value は POST の戻り値「http://www.appelsiini.net/projects/jeditable/php/echo.php」です。行を削除したい場合は、「delete」を返すようにします。また、データベース/データストレージで削除を行う必要があります。

$(".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
});
于 2013-05-22T18:16:03.593 に答える