Question

我有这样的要求Use of rowspan to group hierarchical data但是使用任何带有ajax的javascript框架逐步扩展onclick事件。到目前为止，谷歌搜索了这个 http://www.igniteui.com/tree-grid/angular 任何有关示例或任何方法的帮助。

Answer 1

希望它能帮到某人，这里是jsfiddle [http://jsfiddle.net/djlerman/bbj8k9pe/][1]

添加代码 - 如果jsfiddle死了。另请注意，echo ajax在stackoverflow运行代码段中不起作用。将此代码粘贴到jsfiddle中。

/* This is an echo of some data sent back via ajax                       */
/* This data should be filtered by nodeID and return only childNodeID's. */
/* vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv. */
var jsonData = {
  "nodeID": {
    "1": [
      
       {"ID": "1.1",
        "childNodeType": "branch",
        "childData": [
          "1.1: column 1",
          "1.1: column 2"
          ]
      },
      {"ID": "1.2",
        "childNodeType": "leaf",
        "childData": [
          "1.2: column 1",
          "1.2: column 2"
          ]
      },
      {"ID":"1.3",
        "childNodeType": "leaf",
        "childData": [
          "1.3: column 1",
          "1.3: column 2"
          ]
      }
      
    ],
    "1.1": [

        {"ID":"1.1.1",
          "childNodeType": "leaf",
          "childData": [
            "1.1.1: column 1",
            "1.1.1: column 2"
            ]
        },
        {"ID":"1.1.2",
          "childNodeType": "leaf",
          "childData": [
            "1.1.2: column 1",
            "1.1.2: column 2"
            ]
        }
 
    ],
    "2": [

        {"ID":"2.1",
          "childNodeType": "leaf",
          "childData": [
            "2.1: column 1",
            "2.1: column 2"
            ]
        },
        {"ID":"2.2",
          "childNodeType": "leaf",
          "childData": [
            "2.2: column 1",
            "2.2: column 2"
            ]
        },
        {"ID":"2.3",
          "childNodeType": "leaf",
          "childData": [
            "2.3: column 1",
            "2.3: column 2"
            ]
        }

    ],
    "3": [

        {"ID":"3.1",
          "childNodeType": "leaf",
          "childData": [
            "3.1: column 1",
            "3.1: column 2"
            ]
        },
        {"ID":"3.2",
          "childNodeType": "leaf",
          "childData": [
            "3.2: column 1",
            "3.2: column 2"
            ]
        },
        {"ID":"3.3",
          "childNodeType": "leaf",
          "childData": [
            "3.3: column 1",
            "3.3: column 2"
            ]
        }
        
    ]
  }
};
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* This is an echo of some data sent back via ajax                       */
/* This data should be filtered by nodeID and return only childNodeID's. */



// initialize treeTable
$("#example-basic").treetable({
    expandable:     true,
    onNodeExpand:   nodeExpand,
    onNodeCollapse: nodeCollapse
});


// expand node with ID "1" by default
$("#example-basic").treetable("reveal", '1');


// Highlight a row when selected
$("#example-basic tbody").on("mousedown", "tr", function() {
    $(".selected").not(this).removeClass("selected");
    $(this).toggleClass("selected");
});

function nodeExpand () {
    // alert("Expanded: " + this.id);
  	getNodeViaAjax(this.id);  
}


function nodeCollapse () {
    // alert("Collapsed: " + this.id);
}







function getNodeViaAjax(parentNodeID) {
    $("#loadingImage").show();
    
    // ajax should be modified to only get childNode data from selected nodeID
    // was created this way to work in jsFiddle
    $.ajax({
		type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify( jsonData )
        },
        success: function(data) {
            $("#loadingImage").hide();
    
            var childNodes = data.nodeID[parentNodeID];
            
            if(childNodes) {
                var parentNode = $("#example-basic").treetable("node", parentNodeID);

                for (var i = 0; i < childNodes.length; i++) {
                    var node = childNodes[i];

                    var nodeToAdd = $("#example-basic").treetable("node",node['ID']);

                    // check if node already exists. If not add row to parent node
                    if(!nodeToAdd) {
                        // create row to add
                        var row ='<tr data-tt-id="' + 
                            node['ID'] + 
                            '" data-tt-parent-id="' +
                            parentNodeID + '" ';
                        if(node['childNodeType'] == 'branch') {
                            row += ' data-tt-branch="true" ';
                        }

                        row += ' >';

                        // Add columns to row
                        for (var index in node['childData']) {
                            var data = node['childData'][index];
                            row += "<td>" + data + "</td>";
                        }

                        // End row
                        row +="</tr>";
                        
                        $("#example-basic").treetable("loadBranch", parentNode, row);
                    }



                }
            
            }

        },
        error:function(error){
            $("#loadingImage").hide();
            alert('there was an error');  
        },
        dataType: 'json'
    });
}

#loadingImage {
    position:absolute;
    width:48px; /*image width */
    height:48px; /*image height */
    left:50%; 
    top:75px;
    margin-left:-24px; /*image width/2 */
    margin-top:-24px; /*image height/2 */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet"/>
<link href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css" rel="stylesheet"/>
<script src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>
<div id="loadingImage" style="display: none">
    <img src="//i.stack.imgur.com/FhHRx.gif" />
</div>

<table id="example-basic" >
    <caption>
      <a href="#" onclick="jQuery('#example-basic').treetable('expandAll');  return false;">Expand all</a>
      <a href="#" onclick="jQuery('#example-basic').treetable('collapseAll'); return false;">Collapse all</a>
    </caption>
    <thead>
      <tr>
        <th>Tree column</th>
        <th>Additional data</th>
      </tr>
    </thead>
    <tbody>
      <tr data-tt-id="1" data-tt-branch='true'>
        <td>1: column 1</td>
        <td>1: column 2</td>
      </tr>

      <tr data-tt-id="2" data-tt-branch='true'>
        <td>2: column 1</td>
        <td>2: column 2</td>
      </tr>
        
      <tr data-tt-id="3" data-tt-branch='true'>
        <td>3: column 1</td>
        <td>3: column 2</td>
      </tr>
    </tbody>
  </table>

angularjs datagrid或tree grid展开rowspan以显示分层数据

1 个答案: