如何使用 jquery 从列表中获取 ul li 的值

Question

我有三个列表待处理、进行中和已完成。 我只想获取从字典中获取的待定列表的值。 因此，我无法在数据库中插入值。 并且还想知道如何在将待处理任务拖放到已完成列表时更改状态值，以便在数据库中将状态更改为已完成。 我浏览了一些通过 Inte.net 提供的解决方案，但由于我是编码领域的新手，所以找不到所需的解决方案。

HTML

    <div>
        <div class="row">
            <div class="column">
                <div class="container">
                    <h2>Pending</h2> <br>
                    <ul id="sortable1" class="droptrue">
                        {% for i in task %}
                        <li class="ui-state-default">{{i.task_name}}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="column">
                <div class="container">
                    <h2>In Progress</h2> <br>
                    <ul id="sortable2" class="dropfalse">
                        <li class="ui-state-highlight">a</li>
                        <li class="ui-state-highlight">b</li>
                        <li class="ui-state-highlight">c</li>
                        <li class="ui-state-highlight">d</li>
                        <li class="ui-state-highlight">e</li>
                    </ul>
                </div>
            </div>
            <div class="column">
                <div class="container">
                    <h2>Completed</h2> <br>
                    <ul id="sortable3" class="droptrue">
                        <li class="ui-state-highlight">A</li>
                        <li class="ui-state-highlight">B</li>
                        <li class="ui-state-highlight">C</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

jquery

$(function() {

    $( "ul.droptrue" ).sortable({
        connectWith: "ul"
    });
    $( "ul.dropfalse" ).sortable({
        connectWith: "ul",
        dropOnEmpty: true
    });
    $( "#sortable1, #sortable2, #sortable3" ).disableSelection();
    } );

$(function () {
     $("#sortable1, #sortable2, #sortable3").sortable({
         connectWith: "ul",
         update: function (event, ui) {   
            
            var data        = $(ui.droptrue).children("li:first").find('li').val();
            alert(data)   


            $.ajax({
                type: "POST",
                url: "{% url '' %}",
                data: "data",
                dataType: "json",
                success: function (data) {


                }
            });

         }
     }).disableSelection();
 });

Answer 1

我看到两件事：

1. 在你 $.ajax 作为数据发送字符串“数据”。 这里你应该发送一些 json 在后端解析以将数据保存到数据库或你分配的变量数据
2. （如果我答对了你的问题）向你的<li>元素添加该元素的 id，例如<li class="ui-state-default" data-id="{{i.id}}">{{i.task_name}}</li> 。 在您的 jQuery 代码中，然后获取数据 ID 并将新状态发送到服务器

Answer 2

考虑以下。

 $(function() { function sendData(u, d) { $.ajax({ type: "POST", url: u, data: d, dataType: "json", success: function(data) { return data }, error: function(x, s, e) { console.log("Ajax Error:", u, s, e); return false; } }); } function sortUpdate(e, ui) { var list = $(e.target); var id = list.attr("id"); var myData = "action=updateList&list=" + id +"&"; myData += $("li", list).map(function() { var val = $(this).text().trim(); return id + "[]=" + val; }).get().join("&"); console.log("Sending Data To:", "{% url '' %}"); console.log("Data:", myData); sendData("{% url '' %}", myData); } $("ul.droptrue").sortable({ connectWith: "ul.droptrue", update: sortUpdate, placeholder: "sortable-placeholder" }); $("ul.dropfalse").sortable({ connectWith: "ul.droptrue", dropOnEmpty: false, update: sortUpdate }); $(".sortable").disableSelection(); });

 h2 { padding: 0.2em 0.4em; margin: 0; border-bottom: 1px solid #222; }.column { width: 340px; }.container ul { padding: 0; margin: 10px 5px; list-style: none; }.container ul li { padding: 0.2em; margin-bottom: -1px; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div> <div class="row"> <div class="column"> <div class="container"> <h2>Pending</h2> <ul id="pending" class="sortable droptrue"> <li id="pending_1" class="ui-state-default">Task 1</li> <li id="pending_2" class="ui-state-default">Task 2</li> <li id="pending_3" class="ui-state-default">Task 3</li> <li id="pending_4" class="ui-state-default">Task 4</li> <li id="pending_5" class="ui-state-default">Task 5</li> </ul> </div> </div> <div class="column"> <div class="container"> <h2>In Progress</h2> <ul id="progress" class="sortable dropfalse"> <li id="progress_1" class="ui-state-highlight">a</li> <li id="progress_2" class="ui-state-highlight">b</li> <li id="progress_3" class="ui-state-highlight">c</li> <li id="progress_4" class="ui-state-highlight">d</li> <li id="progress_5" class="ui-state-highlight">e</li> </ul> </div> </div> <div class="column"> <div class="container"> <h2>Completed</h2> <ul id="completed" class="sortable droptrue"> <li id="completed_1" class="ui-state-highlight">A</li> <li id="completed_2" class="ui-state-highlight">B</li> <li id="completed_3" class="ui-state-highlight">C</li> </ul> </div> </div> </div> </div>

这将一些操作分解为更小的功能。 这使它们更灵活，以后更容易使用。 我确定的目标是：

• 用户移动列表中的项目，或移动到另一个列表
• 列表更新后，将新订单发送至 URL
  • Url： "{% url '' %}"
  • 每个的值是task_name

不清楚你要发送什么数据，所以我尽量做好了准备。 每个列表现在都有一个更精确的 ID，每个列表项也有一个 ID，以防您想使用serialize或toArray方法。

发送数据时，我构建了一个 URL 字符串。 对于待定列表，这将是：

• 动作：更新列表
• 列表：待定
• 所有待处理项目的数组：pending[]=Task Name

您的服务器端脚本将获取所有这些数据。