我正在 Bootstrap 模态内构建 Bootstrap 树。在搜索时，搜索所有节点并在匹配发生时突出显示。我的模式具有固定高度，如果搜索到的元素出现在树的底部，我必须滚动才能查看该元素。是否可以在匹配时自动滚动到第一个匹配的元素。这是我正在使用的插件。 Bootstrap-TreeView
一些引用代码
<div class="row">
<hr>
<h2>Searchable Tree</h2>
<div class="col-sm-4">
<h2>Input</h2>
<!-- <form> -->
<div class="form-group">
<label for="input-search" class="sr-only">Search Tree:</label>
<input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-ignore-case" value="true" checked>
Ignore Case
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
Exact Match
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-reveal-results" value="true" checked>
Reveal Results
</label>
</div>
<button type="button" class="btn btn-success" id="btn-search">Search</button>
<button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
<!-- </form> -->
</div>
<div class="col-sm-4">
<h2>Tree</h2>
<div id="treeview-searchable" class="treeview"></div>
</div>
<div class="col-sm-4">
<h2>Results</h2>
<div id="search-output"></div>
</div>
</div>
<div id="tree"></div>
Javascript:
var tree1 =[ {
text:"GrandParent",
nodes:[
{
text: "Parent 1",
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5",
nodes: [
{
text: "Child 5",
nodes: [
{
text: "Grandchild 4"
},
{
text: "Grandchild 5"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 6",
nodes: [
{
text: "Child 6",
nodes: [
{
text: "Grandchild 8"
},
{
text: "Grandchild 9"
}
]
},
{
text: "Child 10"
}
]
}
]
}];
function getTree() {
// Some logic to retrieve, or generate tree structure
return tree1;
}
var $searchableTree = $('#treeview-searchable').treeview({
data: getTree(),
});
var search = function(e) {
var pattern = $('#input-search').val();
var options = {
ignoreCase: $('#chk-ignore-case').is(':checked'),
exactMatch: $('#chk-exact-match').is(':checked'),
revealResults: $('#chk-reveal-results').is(':checked')
};
var results = $searchableTree.treeview('search', [ pattern, options ]);
var output = '<p>' + results.length + ' matches found</p>';
$.each(results, function (index, result) {
output += '<p>- ' + result.text + '</p>';
});
$('#search-output').html(output);
}
$('#btn-search').on('click', search);
$('#input-search').on('keyup', search);
$('#btn-clear-search').on('click', function (e) {
$searchableTree.treeview('clearSearch');
$('#input-search').val('');
$('#search-output').html('');
});
这是我制作的 fiddle 供引用
https://jsfiddle.net/whw3j59o/3/
假设树存在于固定高度的 Bootstrap 模态内，是否可以自动滚动到第一个匹配项？
最佳答案
我最近开始使用 bootstrap-treeview 并遇到了同样的问题。
解决方案:
我们可以使用scrollIntoView() 函数。 Bootstrap-treeview 已经有一个搜索选项可以突出显示该值，您可以扩展它。
我使用了 filter / search list而不是过滤它向下滚动到正在搜索的值。
代码引用:
HTML:
<div class="row" style="margin:5px;overflow-y:auto;">
<div class="col-sm-4">
<div class="form-group">
<input type="input" class="form-control" id="input-search"
placeholder="Type to search..." value="">
</div>
<button type="button" class="btn btn-success" id="btn-
search">Search</button>
<button type="button" class="btn btn-default" id="btn-clear-
search">Clear</button>
</div>
<div class="col-sm-4" style="margin:5px;">
<h2>Tree</h2>
<div id="tree" style=" overflow-y:auto; height: 250px; border: 1px solid
#ccc ;"></div>
</div>
</div>
Javascript:
var myTree = [{
text: "Parent1",
nodes: [{
text: "Child11",
nodes: [{
text: "GrandChild111"
}, {
text: "GrandChild112"
}]
}, {
text: "Child12"
}]
}, {
text: "Parent2",
nodes: [{
text: "Child21"
}, {
text: "Child22"
}]
}, {
text: "Parent3",
nodes: [{
text: "Child31"
}, {
text: "Child32"
}, {
text: "Child33"
}]
}, {
text: "Parent4"
}, {
text: "Parent5",
nodes: [{
text: "Child51"
}, {
text: "Child52"
}, {
text: "Child33"
}]
}, {
text: "Parent6"
}, {
text: "Parent7",
nodes: [{
text: "Child71",
nodes: [{
text: "GrandChild711"
}, {
text: "GrandChild712"
}]
}, {
text: "Child72",
nodes: [{
text: "GrandChild711"
}, {
text: "GrandChild712"
}]
}]
}, {
text: "Parent8"
}, {
text: "Parent9",
nodes: [{
text: "Child91"
}, {
text: "Child92"
}]
}, {
text: "Parent10"
}];
function getTree() {
// Some logic to retrieve, or generate tree structure
return myTree;
}
$('#tree').bind('mousewheel', function(e) {
$(this).scrollTop($(this).scrollTop() - e.originalEvent.wheelDeltaY);
return false;
});
var $searchableTree = $('#tree').treeview({
data: getTree(),
levels: 1
});
var search = function(e) {
var input, filter, div, ul, li, a, i;
var pattern = $('#input-search').val();
var options = {
ignoreCase: true,
exactMatch: false,
revealResults: true,
};
$searchableTree.treeview('search', [pattern, options]);
//Scrolling to the element that is searched
input = document.getElementById("input-search");
filter = input.value.toUpperCase();
div = document.getElementById("tree");
li = div.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].scrollIntoView(false)[0];
}
}
}
$('#btn-search').on('click', search);
$('#btn-clear-search').on('click', function(e) {
$searchableTree.treeview('clearSearch');
$('#input-search').val('');
$('#search-output').html('');
});
这部分代码过滤并滚动到匹配的值:
input = document.getElementById("input-search");
filter = input.value.toUpperCase();
div = document.getElementById("tree");
li = div.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].scrollIntoView(false)[0];
}
}
我在这一行的末尾添加了零，以便它滚动到列表中的第一个匹配项
li[i].scrollIntoView(false)[0];
这是演示的链接 - DEMO
关于javascript - 在 bootstrap-treeview 中突出显示和滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43870211/