2

我需要帮助弄清楚如何使用 jQuery 插件树表提供的事件。

jQuery 树表（插件）： http ://plugins.jquery.com/treetable/

这就是我要解决的问题。

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

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

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

示例脚本：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>
4

2 回答 2

6

jsFiddle Demo

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

$("#example-basic").treetable({ 
 expandable: true,
 onNodeCollapse: function() {
  alert( "A branch has collapsed" );
 }  
});
于 2014-08-08T16:33:57.403 回答
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");
}

树表是这样的

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

以下是图片：

在此处输入图像描述

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

在此处输入图像描述

于 2017-06-08T15:56:33.433 回答