javascript - खींचें और ड्रॉप आइटम और डेटाबेस में अद्यतन के बाद jQuery Nestable प्लगइन में बच्चों और आईडी कैसे प्राप्त करें?



php codeigniter (1)

मैं एक वेबसाइट के लिए मेनू संपादक बनाने के लिए jQuery Nestable प्लगइन का उपयोग कर रहा हूँ। मेनू आइटम पर उपयोगकर्ता क्लिक के बाद मैंने आइटम आईडी और बच्चे प्राप्त करने का प्रयास किया है और अपनी स्थिति बदल दी है।

समस्या : मुझे नहीं पता कि आईडी और बच्चे कैसे प्राप्त करें और डेटाबेस में अपडेट करें।

यहां jQuery नेस्टेबल प्लगइन है

<script>
    $(document).ready(function () {
        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));
            } else {
                output.val('JSON browser support required for this demo.');
            }
        console.log(list.nestable('serialize'));
        console.log(window.JSON.stringify(list.nestable('serialize')));
        };
        $('#nestable').nestable({
            group: 1,
            maxDepth: 7,
        }).on('change', updateOutput);
        updateOutput($('#nestable').data('output', $('#nestable-output')));
    });
</script>

मेन्यू के लिए एचटीएमएल यहाँ है

<div class="cf nestable-lists">
    <div class="dd" id="nestable">
        <ol class="dd-list">
            <li class="dd-item" data-id="1"> <div class="dd-handle">Item 1 when parent == 0</div> </li>
            <li class="dd-item" data-id="44"> <div class="dd-handle"> Item 2 when this parent_id == its id </div>
                <ol class="dd-list">
                    <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="4"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="5"><div class="dd-handle">Item 3</div></li>
                    <li class="dd-item" data-id="6"><div class="dd-handle">Item 3</div></li>
                </ol>
            </li>
        </ol>
    </div>
</div>

कंसोल पर परिणाम

[{"id":1},{"id":44,"children":[{"id":3},{"id":4},{"id":5},{"id":6}]}]

संस्करण

मेरी संरचना में मैं मेन्यू अपडेट करना चाहता हूं जब Parent_id == आईडी जहां मेनू आईडी और M_order के मेनू आइटम संख्या संख्या का स्तर बनाएं । लेकिन मुझे यह संरचना बनाने के बारे में पता नहीं है।

और यहां var_dump है ($ यह-> इनपुट-> पोस्ट ('सूची'));

 1 => 
    array (size=1)
      'id' => string '2' (length=1)
  2 => 
    array (size=1)
      'id' => string '3' (length=1)
  3 => 
    array (size=1)
      'id' => string '4' (length=1)
  4 => 
    array (size=1)
      'id' => string '5' (length=1)
  5 => 
    array (size=2)
      'id' => string '6' (length=1)
      'children' => 
        array (size=1)
          0 => 
            array (size=2)
              ...

यहां मेरी टेबल संरचना और मेनू की छवियां हैं


सूची को PHP में भेजने के लिए, आपको AJAX के माध्यम से सूची पोस्ट करने के लिए अपना updateOutput फ़ंक्शन बदलना होगा:

<script>
$(document).ready(function () {
    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target), output = list.data('output');

        $.ajax({
            method: "POST",
            url: "saveList.php",
            data: {
                list: list.nestable('serialize')
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Unable to save new list order: " + errorThrown);
        });
    };

    $('#nestable').nestable({
        group: 1,
        maxDepth: 7,
    }).on('change', updateOutput);
});
</script>

PHP में, आपको $_POST['list'] प्राप्त होगा, जो नीचे दिखाए गए अनुसार दिखाई देगा। इस मामले में, मैंने सूची में चौथी वस्तु (आईडी 6) को दूसरी जगह (आईडी 3 के बाद) खींच लिया, इसलिए अपेक्षित आदेश 3, 6, 4, 5 :

Array (
    [0] => Array (
        [id] => 1
    )
    [1] => Array (
        [id] => 44
        [children] => Array (
            [0] => Array (
                [id] => 3
            )
            [1] => Array (
                [id] => 6
            )
            [2] => Array (
                [id] => 4
            )
            [3] => Array (
                [id] => 5
            )
        )
    )
)

