Asp.Net Mvc jQuery数据表RowOrder拖放和ID问题

Question

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

rowReorder.dataSrc属性应使用，如this thread中所述。但是，当为datasrc属性赋予其自身数据的问题ID时，当您拖放时，行会发生变化，但id部分始终保持顺序。当然，当问题的行改变时，id行按升序排列是荒谬的。 “问题”对象和数据如下。

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ı. "
        }
    });

Answer 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();   
  });