可以使用jQuery和Ajax进行排序

Question

我有来自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部分必然存在某种冲突.任何建议表示赞赏.

Answer 1

您的一些示例代码似乎丢失或不正确。我已对其进行了审查并创建了以下示例：https ://jsfiddle.net/Twisty/hfdg5y20/

超文本标记语言

<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" />

查询

$(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'). 您可以像其他项目一样抓取列表中的新项目并对其进行排序。了解 sortable 不会为您排列项目，而是允许用户随意重新排序。查看更多： https: //jqueryui.com/sortable/