फिर आप इस सरणी पर फिर से सक्रिय हो सकते हैं और तदनुसार अपना डेटाबेस अपडेट कर सकते हैं।

संपादित करें : PHP में डेटा को सहेजने के लिए, आपको मौजूद सभी बच्चों के सरणी को नेविगेट करने के लिए रिकर्सन का उपयोग करना होगा। मैंने एक साधारण लिपि लिखी जो हर क्रम परिवर्तन पर बचाएगी:

index.php

<?php
require "pdoConnection.php";
$list = getFullListFromDB($conn);
?>

<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/dbushell/Nestable/master/jquery.nestable.js"></script>
<script>
$(document).ready(function () {
    var updateOutput = function (e) {
        var list = e.length ? e : $(e.target), output = list.data('output');

        $.ajax({
            method: "POST",
            url: "saveList.php",
            data: {
                list: list.nestable('serialize')
            }
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Unable to save new list order: " + errorThrown);
        });
    };

    $('#nestable').nestable({
        group: 1,
        maxDepth: 7,
    }).on('change', updateOutput);
});
</script>
</head>

<body>
<div class="cf nestable-lists">
    <div class="dd" id="nestable">
<?php displayList($list); ?>
    </div>
</div>
</body>
</html>

<?php
function getFullListFromDB($conn, $parent_id = 0) {
    $sql = "
        SELECT id, parent_id, description
        FROM items 
        WHERE parent_id = :parent_id
        ORDER BY m_order
    ";

    $statement = $conn->prepare($sql);
    $statement->bindValue(':parent_id', $parent_id, PDO::PARAM_INT);
    $statement->execute();

    $result = $statement->fetchAll(PDO::FETCH_ASSOC);

    foreach($result as &$value) {
        $subresult = getFullListFromDB($conn, $value["id"]);

        if (count($subresult) > 0) {
            $value['children'] = $subresult;
        }
    }
    unset($value);

    return $result;
}

function displayList($list) {
?>
    <ol class="dd-list">
    <?php foreach($list as $item): ?>
    <li class="dd-item" data-id="<?php echo $item["id"]; ?>"><div class="dd-handle"><?php echo $item["description"]; ?></div>
    <?php if (array_key_exists("children", $item)): ?>
    <?php displayList($item["children"]); ?>
    <?php endif; ?>
    </li>
    <?php endforeach; ?>
    </ol>
<?php
}
?>

saveList.php

<?php

require "pdoConnection.php";

if ($_POST) {
    saveList($conn, $_POST['list']);
    exit;
}

function saveList($conn, $list, $parent_id = 0, &$m_order = 0) {
    foreach($list as $item) {
        $m_order++;

        $sql = "
            UPDATE items
            SET 
                parent_id = :parent_id,
                m_order = :m_order
            WHERE id = :id
        ";
        $statement = $conn->prepare($sql);
        $statement->bindValue(":parent_id", $parent_id, PDO::PARAM_INT);
        $statement->bindValue(":id", $item["id"], PDO::PARAM_INT);
        $statement->bindValue(":m_order", $m_order, PDO::PARAM_INT);
        $statement->execute();

        if (array_key_exists("children", $item)) {
            saveList($conn, $item["children"], $item["id"], $m_order);
        }
    }
}

?>

pdoConnection.php

<?php
$server = "myServer"; $database = "DbName"; $username = "myself"; $password = "secret";
$conn = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);
?>

टेबल परिभाषा (एमएसएसक्यूएल)

CREATE TABLE [items](
    [id] [int] NOT NULL,
    [parent_id] [int] NOT NULL,
    [description] [nvarchar](100) NOT NULL,
    [m_order] [int] NOT NULL,
    CONSTRAINT [PK_items] PRIMARY KEY CLUSTERED ([id] ASC)
) ON [PRIMARY]

INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (1, 0, N'Item 1', 1)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (2, 0, N'Item 2', 2)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (3, 2, N'Item 3.1', 3)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (4, 2, N'Item 3.2', 4)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (5, 2, N'Item 3.3', 5)
INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (6, 2, N'Item 3.4', 6)




jquery-plugins