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

Question

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

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();
 });

标签： javascriptpythondjangojquery-ui

Answer 1

Consider the following.

$(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>

This breaks down some of the operations into smaller functions. This makes them more flexible and easier to use later. The goals I identified were:

• User moves a item in the list, or to another list
• When the list is updated, send the new order to a URL
  • The Url: "{% url '' %}"
  • The Value of each is the task_name

It wasn't clear what data you wanted to send, so I tried to be overly prepared. Each list now has a more precise ID, each list item also has an ID in case you want to use serialize or toArray methods.

When data is sent, I build a URL String. For the Pending list, this would be:

• Action: Update List
• List: Pending
• An Array of all the Pending Items: pending[]=Task Name

Your server side script will get all this data.