使用 jquery sortable 来管理数据库中列表的顺序？
我有一个电影表和一个演员表，由 C# 内置的简单 CMS 管理。用户需要调整电影页面列表中演员的顺序。我认为 jquery sortable 会为此提供一个非常好的 UI，并且我可以在 gridview 上完美地实现它。下面的代码：
<script type="text/javascript">
$(function () {
$('table').filter(function () {
return $('tr', this).length > 2;
})
.sortable({
items: 'tr:not(:first)',
axis: 'y',
scroll: true
}).disableSelection();
});
</script>
我还能够使用网站上分享的代码来获取拖动项目的新位置，如下所示：
stop: function (event, ui) {
alert("New position: " + ui.item.index());
var x1 = ui.item.index();
}
第二个片段只是为了证明我可以读取新位置，但对我需要做的事情没有用处。
actor 表中的行包含 actorID、movieID 和 order 等相关字段。当演员在 UI 中重新排序时，我需要将新的顺序值写回数据库。这就是我质疑执行此操作的最佳方法的地方。
1）可排序小部件对于管理数据库中的数据来说是一个合理的选择吗？
2）如果是这样，将更新的值写回的明智方法是什么？性能并不重要，因为最多只有少数用户，但列表中可能有接近 100 个项目，尽管任何时候可能只会重新订购一两个项目。
I have a table of movies and a table of actors managed by a simple CMS built in c#. The user will need to adjust the order of the actors in a list on the movie page. I think the jquery sortable would provide a very nice UI for this and I can implement it on a gridview perfectly well. Code below:
<script type="text/javascript">
$(function () {
$('table').filter(function () {
return $('tr', this).length > 2;
})
.sortable({
items: 'tr:not(:first)',
axis: 'y',
scroll: true
}).disableSelection();
});
</script>
I was also able to grab the new position of a dragged item using code someone shared on the site as follows:
stop: function (event, ui) {
alert("New position: " + ui.item.index());
var x1 = ui.item.index();
}
That second snippet is just to prove I can read the new position, but is not useful for what I need to do.
The actors table has rows with the relevent fields of actorID, movieID and order. When actors are re-ordered in the UI, I need to write the new order values back to the database. This is where I am questioning the best way to do this.
1) Is the sortable widget a reasonable choice in the first place for managing data in a db?
2) If so, what is a smart approach to writing the udpated values back? Performance isn't going to be critical since there are only a handful of users at most, but there could be close to 100 items in the list although the chance are that only one or two would be re-ordered at any time.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
1）我有一个页面，我在其中使用 jQuery 表拖动和执行类似的操作；删除插件。用户通过拖动行对表格进行排序，然后我们保存该顺序（它在 PDF 报告等中使用）。如果 UI 适合您的目的，那么使用 sortable 来做到这一点是完全合理的。 :)
2) 最直接的方法是，每当您更改某些内容的排序顺序时，请遍历整个列表并构建一个 Id 和顺序的数组（甚至只是按顺序排列的 Id）。然后，您将使用 jQuery ajax() 命令将该数组发送回服务器。
在服务器上，您有一个控制器操作，需要一个 int 数组（或您传回的任何内容）。然后您可以将该订单保存到服务器。该部分只是标准服务器代码，因此非常简单。
我会给你一些示例代码，但不幸的是我现在没有时间。 :( 不过，使用 jQuery 进行 ajax 调用非常容易，并且有很多示例。:)
1) I've got a page where I do something similar with the jQuery table drag & drop plugin. The user sorts the table by dragging rows around, and we save that order (it gets used in PDF reports and such). If the UI works for your purpose then it's entirely reasonable to use sortable to do that. :)
2) The most straightforward way is that whenever you change the sort order on something, go through the entire list and build an array of the Ids and orders (or even just the Ids in order). You'll then use the jQuery ajax() command to send that array back to the server.
On the server you have a controller action that expects an int array (or whatever you're passing back). You can then save that order to the server. That part is just standard server code, so its pretty easy.
I'd give you some example code, but I don't have time right now unfortunately. :( It's pretty easy to make an ajax call using jQuery though, and there's lots of examples. :)