simple-text-treeview
simple text treeview
Install
npm install simple-text-treeview
Usage & Api
var simple_text_treeview = require("simple-text-treeview");
//dom
document.getElementById('divResult3').innerHTML =
"<div id='name-click-msg' style='border:1px solid lightgrey;'> </div>" +
"<div>" +
"<span class='ht cmd' id='sp-cmd-add'>+add</span>/" +
"<span class='ht cmd' id='sp-cmd-add-2' title='add 2 items'>2</span> " +
"<span class='ht cmd' id='sp-cmd-insert'>+insert</span>/" +
"<span class='ht cmd' id='sp-cmd-insert-2' title='insert 2 items'>2</span> " +
"<span class='ht cmd' id='sp-cmd-insert-next'>+insert-next</span>/" +
"<span class='ht cmd' id='sp-cmd-insert-next-2' title='insert 2 items'>2</span> " +
"<span class='ht cmd' id='sp-cmd-remove'>-remove</span> " +
"<span class='ht cmd' id='sp-cmd-update'>=update</span> " +
"<label><input type='checkbox' id='chk-update-select' checked/>update-select</label>" +
"</div>" +
"<div id='st-treeview'></div>";
var el = document.getElementById('st-treeview');
//new .class(container)
var tv = new simple_text_treeview.class(el);
el.addEventListener("click", function (evt) {
var target = evt.target;
if (target && target.classList.contains("tree-name")) {
var s = target.textContent;
document.getElementById('name-click-msg').innerHTML = s;
}
})
document.getElementById('sp-cmd-add').onclick = function () {
/*
add( elNode, text [, options] )
elNode
node, nodeChildren, container, NodeInfo
text
text or textArray
options
.insert
insert mode
.updateSelect
update selection
.html
text is html
return the first added node
*/
tv.add(tv.selectedName || el, "" + (new Date()),
{ updateSelect: _ele('chk-update-select').checked });
};
document.getElementById('sp-cmd-add-2').onclick = function () {
//insert array
tv.add(tv.selectedName || el, ["" + (new Date()), "" + (new Date()) + "/<b>2</b>"],
{ updateSelect: _ele('chk-update-select').checked, html: true });
};
document.getElementById('sp-cmd-insert').onclick = function () {
tv.add(tv.selectedName || el, "" + (new Date()),
{ insert: true, updateSelect: _ele('chk-update-select').checked });
};
document.getElementById('sp-cmd-insert-2').onclick = function () {
tv.add(tv.selectedName || el, ["" + (new Date()), "" + (new Date()) + "/<b>2</b>"],
{ insert: true, updateSelect: _ele('chk-update-select').checked });
};
document.getElementById('sp-cmd-insert-next').onclick = function () {
//insertNext(elNode, text, options)
if (tv.selectedName) tv.insertNext(null, "" + new Date(),
{ updateSelect: _ele('chk-update-select').checked });
else tv.add(el, "" + (new Date()),
{ updateSelect: _ele('chk-update-select').checked });
};
document.getElementById('sp-cmd-insert-next-2').onclick = function () {
if (tv.selectedName) tv.insertNext(null, ["" + (new Date()), "" + (new Date()) + "/2"],
{ updateSelect: _ele('chk-update-select').checked });
else tv.add(el, ["" + (new Date()), "" + (new Date()) + "/2"],
{ updateSelect: _ele('chk-update-select').checked });
};
document.getElementById('sp-cmd-remove').onclick = function () {
//remove(elNode, options)
tv.remove(null, { updateSelect: _ele('chk-update-select').checked }); //remove the selected
};
document.getElementById('sp-cmd-update').onclick = function () {
//update(elNode, text, options)
tv.update(null, "" + (new Date()), { updateSelect: _ele('chk-update-select').checked }); //update the selected
};