Возникла у меня небольшая проблема с оформлением. Я не понимаю как вставить кнопки перед ul
списком. У меня они появляться в каждом ul
списке, а мне нужно что бы они были вне него. Пробовал создавать еще одну переменную с кнопками, но чего-то не выходило... Помогите пожалуйста исправить проблему.
var listCategories = {
data: [
{
itemId: 1,
itemName: "пункт №1",
itemParentId: 0,
deleteInputId: 'd_1',
addInputId: 'a_1',
liId: 'l_1'
},
{
itemId: 2,
itemName: "пункт №1.1",
itemParentId: '1',
deleteInputId: 'd_2',
addInputId: 'a_2',
liId: 'l_2'
},
{
itemId: 3,
itemName: "пункт №1.2",
itemParentId: 1,
deleteInputId: 'd_3',
addInputId: 'a_3',
liId: 'l_3'
},
{
itemId: 4,
itemName: "пункт №2",
itemParentId: 0,
deleteInputId: 'd_4',
addInputId: 'a_4',
liId: 'l_4'
},
{
itemId: 5,
itemName: "пункт №3",
itemParentId: 0,
deleteInputId: 'd_5',
addInputId: 'a_5',
liId: 'l_5'
},
{
itemId: 6,
itemName: "пункт №3.1",
itemParentId: 5,
deleteInputId: 'd_6',
addInputId: 'a_6',
liId: 'l_6'
},
{
itemId: 7,
itemName: "пункт №3.2",
itemParentId: 5,
deleteInputId: 'd_7',
addInputId: 'a_7',
liId: 'l_7'
},
{
itemId: 8,
itemName: "пункт №3.3",
itemParentId: 5,
deleteInputId: 'd_8',
addInputId: 'a_8',
liId: 'l_8'
},
{
itemId: 9,
itemName: "пункт №4",
itemParentId: 0,
deleteInputId: 'd_9',
addInputId: 'a_9',
liId: 'l_9'
},
{
itemId: 10,
itemName: "пункт №5",
itemParentId: 0,
deleteInputId: 'd_10',
addInputId: 'a_10',
liId: 'l_10'
},
{
itemId: 11,
itemName: "пункт №5.1",
itemParentId: 10,
deleteInputId: 'd_11',
addInputId: 'a_11',
liId: 'l_11'
}
]
}
function createTree(data, parentId) {
parentId = parentId || 0;
var items = data.filter(function(el) {
return el.itemParentId == parentId;
});
if (items.length == 0) return null;
var tree = $('<ul>').addClass('tree').prepend($
('<input type="button" id="deleteBranch" value="Delete">')
).prepend(
$('<input type="button" id="addBranch" value="Add">')
);
tree.append(
items.map(
function(el) {
var li = $('<li>').append(
$('<input>').attr({type: 'checkbox', id: el.deleteInputId})
).append(
$('<label>').html(el.itemName).attr({id: el.itemId, for: el.deleteInputId}).addClass('item')
).append(
$('<a>').addClass('state')
).attr({id: el.liId}),
nestedTree = createTree(data, el.itemId);
if (nestedTree !== null) {
li.append(nestedTree)
.addClass('collapse');
}
return li;
}
)
);
return tree;
}
$(document).ready(function() {
var tree = createTree(listCategories.data);
$('#tree').append(tree)
.on('dblclick', '.item',function(){
$(this).attr("contenteditable", "true");
})
.on('click', '.item',function(){
$('.active').not(this).removeClass('active');
$(this).toggleClass('active');
})
.on('click', '.state',function(){
$(this).parent().toggleClass('collapse expand');
})
});
ul.tree {
list-style-type: none;
position: relative;
}
.active {
background-color: orange;
}
.state {
position: absolute;
left: 1em;
}
.collapse > .state::after {
content: '+';
}
.expand > .state::after {
content: '-';
}
.collapse > ul {
display: none;
}
.expand > ul {
display: block;
}
.item {
cursor: pointer;
}
#addBranch {
margin: 0px 5px 25px -30px;
}
#deleteBranch {
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tree"></div>