首页 > 解决方案 > Asp.Net Mvc jQuery Datatable RowOrder Drag&Drop 和 Id 问题

问题描述

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

应该使用 rowReorder.dataSrc 属性,如本线程中所述。但是当datasrc属性被赋予自己数据的question 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ı. "
        }
    });

标签: jqueryasp.net-mvcasp.net-mvc-4datatablesjquery-plugins

解决方案


我希望这对你有用

Jquery 数据表有 rowReordering 和 createdRow 事件。只需使用它

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

推荐阅读