在 ASP.Net MVC 5 中使用 DataTables 行重新排序来更新值

Posted 2023-05-07

【中文标题】在 ASP.Net MVC 5 中使用 DataTables 行重新排序来更新值

【英文标题】：Update value by using DataTables row-reorder in ASP.Net MVC 5

【发布时间】：2016-02-01 19:51:48

【问题描述】：

我需要通过数据表 (www.datatables.net) 中的行重排序函数更新数据库中的 OrderIndex 值。

我已经在 google 中搜索过，我找到了这个article。我按照所有步骤操作，但没有帮助。

如果您需要更多信息，请告诉我。谢谢

视图模型

public class GenderDDUpdateOrderIndexViewModel
    
      public int Id  get; set; 
      public int OrderIndex  get; set; 
    

控制器

public async Task<ActionResult> UpdateRowIndex(GenderDDUpdateOrderIndexViewModel model, int? Id, int? fromPosition, int toPosition, string direction)
 
   using (var ctx = new ApplicationIdentityDbContext())
                               
        if (direction == "back")
          
            var GenderList = ctx.GenderDD
                       .Where(c => (toPosition <= c.OrderIndex && c.OrderIndex <= fromPosition))
                       .ToList();

              foreach (var gender in GenderList)
                  
                   gender.OrderIndex++;
                  
                
                else
                
            var GenderList = ctx.GenderDD
                       .Where(c => (fromPosition <= c.OrderIndex && c.OrderIndex <= toPosition))
                       .ToList();
               foreach (var gender in GenderList)
                  
                   gender.OrderIndex--;
                  
                
         ctx.GenderDD.First(c => c.Id == Id).OrderIndex = toPosition;
         await ctx.SaveChangesAsync();
     
         return View();
     

数据表初始化

 <script>
        $(document).ready(function() 

            var table = $('#GenderIndex').DataTable(
                "paging": true,
                "pagingType": "full_numbers",
                rowReorder: 
                 snapX: 10  
                

            );         

       );
</script>

【问题讨论】：

看起来您使用的是 v.1.10 - 您链接到的那篇文章适用于 v1.9，无法使用。有关此信息，请参阅 here。

@谢谢。是的，我正在使用最新版本。我收到以下错误：0x800a01b6 - javascript 运行时错误：对象不支持属性或方法“rowReordering”

【参考方案1】：

上面提到的插件因为太旧了所以不能用。您可以轻松使用DataTables RowReorder 扩展名。 您不需要编写这么长的操作方法，因为最新版本的 DataTables 不支持其中许多参数。

控制器

public void UpdateRow(GenderDDUpdateOrderIndexViewModel model, int Id, int fromPosition, int toPosition)
        
            using (var ctx = new ApplicationIdentityDbContext())
            
               var GenderList = ctx.GenderDD.ToList();
               ctx.GenderDD.First(c => c.OrderIndex == Id).OrderIndex = toPosition;
               ctx.SaveChanges();
            
        

jQuery

​​>

<script type="text/javascript">
        var table = $('#GenderIndex').DataTable(
            rowReorder: true,
              "paging": true,
              "pagingType": "full_numbers",
              fixedHeader: true,
              select: false,
              "order": [[0, "asc"]],
              "info": true,
              "processing": false,
              "responsive": true,
              "searching": true,
              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
              "language": 
                  "lengthMenu": "_MENU_",
                  "zeroRecords": "No records found",
                  "infoEmpty": "No records found",
                  "infoFiltered": "(filtered from _MAX_ total records)"
              ,
              "columnDefs": [
                   "orderable": false, "targets": 8 
              ]
        );

        $('#GenderIndex').on('row-reorder.dt', function (dragEvent, data, nodes) 
            for (var i = 0, ien = data.length ; i < ien ; i++) 
                var rowData = table.row(data[i].node).data();
                $.ajax(
                    type: "GET",
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    url: '/GenderDD/UpdateRow',
                    data:  Id: rowData[0], fromPosition: data[i].oldData, toPosition: data[i].newData ,
                    dataType: "json"
                );
                
        );
   </script>

【讨论】：

我最近实现了这个解决方案，但不得不改变一些事情：rowData[0] 变为 rowData.id，data[i].oldData 变为 data[i].oldPosition，data[i].newData 变为 data[i].newPosition