Javascript 使用事件的jQuery树表

我需要帮助了解如何使用jQuery插件树表提供的事件

jQuery树表（插件）：

这就是我试图解决的问题

当分支崩溃时，插件应该触发一个名为“onNodeCollapse”的事件

当一个分支崩溃时，我只需要显示一个javascript弹出窗口，上面写着“一个分支已经崩溃”。从这里我可以把它与我们自己的功能联系起来

我尝试了几种不同的方法，并在网上搜索解决方案

示例脚本：

带有事件触发器的jQuery树表-djlerman的JSFIDLE演示
//  
基本jQuery树型示例
树柱
附加数据
节点1：单击我前面的图标以展开此分支。
我住在第二纵队。
节点1.1：看，我是一个表行，我是树的一部分！
有趣。
节点1.1.1：我也是树的一部分！
就这样！
节点2：我是另一个根节点，但没有子节点
万岁！

首次设置树表时，需要在设置对象中设置onNodeCollapse函数

$("#example-basic").treetable({ 
 expandable: true,
 onNodeCollapse: function() {
  alert( "A branch has collapsed" );
 }  
});

---

以下代码适用于我：

function displayNeighborhoodTableTreeDialog(treeHtml){
var nhTreeDlg;
nhTreeDlg = $("#Table_Tree").dialog({
    modal: true,
    title: "BCP Explorer",
    height: 693, width: 525, left:0, top:0,
    button: {
        Ok: function() {$(this).dialog("close")}
    },
    show:{effect:'scale', duration:'300'},
    hide:{effect:'explode', duration:'300'}
});''
nhTreeDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ;
$("div#Table_Tree").find("table#nh_table").find("tbody").html(treeHtml);    

    var treeRoot = $("div#Table_Tree").find("table#nh_table").find("tbody").html();
    $("div#Table_Tree").find("table#nh_table").find("tbody").html(treeRoot + treeHtml);
$("table#nh_table").find("tbody").html());

    $("#nh_table").treetable({
            expandable: true, clickableNodeNames: false, indent:30, 
            onInitialized: function(){
                alert("Tree table initialized");
            },
            onNodeCollapse: function() {
                alert("Tree table Collapse");
                alert($(this.row).data("tt-id") + " has collapsed");
            },
            onNodeExpand: function()  {
                alert("Tree table Expand");
                alert($(this.row).data("tt-id") + " has expanded");
            }});
    nhTreeDlg.dialog("open");
}

树桌是这样的

<div style='height:100%; max-height:520px;width:427px;border:1px #808080 solid;vertical-align:top;display:inline-block;overflow: hidden;'>
<div id="ttSize" style='max-height:520px;height:520px;overflow-y: scroll;'> 
            <table id=nh_table style='border:none;'>
        <tbody>
        <tr data-tt-branch='true' data-tt-id='bcp_farm'><td><span class=bcp_farm>Boardwalk Farm</span></td></tr>
  <tr data-tt-id=eportal-2 data-tt-parent-id='eportal' ><td><span class=nh_0>Root</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='collabs-eportal-2' data-tt-parent-id='eportal-2'><td><span class=collab2>Collabs</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='members-eportal-2' data-tt-parent-id='eportal-2'><td><span class=members>Members</span></td></tr>
  <tr data-tt-id=eportal-3 data-tt-parent-id=eportal-2><td><span class=nh_child>Buyer-XX</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='collabs-eportal-3' data-tt-parent-id='eportal-3'><td><span class=collab2>Collabs</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='members-eportal-3' data-tt-parent-id='eportal-3'><td><span class=members>Members</span></td></tr>
    </tbody>
    </table>
</div>

木板路农场
根
合作
成员
买方XX
合作
成员

下图：

单击一个节点后，您将收到以下警报

---

谢谢！！！我一直在想尽一切办法让它发挥作用。对不起，我有一个后续问题。我如何让它显示哪个分支已崩溃。类似于

警报（$（this）.data（“tt id”）+“已折叠”）

@DonavonLerman-

此

将包含一个树节点。因此，您需要访问该节点的row属性。您可以使用

$（this.row）.data（“tt id”）+“已折叠”

来执行此操作。非常感谢。我真希望stackoverflow有一个小费罐或捐款按钮，可以给这些有帮助的人和答案。

<div style='height:100%; max-height:520px;width:427px;border:1px #808080 solid;vertical-align:top;display:inline-block;overflow: hidden;'>
<div id="ttSize" style='max-height:520px;height:520px;overflow-y: scroll;'> 
            <table id=nh_table style='border:none;'>
        <tbody>
        <tr data-tt-branch='true' data-tt-id='bcp_farm'><td><span class=bcp_farm>Boardwalk Farm</span></td></tr>
  <tr data-tt-id=eportal-2 data-tt-parent-id='eportal' ><td><span class=nh_0>Root</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='collabs-eportal-2' data-tt-parent-id='eportal-2'><td><span class=collab2>Collabs</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='members-eportal-2' data-tt-parent-id='eportal-2'><td><span class=members>Members</span></td></tr>
  <tr data-tt-id=eportal-3 data-tt-parent-id=eportal-2><td><span class=nh_child>Buyer-XX</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='collabs-eportal-3' data-tt-parent-id='eportal-3'><td><span class=collab2>Collabs</span></td></tr>
  <tr data-tt-branch='true' data-tt-id='members-eportal-3' data-tt-parent-id='eportal-3'><td><span class=members>Members</span></td></tr>
    </tbody>
    </table>
</div>