Question

我在我的项目中使用jQuery。我是jQuery的新手，现在开始学习。我的要求是在数据表中显示XML数据，并具有扩展和折叠功能。

我的XML将如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<root>
   <case>
      <case-column-one>case-one</case-column-one>
      <case-column-two>case-two</case-column-two>
      <issue>
         <issue-column-one>issue-one</issue-column-one>
         <issue-column-two>issue-two</issue-column-two>
      </issue>
   </case>
   <case>
      <case-column-three>case-three</case-column-three>
      <case-column-four>case-four</case-column-four>
      <issue>
         <issue-column-three>issue-three</issue-column-three>
         <issue-column-four>issue-four</issue-column-four>
      </issue>
   </case>
</root>

每个<case>（父级）包含几个<issue>标签（子级）。展开<case>后，应打开子<issue>。

我必须在jQuery数据表中呈现以上XML数据，并为其添加展开和折叠功能。我浏览了以下链接，并获得了一些有关处理JSON响应的信息。

jQuery datatable expand and collapse functionality

通过使用上面链接中给出的信息，我可以呈现父标记<case>，但是我不能在相应父标记（即{{1}）下呈现子标记<issue> }。

有人可以帮我吗？

我尝试过的代码如下：

<case>

我只是尝试在子项中渲染硬编码值$(".dataTables_scrollBody").find(".details-control").on("click", function() { var tr = $(this).closest('tr'); var row = table.row(tr); if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child('<h4>hello</h4>').show(); tr.addClass('shown'); } });。但实际上，在展开时，我在hello下渲染了<issue>。

有人可以帮我吗？

Answer 1

我可以给你个好机会。我已经获取了示例XML并在JSON Array中解析

HTML：

<div id="demo_jui">
    <table id="events" class="display">
            <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Issuer</th>

                    </tr>
            </thead>
            <tbody>
            </tbody>
    </table>
</div>

JS：

var thisTable = $("#events").dataTable();

//Simulated data response
var data = {
    xml: "<root><case><case-column-one>case-one</case-column-one><case-column-two>case-two</case-column-two><issue><issue-column-one>issue-one</issue-column-one><issue-column-two>issue-two</issue-column-two></issue></case><case><case-column-three>case-three</case-column-three><case-column-four>case-four</case-column-four><issue><issue-column-three>issue-three</issue-column-three><issue-column-four>issue-four</issue-column-four></issue></case></root>"
}

$.ajax({
    url:"/echo/xml/",
    data:data,
    type:"POST",
    success: function(response){
        var $events = $(response).find("case");

        $events.each(function(index, event){
            var $event = $(event),
                addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            thisTable.fnAddData(addData);
        });
    }
});

工作代码Here

使用扩展和折叠功能在jQuery数据表中显示XML数据

1 个答案: