jQuery-UI可排序 - 更新后同步数组(模型) [英] jQuery-UI sortable - synchronize array (model) after update
本文介绍了jQuery-UI可排序 - 更新后同步数组(模型)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我有一个包含数据的数组,它可能来自Ajax(但这里不需要这样做)。
Let's say I have an array containing data, it would probably come from Ajax (but no need to do this here).
使用该数组生成内容对于UL元素,我使用jQuery-UI进行UL排序
With that array I generate the content of a UL element, I make that UL sortable, with jQuery-UI
我希望在客户端对其进行排序后保持数组的顺序与UL同步无论如何。
I would like to keep the order of the array synchronized with the UL, after the client sorts it anyway.
这是否有一种优雅的方式?
Is there an elegant way of doing this?
var locations = [
{name: 'point 0', location: [50.8674162,4.3772933]},
{name: 'point 1', location: [50.8135113,4.3247394]},
{name: 'point 2', location: [50.8771732,4.3544551]},
{name: 'point 3', location: [50.8460485,4.3664706]}
];
function generateUl() {
var content = '';
for(var i in locations) {
content += '<li>'+ locations[i].name +' ('+ locations[i].location.toString() +')</li>';
}
$('#points').html(content);
}
$(document).ready(function() {
generateUl();
$('#points').sortable({
update: function(event, ui) {
//$('#points li').each( function(e) {
//});
// so, I would like to see this display change after every update and have the order match
$('#display').html(JSON.stringify(locations));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="points"></ul>
<div id="display"></div>
推荐答案
代码中的一些变化可以得到你想要的东西:
A few changes in the code to get what you are looking for:
var locations = [
{name: 'point 0', location: [50.8674162,4.3772933]},
{name: 'point 1', location: [50.8135113,4.3247394]},
{name: 'point 2', location: [50.8771732,4.3544551]},
{name: 'point 3', location: [50.8460485,4.3664706]}
];
function generateUl() {
for(var i in locations) {
li = $('<li>'+ locations[i].name +' ('+ locations[i].location.toString() +')</li>');
li.data('d', locations[i])
$('#points').append(li);
}
}
$(document).ready(function() {
generateUl();
$('#points').sortable({
update: function(event, ui) {
new_locations = $(this).find('li').map(function(i, el) {
return $(el).data('d')
}).get()
$('#display').html(JSON.stringify(new_locations));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="points"></ul>
<div id="display"></div>
- 而不是创建
li
内容为字符串 - 我创建了li
元素,并使用数据('d')$添加了该点的数据C $ C>
- 在
可排序的
对象的更新
函数内 - 我得到了<$来自li
节点的c $ c> data (根据当前位置 - 这是新订单)。
- Instead of creating the
li
content as string - I createdli
elements and added the data of that point usingdata('d')
- Inside the
update
function of thesortable
object - I got back thatdata
from theli
nodes (based on their current position - this is the new order).
这篇关于jQuery-UI可排序 - 更新后同步数组(模型)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文