jquery 可排序函数在视图中不起作用 (mvc)

Question

我正在使用 jQuery UI sortable 制作我的 table 网格 sortable。但是我的元素仍然没有重新排序并且没有显示错误。我从未在 asp.net mvc.

中使用过这种方法

希望得到一些指导谢谢。

<script type="text/javascript">

$('td, th', '#MenuItem').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});

$('#MenuItem tbody').sortable().disableSelection();

<table id = "MenuItem"  class="promo full-width alternate-rows" style="text-align: center;">  
            <tr>
                <th>Prode Code
                </th>
                <th>ProdeTemplate
                </th>
                <th>Description <!-- JACK EDIT -->
                </th>
                <th>Action</th>
            </tr>
            <tbody>
            @foreach (var item in Model.IndexListitem)
            {


                <tr>
                    <td class="center-text">
                        @Html.DisplayFor(modelItem => item.ProductCode)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ProdeTemplate.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>

                    <td class="center-text nowrap">
                        @Html.ActionLink(" ", "Edit", new { id = item.ProdeID }, new { title = "Edit", @class = "anchor-icon-no-text edit" })
                        @Html.ActionLink(" ", "Details", new { id = item.ProdeID }, new { title = "Details", @class = "anchor-icon-no-text details" })
                        @Html.ActionLink(" ", "Delete", new { id = item.ProdeID }, new { title = "Delete", @class = "anchor-icon-no-text delete" })
                    </td>
                </tr>

            }

                </tbody>

        </table>

Answer 1

我不太熟悉 @Html and @foreach 注释。但是，我认为这些注释是在服务器端处理的。所以本质上你是在尝试 select 一些 html 尚未生成的 jquery 元素。

一个解决方案是将整个代码块放在 document.ready 块中

// A $( document ).ready() block.
$( document ).ready(function() {
$('td, th', '#MenuItem').each(function () {
var cell = $(this);
cell.width(cell.width());
});

$('#MenuItem tbody').sortable().disableSelection();

});