首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery:如何处理sortable('serialize')返回的列表?

在jQuery中,要处理sortable('serialize')返回的列表,可以按照以下步骤进行:

  1. 首先,确保已经加载了jQuery和jQuery UI库。
  2. 在HTML中创建一个可排序的列表,例如:
代码语言:html
复制
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
  1. 使用jQuery UI的sortable()方法初始化可排序列表:
代码语言:javascript
复制
$( "#sortable" ).sortable();
  1. 创建一个按钮,用于提交排序后的列表:
代码语言:html<button id="submit">提交排序</button>
复制
  1. 在JavaScript中,为按钮添加一个click事件监听器,并调用sortable('serialize')方法获取排序后的列表:
代码语言:javascript
复制
$( "#submit" ).click(function() {
  var sortedList = $( "#sortable" ).sortable( "serialize" );
  console.log(sortedList);
});
  1. 当用户点击提交排序按钮时,sortable('serialize')方法将返回一个URL编码的字符串,例如:"list_item[]=1&list_item[]=2&list_item[]=3&list_item[]=4&list_item[]=5"。
  2. 可以使用JavaScript的decodeURIComponent()方法解码该字符串,并使用split()方法将其转换为数组:
代码语言:javascript
复制
var decodedSortedList = decodeURIComponent(sortedList);
var sortedArray = decodedSortedList.split('&');
  1. 最后,可以使用sortedArray中的元素来处理排序后的列表。例如,可以将其发送到服务器以进行进一步处理:
代码语言:javascript
复制
$.ajax({
  url: "your_server_url",
  type: "POST",
  data: { sortedList: sortedArray },
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

通过以上步骤,可以在jQuery中处理sortable('serialize')返回的列表。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券