Question

我有一个嵌套和可排序的菜单，我可以通过ajax更新到我的mysql数据库。我想知道是否可以添加每个元素的内容可编辑。我正在使用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>

Answer 1

尝试在输入标记中转换div中的文本，如下所示：

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

我认为更好的方法是创建隐藏在div中的输入和带有文本内容的跨度，然后更容易，您可以将相同的div内容传递给输入值并只显示/隐藏输入，并隐藏/显示跨度......
看看这个例子http://jsfiddle.net/U8DU9/9/

（更多答案试图改善你的问题细节，我不确定我是否理解你想要的东西）

可排序的嵌套菜单可编辑元素

1 个答案: