使用ajax调用的jQuery数据表之间行传输不起作用

Question

我正在使用 C# 开发 ASP.NET Core MVC 项目，并且我有 2 个水平对齐的 jQuery 数据表（排除表和包含表）。在这 2 个数据表之间，有 2 个按钮（右箭头按钮和左箭头按钮），如下所示：

我需要通过单击排除表中的行并单击右箭头按钮从排除表中选择 1 行或多行，所选行应从排除表移至包含表并通过单击执行相同的操作向左箭头按钮。即，将选定的一行或多行从“包含”表移动到“排除”表。我正在使用 AJAX 调用来加载这 2 个表中的数据。

两个数据表具有相同的数据模型。

在

Index.cshtml

：

@model RowTransfer.Models.DoorDetails
@using System.Data

@{
    ViewData["Title"] = "Index";
}
<script src="~/js/jquery-2.2.4.min.js"></script>
<script src="~/js/jquery.datatables.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    LoadGridExclude();
    LoadGridInclude();
});

function LoadGridExclude() {
         new $("#excludeTable").DataTable({
             stripeClasses: [],
             select: {
                 style: 'multi'
             },
        ordering: true,
        paging: false,
        searching: false,
        serverSide: true,
        filter: true,
        searchDelay: 1000,
        scrollCollapse: true,
        ajax: {
            url: '@Url.Action("LoadExclude", "Home")',
            type: 'GET',
            datatype: 'json',
            headers: { 'RequestVerificationToken': 'your json token' },
            data: (d) => {
                return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir }
            },
            dataSrc: (json) => {
                json = json.data;
                return json;
            }
        },
        columnDefs: [{ className: "dt-center", targets: [1, 2, 3], width: '2%' }],
        columns: [
            { data: 'SiteCode', title: 'SiteCode', autoWidth: true, searchable: true },
            { data: 'LegacyDoor', title: 'Legacy Door', autoWidth: true },
            { data: 'BuyingGroup', title: 'Buying Group', autoWidth: false, orderable: 
             false },
            { data: 'SettingName', title: 'Setting Name', autoWidth: true }
           ]
        });
      }

       function LoadGridInclude() {
                new $("#includeTable").DataTable({
                stripeClasses: [],
                 select: {
                         style: 'multi'
                         },
                 ordering: true,
                 paging: false,
                 searching: false,
                 serverSide: true,
                 filter: true,
                 searchDelay: 1000,
                scrollCollapse: true,
           ajax: {
            url: '@Url.Action("LoadInclude", "Home")',
            type: 'GET',
            datatype: 'json',
            headers: { 'RequestVerificationToken': 'your json token' },
            data: (d) => {
                return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir }
            },
            dataSrc: (json) => {
                json = json.data;
                return json;
            }
        },
        columnDefs: [{ className: "dt-center", targets: [1, 2, 3], width: '2%' }],
        columns: [
            { data: 'SiteCode', title: 'SiteCode', autoWidth: true, searchable: true },
            { data: 'LegacyDoor', title: 'Legacy Door', autoWidth: true },
            { data: 'BuyingGroup', title: 'Buying Group', autoWidth: false, orderable: 
              false },
            { data: 'SettingName', title: 'Setting Name', autoWidth: true }
           ]
         });
      }

    </script>

       <div style="vertical-align:top;">
           <table id="excludeInclude" width=100% style="vertical-align:top;">
             <tr style="vertical-align:top;">
              <td valign="top">
                <table id="excludeTable" style="width:100%; height:30%;float:left; 
                 clear:both; vertical-align:top; border:1px solid;"></table>
              </td>
        <td valign="top" style="width:5%;float:left; clear:both;margin-left:5px;margin- 
              right:5px; margin-top:95px; ">
            <div id="btnPanel">
                <button id="btnRight" class="btn-logic"><b> >> </b></button>
                <button id="btnLeft" class="btn-logic"><b> << </b></button>
            </div>
        </td>
        <td valign="top">
            <table id="includeTable" style="width:100%; height:30%;float:left; 
                   clear:both;vertical-align:top;border:1px solid;"></table>
         </td>
       </tr>
     </table>
    </div>

HomeController

中的方法如下所示：

