利用JQuery修改使表格具有可拖动功能

最新推荐文章于 2025-05-25 22:22:48 发布

小灰灰的部落

最新推荐文章于 2025-05-25 22:22:48 发布

阅读量508

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript HTML ViewUI

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用 jQuery 和 tableDnD 插件实现的产品列表拖拽排序功能，并通过 JavaScript 处理排序后的数据，更新数据库中产品的序列值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%= javascript_include_tag "dragdrop/jquery-1.2.6.min.js", "dragdrop/jquery.tablednd.js" %>

<script type="text/javascript">
$(document).ready(function() {
$("#listProducts tr:even').addClass('alt')");
$("#listProducts").tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
var rows = table.tBodies[0].rows;
var valueStr = "<input type='hidden' name='sortValue' value='";
for (var i=0; i<rows.length; i++) {
valueStr += rows[i].id+" ";
}
valueStr += "'/>";
$("#valueArea").html(valueStr);
}
});
});
</script>
<%= form_tag(:action => "sequenceModify") %>
<div id="valueArea"></div>
<% if @tag != nil %><input type="hidden" name="tag_id" value="<%= @tag.id %>"/>
<% end %>
<table class="list" cellpadding="0" cellspacing="0" id="listProducts">
<colgroup>
<col />
<col style="width:150px;" />
<col style="width:110px;" />
<col style="width:60px;" />
</colgroup>
<tr>
<th onclick="sortTable('listProducts', 1, 's')">Name</th>
<th onclick="sortTable('listProducts', 2, 's')">Code</th>
<th class="numeric" onclick="sortTable('listProducts', 3, 'n')">Price</th>
<th class="numeric" onclick="sortTable('listProducts', 4, 'n')">Quantity</th>
</tr>
<% if @products.length > 0 then %>
<% for product in @products %>
<tr class="<%= alternate %>" id="<%= product.id %>">
<td><%= link_to(h(product.name), :action => 'edit', :id => product) %></td>
<td><%= product.code %></td>
<td class="numeric"><%= number_to_currency(product.price) %></td>
<td class="numeric"><%= product.quantity %></td>
</tr>
<% end %>
<% else %>
<tr><td colspan="4">No products to show in this view.</td></tr>
<% end %>
</table>
<%if @tag != nil %>
<center><input type="submit" value=" Sequence Modify! "/></center>
<% end %>
<%= end_form_tag %>提交

controller:

def sequenceModify
    sortValue = params[:sortValue]
    sortValue = sortValue.split(" ");
    sortTemp = 1
    tag_id = params[:tag_id]
    sortValue.each{|product_id|
      if product_id != "" and product_id != nil
        ProductTag.update_all("sequence = #{sortTemp}", "tag_id = #{tag_id} and product_id =
#{product_id}")
        sortTemp += 1
      end
    }
    redirect_to :action => 'list_by_tags', :key => tag_id
end