Asp.Net Mvc jQuery Datatable Row reOrder Drag Drop和Id问题

Posted 2023-05-07

【中文标题】Asp.Net Mvc jQuery Datatable Row reOrder Drag Drop和Id问题

【英文标题】：Asp.Net Mvc jQuery Datatable RowOrder Drag&Drop and Id problem

【发布时间】：2020-04-20 16:52:03

【问题描述】：

我一直在使用 Asp.Net MVC 开发一个调查应用程序。我在向调查分配问题的页面上有 2 个附属表。对我来说重要的是右边的桌子。可以从左侧的问题池中添加此表。还应该可以更改右侧表格中的行顺序。但是在这个表中，我在拖放一行时遇到了问题。我正在拖动线，但它并没有停止我将它放回原来的位置。

应该使用 rowReorder.dataSrc 属性，如this thread 中所述。但是当datasrc属性被赋予自己数据的question id时，拖拽时行会发生变化，但id部分始终保持有序。当然，当问题的行发生变化时，id 行按升序排列是很荒谬的。 'Question' 对象和数据如下。

Question.cs 对象

//------------------------------------------------------------------------------
// <auto-generated>


namespace MerinosSurvey.Models

using System;
using System.Collections.Generic;

public partial class Questions

    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Questions()
    
        this.Responses = new HashSet<Responses>();
        this.Options = new HashSet<Options>();
        this.SurveyQuestions = new HashSet<SurveyQuestions>();
    

    public int QuestionId  get; set; 
    public string QuestionName  get; set;      
    public System.DateTime CreatedDate  get; set; 
    public int CreatedUserId  get; set; 
    public bool IsActive  get; set; 
    public bool Status  get; set; 
    public System.DateTime UpdatedDate  get; set; 


    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<Options> Options  get; set; 
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<SurveyQuestions> SurveyQuestions  get; set; 

Json 数据

"data": [

  "Responses": [

  ],
  "Options": [

  ],
  "SurveyQuestions": [

  ],
  "QuestionId": 1,
  "QuestionName": "Merinos ürünlerinden ne kadar memnunsunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "\/Date(1577048400000)\/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "\/Date(1577663808297)\/"
,

  "Responses": [

  ],
  "Options": [

  ],
  "SurveyQuestions": [

  ],
  "QuestionId": 2,
  "QuestionName": "Merinosun satis magazalarindan memnun musunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "\/Date(1577048400000)\/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "\/Date(1577048400000)\/"
,

  "Responses": [

  ],
  "Options": [

  ],
  "SurveyQuestions": [

  ],
  "QuestionId": 3,
  "QuestionName": "Merinosun müsteri temsilcilerinden memnun musunuz?",
  "QuestionTypeId": 1,
  "CreatedDate": "\/Date(1577048400000)\/",
  "CreatedUserId": 1,
  "IsActive": true,
  "Status": true,
  "UpdatedDate": "\/Date(1577048400000)\/"

]

Jquery Datatable ajax 调用

$("#rightTable").DataTable(
        "ajax": 
            "url": "/Survey/GetRelatedQuestions",
            "type": "POST",
            "data":  "surveyId": surveyId ,
            "datatype": "int"
        ,
        "columnDefs": [
             width: '10%', targets: 0 
        ],
        //"scrollX": true,
        //"scrollY": "auto",
        "columns": [
            "data": "QuestionId",
            "data": "QuestionName"
        ],
        //responsive: true,
        ordering: false,
        info:true,
        rowReorder: 
            dataSrc: 'QuestionId',
            selector: 'tr'
        ,
        "language": 
            "emptyTable":
                "Ankete ilişkilenmiş soru bulunamadı. "
        
    );

【参考方案1】：

我希望这对你有用

Jquery 数据表有 rowReordering 和 createdRow 事件。就用那个

$(document).ready(function()
 var table = $('#example').DataTable(
  'ajax': 
     'url': '' 
     ,
  'createdRow': function(row, data, dataIndex)
     $(row).attr('id', 'row-' + dataIndex);
      
 );
    table.rowReordering();   
  );

【讨论】：

感谢您的回复。但我收到类似 Uncaught TypeError: rightTable.rowReordering is not a function 的错误

要使用 rowReordering()，您需要将表初始化为 $('#rightTable').dataTable()，而不是 $('#rightTable').DataTable()。

详细信息参考这个网址gyrocode.com/articles/jquery-datatables-row-reordering

我知道我已经将我的数据表初始化为； var rightTable = $("#rightTable").DataTable(. 'creatdRow':.......) 然后我添加了 rightTable.rowreordering();

您发送的页面中有注释； '有一个用于 jQuery DataTables 的行重新排序插件，允许在表格中拖放行重新排序。遗憾的是，此插件不再适用于 DataTables 1.10 及更高版本。我的数据表版本是 1.10.20