public IActionResult LoadExclude(int draw = 1, int start = 0, int length = 10, string search = "", string FilterByColumn = "", string ASC_DSEC = "")
{
    List<DoorDetails> excludeDoorList = new List<DoorDetails>();

    DoorDetails eidm1 = new DoorDetails();
    eidm1.LegacyDoor = 43443;
    eidm1.BuyingGroup = "BuyingGroup1";
    eidm1.SiteCode = 11;
    eidm1.SettingName = "Setting1";

    excludeDoorList.Add(eidm1);

    DoorDetails eidm2 = new DoorDetails();
    eidm2.LegacyDoor = 23123;
    eidm2.BuyingGroup = "BuyingGroup2";
    eidm2.SiteCode = 22;
    eidm2.SettingName = "Setting2";

    excludeDoorList.Add(eidm2);

    int recordsTotal = excludeDoorList.Count();

    var jsonData = new { 
                           draw = draw, 
                           recordsFiltered = recordsTotal, 
                           recordsTotal = recordsTotal, 
                           data = excludeDoorList 
                       };

    return OK(jsonData);
}

public IActionResult LoadInclude(int draw = 1, int start = 0, int length = 10, string search = "", string FilterByColumn = "", string ASC_DSEC = "")
{
    List<DoorDetails> includeDoorList = new List<DoorDetails>();

    DoorDetails eidm3 = new DoorDetails();
    eidm3.LegacyDoor = 54483;
    eidm3.BuyingGroup = "BuyingGroup3";
    eidm3.SiteCode = 33;
    eidm3.SettingName = "Setting3";

    includeDoorList.Add(eidm3);

    DoorDetails eidm4 = new DoorDetails();
    eidm4.LegacyDoor = 66543;
    eidm4.BuyingGroup = "BuyingGroup4";
    eidm4.SiteCode = 44;
    eidm4.SettingName = "Setting4";

    includeDoorList.Add(eidm4);

    int recordsTotal = includeDoorList.Count();

    var jsonData = new 
                   { 
                       draw = draw, 
                       recordsFiltered = recordsTotal, 
                       recordsTotal = recordsTotal, 
                       data = includeDoorList 
                   };
    return OK(jsonData);
}

这是模型类：

public class DoorDetails
{       
    public int SiteCode { get; set; }
    public int LegacyDoor { get; set; }       
    public string BuyingGroup { get; set; }
    public string SettingName { get; set; }      
}

现在，我无法通过单击两个数据表的行以及在表之间传输行来进行行选择（单行和多行）。

这些事情要怎么做呢？请帮忙。

Answer 1

您还没有完整的数据发布路线，并且存在一些错误，这是您可以遵循的示例。

DoorService.cs发送数据

public interface IDoorService
{
    List<DoorDetails> ExcludeDoors { get; }
    List<DoorDetails> IncludeDoors { get; }
    void MoveToInclude(List<int> ids);
    void MoveToExclude(List<int> ids);
}

public class DoorService : IDoorService
{
    public List<DoorDetails> ExcludeDoors { get; private set; }
    public List<DoorDetails> IncludeDoors { get; private set; }

    public DoorService()
    {
        // Initialize data as you want
        ExcludeDoors = new List<DoorDetails>
        {
            new DoorDetails { SiteCode = 11, LegacyDoor = 43443, BuyingGroup = "BuyingGroup1", SettingName = "Setting1" },
            new DoorDetails { SiteCode = 22, LegacyDoor = 23123, BuyingGroup = "BuyingGroup2", SettingName = "Setting2" }
        };

        IncludeDoors = new List<DoorDetails>
        {
            new DoorDetails { SiteCode = 33, LegacyDoor = 54483, BuyingGroup = "BuyingGroup3", SettingName = "Setting3" },
            new DoorDetails { SiteCode = 44, LegacyDoor = 66543, BuyingGroup = "BuyingGroup4", SettingName = "Setting4" }
        };
    }

    public void MoveToInclude(List<int> ids)
    {
        var doorsToMove = ExcludeDoors.Where(d => ids.Contains(d.SiteCode)).ToList();
        foreach (var door in doorsToMove)
        {
            ExcludeDoors.Remove(door);
            IncludeDoors.Add(door);
        }
    }

    public void MoveToExclude(List<int> ids)
    {
        var doorsToMove = IncludeDoors.Where(d => ids.Contains(d.SiteCode)).ToList();
        foreach (var door in doorsToMove)
        {
            IncludeDoors.Remove(door);
            ExcludeDoors.Add(door);
        }
    }
}

注册服务

builder.Services.AddSingleton<IDoorService, DoorService>();

控制器.cs

public class HomeController : Controller
{
    
    private readonly IDoorService _doorService;

    public HomeController(IDoorService doorService)
    {
        _doorService = doorService;
    }

    public IActionResult LoadExclude(int draw = 1, int start = 0, int length = 10)
    {
        var data = _doorService.ExcludeDoors.Skip(start).Take(length).ToList(); // Pagination logic
        var recordsTotal = _doorService.ExcludeDoors.Count;

        var jsonData = new
        {
            draw = draw,
            recordsFiltered = recordsTotal,
            recordsTotal = recordsTotal,
            data = data
        };

        return Json(jsonData);
    }

