jQuery TreeTable使用事件
[英]jQuery treetable using events
问题描述
I need assistance figuring out how to use the events provided with the jQuery plugin treetable. 
我需要帮助找出如何使用jQuery插件treetable提供的事件。
jQuery treetable (PLUGIN): http://plugins.jquery.com/treetable/ jQuery treetable（PLUGIN）： http ：//plugins.jquery.com/treetable/
This is what I am trying to solve. 这就是我想要解决的问题。
When a branch collapses the plugin should trigger an event called "onNodeCollapse". 当分支折叠时，插件应触发一个名为“ onNodeCollapse”的事件。
When a branch collapses I just need to display a javascript popup that says "A branch has collapsed". 当分支崩溃时，我只需要显示一个javascript弹出窗口，上面写着“分支已经崩溃”。 From here I can tie it into our own functions. 从这里我可以把它绑在我们自己的功能上。
I have tried several different methods as well as searching on line for a solution. 我尝试了几种不同的方法以及在线搜索解决方案。
Example script: http://jsfiddle.net/djlerman/yLb25dy9/ 示例脚本： 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>
2 个解决方案
解决方案1
5 已采纳 2014-08-08 16:33:57
You need to set the onNodeCollapse function in the settings object when the treetable is first set up. 首次设置树表时，需要在设置对象中设置onNodeCollapse函数。
$("#example-basic").treetable({
expandable: true,
onNodeCollapse: function() {
alert( "A branch has collapsed" );
}
});
解决方案2
2 2017-06-08 15:56:33
Following code worked for me: 以下代码为我工作：
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");
}
The treeTable is like this 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>
Following is the image: 以下是图片：
After clicking one node you get following alert 单击一个节点后，您将收到以下警报
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.