Обновить данные с параметром для вызова ajax

Question

Добрый день всем, у меня есть проект, в котором перечислены строки определенного «узла».Каждый узел имеет возможность иметь родителя этого узла.Подумайте просто шаблон Иерархии.

Хорошо.Я хочу, чтобы при одном щелчке строки я хотел, чтобы он был выделен, но при двойном щелчке по строке я хочу, чтобы таблица обновлялась, но с новыми данными.Данные будут основаны на том, кто имеет родителя этого идентификатора.

<div class="table table-striped table-bordered">
    <a href="" id="parentIDLink">View Parent</a>
    <input id="parentID" name="ParentID" value="" type="hidden">
    <table id="myDatatable">
        <thead>
            <tr>
                <th>NodeID</th>
                <th>Name</th>
                <th>Desc</th>
                <th>Active</th>
            </tr>
        </thead>
    </table>
</div>

<script src="~/lib/DataTables-1.10.16/js/jquery.dataTables.js"></script>
<script src="~/lib/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>

<script>

    $(document).ready(function () {
        var oTable = $('#myDatatable').DataTable({
            "ajax": {
                "url": '/Node/GetNodes?pParentID=' + $('#parentID').val(),
                "type": "get",
                "datatype": "json"
            },
            "autoWidth": true,
            "columns": [
                {
                    "data": "NodeID",
                    "render": function (pID) {
                        return '<input id="NodeID" value="'+pID+'" disabled/>';
                    }
                },
                { "data": "Name", "width": "100%" },
                { "data": "Desc", "width": "100%" },
                {
                    "data": "IsActive", "width": "50px",
                    'searchable': false,
                    "render": function (pActive) {
                        var status = pActive ? 'checked="checked"' : "";
                        return '<input class="CheckBox" disabled type="checkbox" ' + status + '" />';
                    }
                }               
            ]
        });

        $('#myDatatable tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                oTable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');

                $('#parentID').val($('td #NodeID', this).val());
            }
        });

        $('#myDatatable tbody').on('dblclick', 'tr', function() {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                oTable.$('tr.selected').removeClass('selected');
                $('#parentID').val($('td #NodeID', this).val());

                oTable.ajax.reload(); // DOESN"T DO WHAT I EXPECT
            }
        });

        $("#parentIDLink").click(function () {
            oTable.ajax.reload();
        });
    });


</script>

Выше HTML для этой страницы.Ниже приведен код MVC, который вызывается для составления списка.По сути, захватить все узлы, если идентификатор равен нулю, но захватить узлы, у которых есть определенный родитель, если значение не равно нулю

public ActionResult GetNodes(string pParentID)
        {
            if (pParentID == null || pParentID == "null" || pParentID == string.Empty)
                return base.Json(new { data = m_Context.Nodes.ToList() }, 
                    new JsonSerializerSettings());
            else
                return base.Json(new { data = m_Context.Nodes.Where(m => m.NodeID == pParentID).ToList() }, 
                    new JsonSerializerSettings());;

        }

Неужели я иду по этому поводу неправильно?

Answer 1

Создайте функцию, которая перемещает ваши данные в соответствии с вашим выбором. Внутри обработчика событий двойного щелчка, вызовите эту функцию

function LoadDataTable() {
    $.ajax({
        type: "POST",
        url: "/Node/GetNodes",
        data: { pParentID: $('#parentID').val() },
        success: function(result){
            oTable.clear().draw();
            oTable.rows.add(result).draw();
        }
    });
}

$('#myDatatable tbody').on('dblclick', 'tr', function() {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        oTable.$('tr.selected').removeClass('selected');
        $('#parentID').val($('td #NodeID', this).val());
        LoadDataTable();
    }
});