jquery.fancytree
Version:
Fancytree is a JavaScript tree view plugin for jQuery with support for persistence, keyboard, checkboxes, drag'n'drop, and lazy loading.
235 lines (222 loc) • 7.15 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test Table - Fancytree</title>
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<style type="text/css">
/* Set alternating row colors (define BEFORE standard css). */
/*
table.fancytree-ext-table tbody tr:nth-child(even){
background-color: #f4f4f8;
}
*/
/* custom alignment (set by 'renderColumns'' event) */
td.alignRight {
text-align: right;
}
td input[type=input] {
width: 40px;
}
</style>
<link href="../src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="../src/jquery.fancytree.js"></script>
<script src="../src/jquery.fancytree.filter.js"></script>
<script src="../src/jquery.fancytree.table.js"></script>
<script src="../src/jquery.fancytree.gridnav.js"></script>
<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js"></script>
<link href="../demo/sample.css" rel="stylesheet">
<script src="../demo/sample.js"></script>
<!-- End_Exclude -->
<script type="text/javascript">
SOURCE = [
{title: "node 1", folder: true, expanded: true, children: [
{title: "node 1.1"},
{title: "node 1.2"},
{title: "node 1.3"}
]},
{title: "node 2", folder: true, expanded: true, children: [
{title: "node 2.1"},
{title: "node 2.2"},
{title: "node 2.3"}
]},
{title: "node 3", folder: true, children: [
{title: "node 3.1 <input type='input' value=''>"},
{title: "node 3.2"},
{title: "node 3.3"}
]}
];
$(function(){
// Attach the fancytree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the fancytree() function:
$("#tree").fancytree({
extensions: ["table", "filter", "gridnav"],
checkbox: true,
filter: {
// mode: "hide"
},
gridnav: {
// autofocusInput: true, // focus first embedded input if node gets activated
// handleCursorKeys: true, // Allow UP/DOWN in inputs to move to prev/next node
},
table: {
indentation: 20, // indent 20px per node level
nodeColumnIdx: 2, // render the node title into the 3rd column
checkboxColumnIdx: 1 // render the checkboxes into the 2nd column
},
// source: {
// url: "../demo/ajax-tree-plain.json"
// },
// source: [{title: "1", folder: true}],
source: {foo: "bar", children: SOURCE},
titlesTabbable: true, // Add all node titles to TAB chain
init: function(event, data) {
// alert("init: " + data.tree.data.foo);
},
lazyLoad: function(event, data) {
data.result = {url: "../demo/ajax-sub2.json"};
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(0).text(node.getIndexHier()).addClass("alignRight");
// (index #1 is rendered by fancytree by adding the checkbox)
// (index #2 is rendered by fancytree)
if( node.isFolder() ) {
$tdList.eq(2)
.prop("colspan", 5)
.nextAll().remove();
}
// $tdList.eq(3).text(node.key);
$tdList.eq(3).html("<input type='input' name='col1' value='" + node.key + "'>");
$tdList.eq(4).html("<input type='input' name='col2' value='" + node.key + "'>");
$tdList.eq(5).html("<input type='checkbox' name='rb1' value='" + node.key + "'>");
$tdList.eq(6).html("<input type='checkbox' name='rb2' value='" + node.key + "'>");
}
});
/* Handle custom checkbox clicks */
$("#tree").delegate("input[name=like]", "click", function(e){
var node = $.ui.fancytree.getNode(e),
$input = $(e.target);
e.stopPropagation(); // prevent fancytree activate for this row
// if($input.is(":checked")){
// alert("like " + $input.val());
// }else{
// alert("dislike " + $input.val());
// }
});
var tree = $("#tree").fancytree("getTree");
/*
* Event handlers for our little demo interface
*/
$("input[name=search]").keyup(function(e){
var match = $(this).val();
if(e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === ""){
$("#btnResetSearch").click();
return;
}
// Pass text as filter string (will be matched as substring in the node title)
var n = tree.filterNodes(match);
$("#btnResetSearch").attr("disabled", false);
$("span#matches").text("(" + n + " matches)");
}).focus();
$("#btnResetSearch").click(function(e){
$("input[name=search]").val("");
$("span#matches").text("");
tree.clearFilter();
}).attr("disabled", true);
$("input#hideMode").change(function(e){
tree.options.filter.mode = $(this).is(":checked") ? "hide" : "dimm";
tree.clearFilter();
$("input[name=search]").keyup();
// tree.render();
});
$("#btnRename").click(function(e){
var node = tree.getActiveNode();
node.setTitle(node.title + "-renamed");
});
$("#btnAddChild").click(function(e){
var node = tree.getActiveNode();
node.addChildren([{title: "sub 1"}]);
});
$("#btnRemoveIcon").click(function(e){
var node = tree.getActiveNode();
node.icon = false;
// node.render();
node.renderTitle();
});
$("#btnToggleSelect").click(function(e){
var node = tree.getActiveNode();
node.toggleSelected();
});
$("#btnRemove").click(function(e){
var node = tree.getActiveNode();
node.remove();
// node.render();
//node.renderTitle();
});
});
</script>
</head>
<body class="example">
<h1>Example: 'table' extension</h1>
<div class="description">
<p>
Render a tree as a table (aka 'treegrid').
</p>
<p>
<b>Status</b>: beta
</p>
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<p>
<label>Filter:</label>
<input name="search" placeholder="Filter...">
<button id="btnResetSearch">×</button>
<span id="matches"></span>
</p>
<p>
<label for="hideMode">
<input type="checkbox" id="hideMode">
Hide unmatched nodes
</label>
</p>
<p>
<button id="btnRename">Rename</button>
<button id="btnAddChild">Add Child</button>
<button id="btnRemoveIcon">Remove icon</button>
<button id="btnToggleSelect">Select</button>
<button id="btnRemove">Remove</button>
</p>
<!-- Add a <table> element where the tree should appear: -->
<table id="tree">
<colgroup>
<col width="30px"></col>
<col width="30px"></col>
<col width="*"></col>
<col width="50px"></col>
<col width="30px"></col>
</colgroup>
<thead>
<tr> <th>#</th> <th></th> <th></th> <th>Ed1</th> <th>Ed2</th> <th>Rb1</th> <th>Rb2</th> </tr>
</thead>
<tbody>
</tbody>
</table>
<!-- Start_Exclude: This block is not part of the sample code -->
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree">jquery.fancytree.js project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>