Added search input and expand/reduce buttons to entity edit menu.

This commit is contained in:
Jan Böhmer 2019-04-05 19:08:30 +02:00
parent 9bd941a3e6
commit da16e27fcb
2 changed files with 44 additions and 1 deletions

View file

@ -140,6 +140,8 @@ $(document).on("ajaxUI:start ajaxUI:reload", function() {
enableLinks: false,
showIcon: false,
showBorder: true,
searchResultBackColor: '#ffc107',
searchResultColor: '#000',
showTags: true,
//@ts-ignore
wrapNode: true,
@ -155,6 +157,31 @@ $(document).on("ajaxUI:start ajaxUI:reload", function() {
$(this).treeview('collapseAll', { silent: true });
let selected = $(this).treeview('getSelected');
$(this).treeview('revealNode', [ selected, {silent: true } ]);
//Implement searching if needed.
if($(this).data('treeSearch')) {
let _this = this;
let $search = $($(this).data('treeSearch'));
$search.on( 'input', function() {
$(_this).treeview('search', [$search.val()]);
});
}
//Add tree expand and reduce buttons if needed.
if($(this).data('treeReduce')) {
let _this = this;
let $btn = $($(this).data('treeReduce'));
$btn.click(function () {
$(_this).treeview('collapseAll');
});
}
if($(this).data('treeExpand')) {
let _this = this;
let $btn = $($(this).data('treeExpand'));
$btn.click(function () {
$(_this).treeview('expandAll');
});
}
});
});

View file

@ -4,8 +4,24 @@
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-8">
<input id="tree-search" type="search" class="form-control" placeholder="{% trans %}search{% endtrans %}">
</div>
<div class="btn-group btn-group-sm col-4" role="group">
<button type="button" class="btn btn-outline-secondary" id="tree-expand"
title="{% trans %}expandAll{% endtrans %}">
<i class="fas fa-plus fa-fw"></i>
</button>
<button type="button" class="btn btn-outline-secondary" id="tree-reduce"
title="{% trans %}reduceAll{% endtrans %}">
<i class="fas fa-minus fa-fw"></i>
</button>
</div>
</div>
<div class="treeview-sm" id="tree" data-tree-data="{{ generateTreeData(entity) }}">
<div class="treeview-sm mt-2" id="tree" data-tree-data="{{ generateTreeData(entity) }}"
data-tree-search="#tree-search" data-tree-expand="#tree-expand" data-tree-reduce="#tree-reduce">
</div>