Блог

Главная - Вопросы по программированию - Перетаскивание между столбцами и обновление в базе данных

Перетаскивание между столбцами и обновление в базе данных

#javascript #php #jquery #mysql #ajax

#javascript #php #jquery #mysql #ajax

Вопрос:

Я должен создать страницу, на которой есть 4 столбца [статус] с любым количеством строк, которые содержат данные, например id amp; description, и строкам должно быть разрешено перемещаться внутри столбцов, а статус должен быть обновлен в базе данных mysql.Но я застрял здесь.Буду признателен за любую помощь.

 <?php
$servername = "localhost";
$username = "root";
$password = "";
try {
    $conn = new PDO("mysql:host=$servername;dbname=test", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = 'SELECT * FROM Issues';
$query = $conn->prepare($sql);
$query->execute();
$list = $query->fetchAll(); 
    }
catch(PDOException $e)
    {
    echo "Connection failed: " . $e->getMessage();
    }
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    <style>
    #left, #right { border:1px solid #000000;min-height:100px;min-width:100px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
    #left li, #right li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function() {
        $( "#left, #right" ).sortable({
            connectWith: ".connectedSortable",
            receive: function(event,ui){
                 console.log("old ui id = " ui.sender.attr("id") " new ul id = " this.id " li id " $(ui.item).attr("id"));                   
                 if(ui.sender.attr("id") != this.id)
                 {  
//ajax
                            $.ajax({
                    type: "POST",
                    url: "logic.php", 
      data: { left: ui.sender.attr("id"), right: this.id , responsibility:$(ui.item).attr("id") }
                }).done(function( msg ) {
                    alert(  );
                             // alert( "Data Saved: "   msg );
                            });
                 }
             }
        }).disableSelection();
    });
    </script>
</head>
<body>
   <?php
            foreach ($list as $rs) {
            ?>
    <ul id="left" class="connectedSortable">
            <li id="<?php echo $rs['ID']; ?>">
                <span></span>                
                <div><h2><?php echo $rs['ID']; ?></h2><?php echo $rs['DES']; ?></div>
            </li>
    </ul>
    <ul id="right" class="connectedSortable">
            <li id="<?php echo $rs['ID']; ?>">
                <span></span>                
                <div><h2><?php echo $rs['ID']; ?></h2><?php echo $rs['DES']; ?></div>
            </li>
    </ul>
            <?php
            }
            ?>
</body>
</html>

Комментарии:

1. «Застрял здесь» Застрял где? Что работает? Чего нет? В чем ваш актуальный вопрос?

2. В части ajax мне нужно получить идентификатор данных и описание при перемещении строки между столбцами. Итак, как получить эти данные и использовать их на других страницах, чтобы я мог обновлять базу данных.

3. Я ясно выразился?? Майк

4. Вы могли бы попробовать посмотреть на метод serialize . Возвращаемая строка, которую вы отправляете на PHP через ajax.