Question

我需要帮助找出如何使用jQuery插件提供的事件来处理treetable。

jQuery treetable（PLUGIN）：http://plugins.jquery.com/treetable/

这就是我想要解决的问题。

当分支崩溃时，插件应触发名为＆＃34; onNodeCollapse＆＃34;的事件。

当分支崩溃时，我只需要显示一个javascript弹出窗口，其中显示＆＃34;分支已折叠＆＃34;。从这里我可以将它绑定到我们自己的功能中。

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

示例脚本：http://jsfiddle.net/djlerman/yLb25dy9/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery treetable with event trigger - jsFiddle demo by djlerman</title>

  <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/screen.css">
  <link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.css">
  <link rel="stylesheet" type="text/css" href="http://ludo.cubicphuse.nl/jquery-treetable/css/jquery.treetable.theme.default.css">

  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
  <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
  <script type='text/javascript' src="http://ludo.cubicphuse.nl/jquery-treetable/jquery.treetable.js"></script>

  <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $("#example-basic").treetable({ expandable: true });

    /* 
        Trying to get this function to happen when 
        "onNodeCollapse" event happens
    */
    $("#example-basic").on("onNodeCollapse", function() {
        alert( "A branch has collapsed" );
    });
    });//]]>  
  </script>
</head>
<body>
  <table id="example-basic">
    <caption>Basic jQuery treetable Example</caption>
    <thead>
      <tr>
        <th>Tree column</th>
        <th>Additional data</th>
      </tr>
    </thead>
    <tbody>
      <tr data-tt-id="1">
        <td>Node 1: Click on the icon in front of me to expand this branch.</td>
        <td>I live in the second column.</td>
      </tr>
      <tr data-tt-id="1.1" data-tt-parent-id="1">
        <td>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
        <td>Interesting.</td>
      </tr>
      <tr data-tt-id="1.1.1" data-tt-parent-id="1.1">
        <td>Node 1.1.1: I am part of the tree too!</td>
        <td>That's it!</td>
      </tr>
      <tr data-tt-id="2">
        <td>Node 2: I am another root node, but without children</td>
        <td>Hurray!</td>
      </tr>
    </tbody>
  </table>

</body>

</html>

Answer 1

<强> jsFiddle Demo

首次设置treetable时，需要在设置对象中设置onNodeCollapse功能。

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

Answer 2

以下代码为我工作：

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");
}

treeTable就像这样

<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>

以下是图片：

点击一个节点后，您会收到以下警告

jQuery使用事件treetable

2 个答案: