Выделите и прокрутите внутри начальной загрузки дерева
Я строю дерево начальной загрузки внутри модальной начальной загрузки. При поиске все узлы обыскиваются и подсвечиваются при каждом совпадении. Мой модал имеет фиксированную высоту, и если искомый элемент присутствует в нижней части дерева, я должен прокрутить его, чтобы просмотреть элемент. Можно ли прокрутить автоматически до первого сопоставленного элемента, когда есть совпадение. Вот плагин, который я использую. 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('');
});
Вот скрипка, которую я сделал для справки
https://jsfiddle.net/whw3j59o/3/
Предполагая, что дерево присутствует внутри модального бутстрапа с фиксированной высотой, возможно ли выполнить автоматическую прокрутку до первого совпадения?
1 ответ
Решение
Недавно я начал работать с bootstrap-treeview, и у меня возник тот же вопрос.
Решение:
Мы можем использовать функцию scrollIntoView(). Bootstrap-treeview уже имеет опцию поиска, которая выделяет значение, вы можете расширить его.
Я использовал фильтр / список поиска, и вместо фильтрации он прокручивается вниз к значению, которое ищется.
Ссылка на код:
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(ложь)[0];
Вот ссылка на демо - ДЕМО