我已从此链接复制了fancytree过滤器功能的一些代码:http://wwwendt.de/tech/fancytree/demo/sample-ext-filter.html#
我将过滤器功能注入到我构建的树中,但是当我过滤树的项目时,文件夹不会自动展开,并且子计数器不会出现。
我安装的内容:
jquery.fancytree-全DEPS
jquery.fanctree.filter
的jquery-2.2.0
的jquery-UI-1.11.1
我尝试安装我在上面指定的链接的源代码中指定的版本,但这没有帮助。有什么东西看起来不合适吗?我将过滤器属性放在正确的位置,包括过滤器扩展,并包括用于从用户收集数据的加密方法。
我曾试图用这棵树做过的其他事情,但这似乎让我感到沮丧。任何帮助都会很棒!
$(function () {
$("#tree").fancytree({
extensions: ["filter"],
quicksearch: true,
filter: {
autoApply: true, // Re-apply last filter if lazy data is loaded
autoExpand: true, // Expand all branches that contain matches while filtered
counter: true, // Show a badge with number of matching child nodes near parent icons
fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar'
hideExpandedCounter: true, // Hide counter badge if parent is expanded
hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
highlight: true, // Highlight matches by wrapping inside <mark> tags
leavesOnly: false, // Match end nodes only
nodata: true, // Display a 'no data' status node if result is empty
mode: "dimm" // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
},
icon: false,
checkbox: true,
selectMode: 3,
source: treeStruc,
lazyLoad: function (event, data) {
var dfd = new $.Deferred();
data.result = dfd.promise();
scope.tree.parentSelectionState = data.node.data.preselected;
GetElementsForTree(data.node.key).done(function (value, dataReturned) {
var lazyNodeValues = [];
for (var l = 0; l < value.length; l++) {
var element = value[l].Path.split('\\');
element = element[element.length - 1];
var obj = { title: element, key: value[l].Path, webId: value[l].WebId, preselected: scope.tree.parentSelectionState, lazy: true };
lazyNodeValues.push(obj);
}
dfd.resolve(lazyNodeValues);
});
},
loadChildren: function (event, data) {
// Apply parent's state to new child nodes:
data.node.fixSelection3AfterClick();$("#tree").fancytree("getTree").getNodeByKey(data.node.children[i].key).setExpanded(true);
}
}); //End of $#tree
$('#tree').removeClass('r-hidden');
var tree = $("#tree").fancytree("getTree");
/*
* Event handlers for our little demo interface
*/
$("input[name=search]").keyup(function (e) {
var n,
tree = $.ui.fancytree.getTree(),
args = "autoApply autoExpand fuzzy hideExpanders highlight leavesOnly nodata".split(" "),
opts = {},
filterFunc = $("#branchMode").is(":checked") ? tree.filterBranches : tree.filterNodes,
match = $(this).val();
$.each(args, function (i, o) {
opts[o] = $("#" + o).is(":checked");
});
opts.mode = $("#hideMode").is(":checked") ? "hide" : "dimm";
if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
$("button#btnResetSearch").click();
return;
}
if ($("#regex").is(":checked")) {
// Pass function to perform match
n = filterFunc.call(tree, function (node) {
return new RegExp(match, "i").test(node.title);
}, opts);
} else {
// Pass a string to perform case insensitive matching
n = filterFunc.call(tree, match, opts);
}
$("button#btnResetSearch").attr("disabled", false);
$("span#matches").text("(" + n + " matches)");
}).focus();
$("fieldset input:checkbox").change(function (e) {
var id = $(this).attr("id"),
flag = $(this).is(":checked");
// Some options can only be set with general filter options (not method args):
switch (id) {
case "counter":
case "hideExpandedCounter":
tree.options.filter[id] = flag;
break;
}
tree.clearFilter();
$("input[name=search]").keyup();
});
}); //End of $function