0

ajax 経由で mysql db に更新できる、ネストされた並べ替え可能なメニューがあります。編集可能な各要素のコンテンツを追加できるかどうかを知りたいです。David Bushell のネスト可能なコードを使用しています: http://dbushell.github.com/Nestable/

ご返信ありがとうございます。私は成功せずに試しました。これは私のコードです：

     <?php

    /* Function menu_showNested
     * @desc Create inifinity loop for nested list from database
     * @return echo string
    */
    function menu_showNested($parentID) {
        global $connection;

        $sql = "SELECT * FROM menu WHERE parent_id='$parentID' ORDER BY rang";
        $result = mysql_query($sql, $connection);
        $numRows = mysql_num_rows($result);

        if ($numRows > 0) {
            echo "\n";
            echo "<ol class='dd-list'>\n";
                while($row = mysql_fetch_array($result)) {
                    echo "\n";

                    echo "<li class='dd-item' data-id='{$row['id']}'>\n";
                        echo "<div class='dd-handle'><span>{$row['id']}: {$row['name']}</span><input type='text' style='display:none;' /></div>\n";

                        // Run this function again (it would stop running when the mysql_num_result is 0
                        menu_showNested($row['id']);

                    echo "</li>\n";
                }
            echo "</ol>\n";
        }
    }




    ## Show the top parent elements from DB
    ######################################
    $sql = "SELECT * FROM menu WHERE parent_id='0' ORDER BY rang";
    $result = mysql_query($sql, $connection);
    $numRows = mysql_num_rows($result);


    echo "<div class='cf nestable-lists'>\n";
        echo "<div class='dd' id='nestableMenu'>\n\n";
            echo "<ol class='dd-list'>\n";

                while($row = mysql_fetch_array($result)) {
                    echo "\n";

                    echo "<li class='dd-item' data-id='{$row['id']}'>";
                        echo "<div class='dd-handle'><span>{$row['id']}: {$row['name']}</span><input type='text' style='display:none;' /></div>";


                    menu_showNested($row['id']);

                    echo "</li>\n";
                }

            echo "</ol>\n\n";
        echo "</div>\n";
    echo "</div>\n\n";


    // Feedback div for update hierarchy to DB
    // IMPORTANT: This needs to be here! But you can remove the style
    echo "<div id='sortDBfeedback' style='border:1px solid #eaeaea; padding:10px; margin:15px;'></div>\n";


    // Script output for debuug
    //echo "<textarea id='nestableMenu-output'></textarea>";

?>

そして、これは私の.jsコードです:

    <script>
        $(document).ready(function() {
        $('li div.dd-handle').dblclick(function(){
        text = $(this).find('span').text();
        $(this).find('input').val(text).show(0, function(){$(this).focus()});
        $(this).find('span').hide();
     });
        $('div.dd-handle input').focusout(function(){        
        text = $(this).val();
        $(this).parent().find('span').text(text).show(0, function(){$(this).focus()});
        $(this).hide();
     });
     });
    </script>   

     $(document).ready(function()
{

    /* The output is ment to update the nestableMenu-output textarea
     * So this could probably be rewritten a bit to only run the   menu_updatesort function onchange
    */

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
            menu_updatesort(window.JSON.stringify(list.nestable('serialize')));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list menu
    $('#nestableMenu').nestable({
        group: 1
    })
    .on('change', updateOutput);



    // output initial serialised data
    updateOutput($('#nestableMenu').data('output', $('#nestableMenu-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

    $('#nestable3').nestable();

});
</script>
4

1 に答える 1

0

次のように、入力タグの div 内のテキストを変換してみてください。

$('li div.dd-handle').dblclick(function(){
    text = $(this).text();
    $(this).html('<input type="text" value="'+text+'" />');
}); ...

私が考えるより良い方法は、div内に隠された入力とテキストコンテンツを含むスパンを作成することです。次に、より簡単です。同じdivコンテンツを入力値に渡し、入力を表示/非表示にし、非表示/スパンを表示します...
この例を見てくださいhttp://jsfiddle.net/U8DU9/9/

(より多くの回答については、質問の詳細を改善してください。あなたが何を望んでいるのか理解できるかどうかわかりません)

于 2012-09-08T13:34:57.940 に答える