可以使用jQuery和Ajax进行排序
我有通过ColdFusion组件中的ajax访问的数据。 我试图以可排序的jQuery ui格式显示数据，但排序功能无法正常工作。 这是我正在尝试使用的代码。
$(document).ready(function() {
// get assets to display
var showid = <cfoutput>'#SESSION.Show#'</cfoutput>;
var html = "";
function assetsPost() {
$.ajax({
cache: false,
type:'POST',
url:'cfc/cfc_COLF.cfc?method=qCOLF&returnformat=json',
dataType: "json",
data: {
show_id: showid
},
success:function(data) {
if(data && data.length) { // DO SOMETHING
html += "<ul id='sortable'>";
jQuery.each(data, function(i, val) {
var linkID = data[i].linkID;
var description = data[i].description;
var discussion = data[i].discussion;
var linkurl = data[i].linkurl;
var index = i;
html += "<li id=' " + index + " ' class='ui-state-default'>";
html += "<h5 style='color:#000; text-align:left;'>";
html += "<a class='process-asset' id=' " + linkID + " ' name='done'><img src='images/icon_done.png'></a>";
html += "<a href='" + linkurl + "' target='_blank'> " + description + "</a>";
html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>";
html += "</h5>";
html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>";
html += "</li>";
});
html += "</ul>";
$('#linkoutput').html( html );
//alert(html);
} else { // DO SOMETHING
}
}
});
}
assetsPost();
});
$(document).ready(function() {
//sort order
$(function() {
$("#sortable").sortable({
opacity: 0.6,
update: function(event, ui) {
var Order = $("#sortable").sortable('toArray').toString();
$('#order').val(Order);
//alert(Order);
}
});
$( "#sortable" ).disableSelection();
});
// set up sort order for form submission
$("#mForm").submit(function() {
$("#order").val($("#sortable").sortable('toArray'))
});
});
所有的数据和jQuery加载都很好。 事实上，如果我添加了下面的代码，并且这个列表排序很好。
<ul id="sortable">
<li id="1" class="ui-state-default ">
<h5>1</h5>
</li>
<li id="2" class="ui-state-default ">
<h5>2</h5>
</li>
<li id="3" class="ui-state-default ">
<h5>3</h5>
</li>
</ul>
HTML已更新
这是我使用的HTML不起作用
<form enctype="multipart/form-data"
ACTION="page.cfm?#cgi.QUERY_STRING#"
id="mForm"
method="post">
<fieldset>
<div id="linkoutput"></div>
<label>Order:</label> <input type="text" id="order" />
<div class="mfInfo"></div>
</div>
</fieldset>
</form>
所以在代码的ajax部分中必定会有某种冲突。 任何建议表示赞赏。
您的一些示例代码似乎丢失或不正确。 我已阅读并创建了以下示例：https：//jsfiddle.net/Twisty/hfdg5y20/
HTML
<div class='sort-wrap'>
<ul id="sortable">
<li id="1" class="ui-state-default ">
<h5>1</h5>
</li>
<li id="2" class="ui-state-default ">
<h5>2</h5>
</li>
<li id="3" class="ui-state-default ">
<h5>3</h5>
</li>
</ul>
</div>
<label>Order:</label> <input type="text" id="order" />
JQUERY
$(document).ready(function() {
// get assets to display
//var showid = < cfoutput > '#SESSION.Show#' < /cfoutput>;
var showid = 10000000001;
var html = "";
function assetsPost() {
$.ajax({
cache: false,
type: 'POST',
url: '/echo/json/',
dataType: "json",
data: {
show_id: showid,
json: JSON.stringify([{
'linkID': 4,
'description': "stuff",
'discussion': "thread",
'linkurl': "http://www.example.com/"
}])
},
success: function(data) {
console.log(data);
if (data && data.length) { // DO SOMETHING
//html += "<ul id='sortable'>";
var html = "";
jQuery.each(data, function(i, val) {
var linkID = data[i].linkID;
var description = data[i].description;
var discussion = data[i].discussion;
var linkurl = data[i].linkurl;
var index = $("#sortable li").length + 1;
html += "<li id='" + index + "' class='ui-state-default'>";
html += "<h5 style='color:#000; text-align:left;'>";
html += "<a class='process-asset' id=' " + linkID + " ' name='done'><img src='images/icon_done.png'></a>";
html += "<a href='" + linkurl + "' target='_blank'> " + description + "</a>";
html += "<a class='process-asset' id=' " + linkID + " ' name='remove' style='color:#000; float:right;'><img src='images/icon_remove.png'></a>";
html += "</h5>";
html += "<p style='color:#000; margin:5px 15px 5px 15px; text-align:left;'> " + discussion + "</p>";
html += "</li>";
});
//html += "</ul>";
console.log(html);
$('#sortable').append(html);
$("#order").val($("#sortable").sortable('toArray'));
//alert(html);
} else { // DO SOMETHING
}
}
});
}
assetsPost();
$("#sortable").sortable({
opacity: 0.6,
update: function(event, ui) {
var Order = $("#sortable").sortable('toArray').toString();
$('#order').val(Order);
//alert(Order);
}
});
$("#sortable").disableSelection();
// set up sort order for form submission
$("#mForm").submit(function() {
$("#order").val($("#sortable").sortable('toArray'));
});
});
这是使用jsfiddle方法来模仿AJAX以显示工作代码。 您的情况会有所不同，根据返回的数据可能会有不同的结果。
新项目被追加到列表的末尾。 我没有在你的HTML中找到$('#linkoutput') ，所以我追加到$('#sortable') 。 您可以像其他人一样抓取和排列列表中的新项目。 了解这种排序不会为你安排物品，但允许用户随意重新排列。 查看更多：https：//jqueryui.com/sortable/
您正在使列表可排序，这会更改列表及其元素，然后在您的回调返回时稍后替换该列表。 您需要将您的$("#sortable").sortable({ ...代码移入您的成功回调中，插入新列表后。