我正在通过jQuery Ajax调用中的webservice接收数据：
[
{
"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"
}
]
}
]
这只是我收到多条记录的一条记录。这里＆＃39; grpRecord＆＃39;这应该是表格标题和＆＃39; lstRecords＆＃39;其中包含行详细信息。现在我的问题是我想要显示＆＃39; grpRecord＆＃39;作为表行和＆＃39; lstrRecords＆＃39;作为可折叠行详细信息的行详细信息。
我的代码是这样的：
<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>
答案 0 :(得分：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>