如何使用jQuery從數據庫中抓取數據可排序

-1

我正在嘗試創建一個菜單，允許用戶單擊並將列表項拖動到新的順序中。列表數據從數據庫中提取。我已經成功地爲我的菜單編寫了點擊和拖拽功能，但是我很努力地在用戶點擊並拖動之後按照新的順序保存數據。如何使用jQuery從數據庫中抓取數據可排序

這是我可排序的代碼，它除了var objmodel這行外都可以工作。當這個變量被創建時，它設法從數據庫中獲取一個空對象，並用新的shuffle函數值填充空對象。我需要做的是抓住用戶點擊的對象，然後用新的順序填充該對象。

數據示例：

餅乾 2.biscuit 3.chocolate。

1.chocolate 2.biscuit 3.cookies

$(document).ready(function() { 
    $('#MenuItem tbody').sortable({ 
     axis: 'y', 
     update: function (event, ui) { 
      var order = 1; 
      var model = []; 

      $("#MenuItem tbody tr").each(function() { 
       var objModel = { id: $(this).find("#MenuItem").data("model"), ShuffleFunction: order }; 

       model.push(objModel); 
       order++; 
      }); 


     } 
    }); 

}); 

    <table id = "MenuItem" class="promo full-width alternate-rows" style="text-align: center;"> <!-- Cedric Kehi DEMO CHANGE --> 




     <tr> 
      <th>Product Code 
      </th> 
      <th>Product Template 
      </th> 
      @*<th> 
       @Html.DisplayNameFor(model => model.IndexList[0].Priority) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.IndexList[0].WindowProduct) 
      </th>*@ 
      <th>Description <!-- JACK EDIT --> 
      </th> 
      <th>Actions</th> 
     </tr> 
     <tbody > 

     @foreach (var item in Model.IndexList) 
     { 


      <tr id ="trendingDisplay"> 

       <td class="center-text"> 

        @Html.DisplayFor(modelItem => item.ProductCode) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.ProductTemplate.Description) 
       </td> 
       @*<td class="center-text"> 
        @Html.DisplayFor(modelItem => item.Priority) 
       </td> 
       <td class="center-text"> 
        @Html.Raw(item.WindowProduct ? "Yes" : "No") 
       </td>*@ 
       <td> 
        @Html.DisplayFor(modelItem => item.Description) 

       </td>

@ Html.ActionLink（」」，「編輯」，新{ID：

由用戶重新命令後= item.ProductID}，new {title =「Edit」，@class =「anchor-icon-no-text edit」}） @ Html.ActionLink（「」，「Details」，new {id = item.ProductID} ，新{title =「Details」，@class =「錨圖標無文字細節」}） @ Html.ActionLink（」」，「刪除」，新{ID = item.ProductID}，{新標題= 「刪除」，@class = 「錨圖標，沒有文字刪除」}）

   </td> 
      </tr> 

     } 


      </tbody> 

    </table>

來源

2016-10-07 cazlouise

目前尚不清楚問題出在哪裏。您沒有在'update'結尾提供任何示例數據或數組示例。請修改您的帖子並進一步澄清。 – Twisty

請查看：http://api.jqueryui.com/sortable/#event-update

更新（事件，UI）

此事件被觸發，當用戶停止排序和DOM位置發生了變化。

UI

項

類型：jQuery的

表示當前拖動的元素的jQuery對象。

如果您希望使用用戶抓取和移動的物品，您可以使用ui.item。從你的例子。這可能看起來像：

var objModel = { id: ui.item.data("model"), ShuffleFunction: order };

由於您沒有提供任何HTML或工作示例的項目，我不能確認這是否會工作。

來源

2016-10-07 17:34:09 Twisty

我已經添加了html和一個數據示例。生病嘗試此代碼暫時 – cazlouise

http://stackoverflow.com/questions/39959684/how-to-grab-data-from-database-using-jquery-sortable-and-post-data-back – cazlouise

如果我回答這個問題，我希望你會標記這個答案。如果沒有，大多數人會編輯和更新他們的OP。 – Twisty

如何使用jQuery從數據庫中抓取數據可排序

回答

相關問題