利用JQuery修改使表格具有可拖动功能
<%= 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.rows;
var valueStr = "<input type='hidden' name='sortValue' value='";
for (var i=0; i<rows.length; i++) {
valueStr += rows.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 >Name</th>
<th >Code</th>
<th class="numeric" >Price</th>
<th class="numeric" >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
页:
[1]