    public IActionResult LoadInclude(int draw = 1, int start = 0, int length = 10)
    {
        var data = _doorService.IncludeDoors.Skip(start).Take(length).ToList(); // Pagination logic
        var recordsTotal = _doorService.IncludeDoors.Count;

        var jsonData = new
        {
            draw = draw,
            recordsFiltered = recordsTotal,
            recordsTotal = recordsTotal,
            data = data
        };

        return Json(jsonData);
    }

    [HttpPost]
    public IActionResult MoveToInclude([FromBody] List<int> ids)
    {
        _doorService.MoveToInclude(ids);
        return Ok();
    }

    [HttpPost]
    public IActionResult MoveToExclude([FromBody] List<int> ids)
    {
        _doorService.MoveToExclude(ids);
        return Ok();
    }

    public IActionResult Index()
    {
        return View();
    }

}

索引.cshtml

根据我的测试，列和行中的属性需要小写，否则会出现错误。

@section Scripts {
    <script>
            $(document).ready(function () {
                var excludeTable = LoadGridExclude();
                var includeTable = LoadGridInclude();

                $('#btnRight').click(function () {
                    var selectedRows = excludeTable.rows({ selected: true }).data().toArray();
                    var ids = selectedRows.map(row => row.siteCode);

                    if (ids.length === 0) {
                        alert("Please select rows to move.");
                        return;
                    }

                    $.ajax({
                        url: '/Home/MoveToInclude',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function () {
                            excludeTable.ajax.reload();
                            includeTable.ajax.reload();
                        }
                    });
                });

                $('#btnLeft').click(function () {
                    var selectedRows = includeTable.rows({ selected: true }).data().toArray();
                    var ids = selectedRows.map(row => row.siteCode);

                    if (ids.length === 0) {
                        alert("Please select rows to move.");
                        return;
                    }

                    $.ajax({
                        url: '/Home/MoveToExclude',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function () {
                            excludeTable.ajax.reload();
                            includeTable.ajax.reload();
                        }
                    });
                });
            });

            function LoadGridExclude() {
                return $('#excludeTable').DataTable({
                    ajax: {
                        url: '/Home/LoadExclude',
                        type: 'GET',
                        datatype: 'json'
                    },
                    columns: [
                        { data: 'siteCode', title: 'SiteCode', autoWidth: true },
                        { data: 'legacyDoor', title: 'Legacy Door', autoWidth: true },
                        { data: 'buyingGroup', title: 'Buying Group', autoWidth: true },
                        { data: 'settingName', title: 'Setting Name', autoWidth: true }
                    ],
                    select: {
                        style: 'multi'
                    },
                    paging: false
                });
            }

            function LoadGridInclude() {
                return $('#includeTable').DataTable({
                    ajax: {
                        url: '/Home/LoadInclude',
                        type: 'GET',
                        datatype: 'json'
                    },
                    columns: [
                        { data: 'siteCode', title: 'SiteCode', autoWidth: true },
                        { data: 'legacyDoor', title: 'Legacy Door', autoWidth: true },
                        { data: 'buyingGroup', title: 'Buying Group', autoWidth: true },
                        { data: 'settingName', title: 'Setting Name', autoWidth: true }
                    ],
                    select: {
                        style: 'multi'
                    },
                    paging: false
                });
            }
    </script>
}

<div style="vertical-align:top;">
    <table id="excludeInclude" width="100%" style="vertical-align:top;">
        <tr style="vertical-align:top;">
            <td valign="top">
                
                <table id="excludeTable" class="display" style="width:100%; height:30%; float:left; clear:both; vertical-align:top; border:1px solid;">
                    <thead>
                        <tr>
                            <th>SiteCode</th>
                            <th>Legacy Door</th>
                            <th>Buying Group</th>
                            <th>Setting Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </td>
            <td valign="top" style="width:5%; float:left; clear:both; margin-left:5px; margin-right:5px; margin-top:95px;">
                <div id="btnPanel">
                    <button id="btnRight" class="btn-logic"><b> >> </b></button>
                    <button id="btnLeft" class="btn-logic"><b> << </b></button>
                </div>
            </td>
            <td valign="top">
                
                <table id="includeTable" class="display" style="width:100%; height:30%; float:left; clear:both; vertical-align:top; border:1px solid;">
                    <thead>
                        <tr>
                            <th>SiteCode</th>
                            <th>Legacy Door</th>
                            <th>Buying Group</th>
                            <th>Setting Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</div>