如何在 jQuery 中创建包含标题行和可折叠详细信息行的表

Question

我正在从jQuery Ajax调用中的Web服务接收数据，如下所示：

[
    {
        "grpRecord":{
            "Group1":"17658",
            "Group2":"0"
        }, 
        "lstRecords":[
            {
                "NA":"0",
                "GROUP1":"17658",
                "GROUP2":"0",
                "Task_Name":"01 Internal Plaster ",
                "material_name":"CEMENT 43 GRADE",
                "Est_Qty":"100.0000",
                "Rate":"300.0000",
                "EST_Mat_Amt":"30000.00000000"
            },{
                "NA":"0",
                "GROUP1":"17658",
                "GROUP2":"0",
                "Task_Name":"01 Internal Plaster ",
                "material_name":"CEMENT 43 GRADE ",
                "Est_Qty":"220000.0000",
                "Rate":"300.0000",
                "EST_Mat_Amt":"66000000.00000000"
            },{
                "NA":"0",
                "GROUP1":"17658",
                "GROUP2":"0",
                "Task_Name":"01 Internal Plaster ",
                "material_name":"NATURAL SAND ",
                "Est_Qty":"60000.0000",
                "Rate":"700.0000",
                "EST_Mat_Amt":"42000000.00000000"
            }
        ]
    }
]

这只是我收到的多条这样的记录。这里的"grpRecord"应该是表头，"lstRecords"包含行详细信息。现在我的问题是我想将"grpRecord"显示为表行，将"lstrRecords"显示为行详细信息作为可折叠的行详细信息。

到目前为止，我的代码是这样的：

  <script type="text/javascript">
        function callAjax() {
            //Ajax call for drill down data START
            $.ajax({
                type: 'POST',
                dataType: 'json',
                cache: false,
                url: '@Url.Action("index", "test")',
                data: {},
                success: function (response, textStatus, jqXHR) {

                    alert(response);
                    // document.write(JSON.stringify(response));
                    bindTable(response);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error - ' + errorThrown);
                }
            });

            //Ajax call for drill down data END

            //function to bind json to table STart
            function bindTable(response) {
                var data = response;
                alert("Response recieved");
                alert(data);
                for (var i = 0; i < data.length; i++) {
                    bindHeader(data[i]);

                        drawHeader(data[i], ParentID);
                }
                $('.DynamicTable').html('<tbody>' + createTable("0").join('') + '</tbody>');


            }
            //function to bind json to table  End
            //$("#tabHead").append('<li ><a data-toggle="tab" href="#drillData">Drill Down</a></li>'); //creating tab head
        }
        function bindHeader()
        {
//code to bind header
        }
        function bindDetail()
        {
//code to bind details
}
    </script>

Answer 1

得到了解决方案。这是完整的 ajax 代码

 //Ajax call for drill down data START
            $.ajax({
                type: 'POST',
                dataType: 'json',
                cache: false,
                url: '@Url.Action("GetWBSReportDrillDown", "WBSBudget")',
                data: { FieldId: feildId, ProjNo: ProID, TaskNo: taskNo, TreeId: treeId, FromDate: FrmDate, ToDate: TDate, UserName: "aa", CompName: "aa" },
                success: function (response, textStatus, jqXHR) {

                    //alert(response);
                    // document.write(JSON.stringify(response));
                    bindTable(response);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Error - ' + errorThrown);
                }
            });

            //Ajax call for drill down data END

            //function to bind json to table STart
            function bindTable(response) {
                var data = response; 
                 alert(data);
                function createTable(parentID) {
                    return data.filter(function (node) { return (node.parent_id === parentID); }).sort(function (a, b) { return a.name > b.name }).map(function (node) {
                        return '<tr id="' + node.id + '" level="' + node.depth + '" class="' + node.depth + '"><td type="' + node.type + '"  id="' + node.id + '" level="' + node.depth + '" pid="' + node.parent_id + '" level="' + node.depth + '" ><span class="level' + node.depth + ' spn" ><img src="Design/images/plus.gif" class="testnode" ></img></span><span class="nodename" id="' + node.id + '" nodetype="' + node.type + '"  title="' + node.name + '">' + node.name + '</span></td><td>' + node.id + '</td><td>' + node.type + '</td></tr>';
                    });
                }
                $('.DynamicTable').html('<tbody>' + createTable("0").join('') + '</tbody>');
                $(document).on("click", ".testnode", function (e) {
                    if (($(this).attr('src')) == 'Design/images/plus.gif') {
                        $(this).attr('src', 'Design/images/minus.gif');
                        var val = $(this).parent().parent().parent();
                        var parentID = $(this).parent().parent().parent().attr('id');
                        $(val).after(createTable(parentID).join(''));
                    }
                    else {
                        $(this).attr('src', 'Design/images/plus.gif');
                        var level = $(this).parent().parent('td').attr('level');
                        var tr = $(this).parent().parent().parent('tr');
                        while (tr.next().prop("tagName") == "TR") {
                            // var level = tr.next().children().attr("level");
                            if (tr.next().children().attr("level") != level) {
                                //   alert(tr.next().children().attr("level") + " != " + level);
                                if (tr.next().children().attr("level") >= level) {
                                    tr.next().hide();
                                    //  alert(tr.next().children().attr("level") + " > " + level);
                                }
                            }
                            else {
                                break;
                            }
                            tr = tr.next();
                            e.stopPropagation();
                        }
                        e.stopPropagation();
                    }
                });

            }
            //function to bind json to table  End
            $("#tabHead").append('<li ><a data-toggle="tab" href="#drillData">Drill Down</a></li>'); //creating tab head
        });

    });
    <div id="drillData" class="tab-pane fade">     
<div class="table-responsive">
  <table class="table table-hover DynamicTable" ></table>
</div>  
  </div>