jquery - 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ı. "
}
});
解决方案
我希望这对你有用
Jquery 数据表有 rowReordering 和 createdRow 事件。只需使用它
$(document).ready(function(){
var table = $('#example').DataTable({
'ajax': {
'url': ''
},
'createdRow': function(row, data, dataIndex){
$(row).attr('id', 'row-' + dataIndex);
}
});
table.rowReordering();
});
推荐阅读
- java - 如何从命令行启动 JavaFX 源代码文件?
- c# - C# 它在控制台中为其他条件显示 null,而不是我希望它显示的内容
- libgdx - libgdx:如何通过另一个正交相机获得正交相机的结果?
- forms - 显示相关结果的 Libre Base 表单列表框
- python - 在比较之前检查值是否不是无
- mysql - 为什么会出现这个错误:ERROR 1022 (23000): Can't write; 表 'C:\WINDOWS\SERVIC~1\NETWOR~1\AppData\Local\Temp\#sql484c_181_2a' 中的重复键
- spring-boot - Eureka服务器调用API时出现异常
- java - 在android studio java中动态添加行
- java - 如何暴露依赖服务的执行器健康状态?
- mysql - 如何计算和选择计数mysql的最大值