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

Question

我一直在使用 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ı. "
        }
    });

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