如何使用父子行剃刀创建层次结构表

问题描述

这是我的表格快照enter image description here

I am creating this table from my model in razor view 

it shows the structure of task and sub-tasks and their subtask ... 
but the problem is it loads sub task and their subtask ... in the same level  when someone clicks on the first column it loads its child under the parent

加载它们并在对应行下添加一个表格行 这是我的jQuery代码，我想使其分层，就像父级和子级应该有所不同

 function showHierarchy(taskId) {

        if ($('.subtaskof_' + taskId).text() == '') {
                       
            $.ajax('/Tasks/sfsubtasks?taskId=' + taskId,// request url
                {
                    async: false,success: function (data,status,xhr) {// success callback function
                        
                        var subtasklist = JSON.parse(data)
                        console.log(subtasklist);


                        for (i = 0; i < subtasklist.length; i++) {
                          
                            subtask = subtasklist[i];
                            var therowis =  '<tr class=subtaskof_' + taskId + '>'
                                + '<td id="subtaskrow_' + subtask['InstanceId'] + '" align="right">_</td>'                            
                                + '<td>' + subtask['InstanceId'] + '</td>'
                                + '<td>' + subtask["Title"] + '</td>'
                                + '<td>' + subtask["Deliverables"] + '</td>'
                                + '<td>' + subtask["StartDate"] + '</td>'
                                + '<td>' + subtask["Priority"] + '</td>'
                                + '<td>' + subtask["State"] + '</td>'
                                + '<td><a href="/Tasks/Details?taskId=' + subtask['InstanceId'] + '">See Details_subt</a></td>'
                                + '<td><a href="/Tasks/New?projectId=' + subtask['ProjectId'] + '&amp;ParentTaskId=' + subtask['InstanceId'] + '">Add Sub Task_subt</a></td>'
                                + '</tr>'  

                            // Find position to add new subtask row in the Task table
                            $("#my-grid tr").filter(function () {
                                if ($(this).text().indexOf(taskId) >= 0) {
                                    $(this).after(therowis);
                                    issubsubtaskexists = false;
                                    console.log("chield checking for - " + subtask['InstanceId'])
                                    $.ajax('/Tasks/sfsubtasks?taskId=' + subtask['InstanceId'],// request url
                                    {
                                        async: false,success: function (data_,status_,xhr_) {
                                            if (data_.length > 0) {
                                                console.log("The data_ is - " + data_);
                                                var subsubtasklist = JSON.parse(data_);
                                                console.log("The subsubtasklist is - " + subsubtasklist)
                                                console.log("lenght for - " + subtask['InstanceId'] + ",is - " + subsubtasklist);

                                                if (subsubtasklist.length > 0) {
                                                    $('#subtaskrow_' + subtask['InstanceId']).html("<b><a style='font-size:25px; padding-left:17px;' id='lnk_" + subtask['InstanceId'] + "' href='#' onclick='showHierarchy(" + subtask['InstanceId'] + ")'> + </a></b>")
                                                    issubsubtaskexists = true;
                                                }

                                            }
                                        }
                                        });
                                    console.log("The taskId is - "+taskId)
                                    $('#lnk_' + taskId).html('<b>_</b>');
                                    
                                }
                            });
                        }

                    }
                });

        } else {
                // Toggle/removing subtasks
            $('.subtaskof_' + taskId).remove();
            $.ajax('/Tasks/sfsubtasks?taskId=' + taskId,{
                    success: function (data,xhr) {
                        console.log("Checking for child node of taskId - " + taskId);
                        var subsubtasklist = JSON.parse(data)
                        console.log(subsubtasklist);

                        for (i = 0; i < subsubtasklist.length; i++) {
                            $('.subtaskof_' + subsubtasklist[i]['InstanceId']).remove();
                            $.ajax('/Tasks/sfsubtasks?taskId=' + subsubtasklist[i],{
                                success: function (data,xhr) {
                                    console.log("Checking for child node of taskId - " + taskId);
                                    var subsubtasklist_ = JSON.parse(data)
                                    console.log(subsubtasklist_);
                                    for (j = 0; j < subsubtasklist_.length; j++) {
                                        $('.subtaskof_' + subsubtasklist_[j]['InstanceId']).remove();
                                    }                                    
                                }
                            });                            
                        }
                    }
                });
            
            $('#lnk_' + taskId).html('<b>+</b>');

        }
    }

plz让我知道可以使用此表来分层显示数据

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）