TreeView

nacitani

by lithium182

HTML

<div id="main" XGClass="TreeFrame" DClass="TXGTreeFrame" Left="12" Top="12" Width="650" Height="200" LocKey="-666" fName="FrameTree1" Align="alNone" ObjectName="Druh žádanky na dopr">
      <div XGClass="TreeAttribute" DClass="TXGTreeLstAttrib" Left="12" Top="22" Width="100" Height="15" LocKey="170980" Name="Kód;Název"></div>
      <div XGClass="Attribute" DClass="TXGFrLstAttrib" Left="192" Top="22" Width="90" Height="15" LocKey="170982" Name="Kód"></div>
      <div XGClass="Attribute" DClass="TXGFrLstAttrib" Left="192" Top="42" Width="150" Height="15" LocKey="170984" Name="Název"></div>
      <div XGClass="Attribute" DClass="TXGFrLstAttrib" Left="192" Top="62" Width="90" Height="15" LocKey="237574" Name="Rozpoč skupina.Kód"></div>
      <div XGClass="Attribute" DClass="TXGFrLstAttrib" Left="192" Top="82" Width="150" Height="15" LocKey="237572" Name="Rozpoč skupina.Název"></div>
    </div>

<div id="display"></div>

CSS

li {
    cursor: pointer;
}
li:nth-child(odd):before {
    color: red;
    content: "\2714";
}
li:nth-child(even):before {
    color: green;
    content: "\2714";
}
ul {
    list-style: none;
}

JavaScript

var el = document.getElementById("main");
var displ = document.getElementById("display");
var attrs = el.querySelector("[XGClass=TreeAttribute]").getAttribute("Name").split(";");
var firstUL = document.createElement("ul");
displ.appendChild(firstUL);

for (var i = 0; i < attrs.length; i++) {
  var firstIL = document.createElement("li");
    firstUL.appendChild(firstIL);
    firstIL.textContent = attrs[i];
    firstIL.addEventListener("click", onLinkClick, false);
}

function onLinkClick(e) {
    var el = e.target;
    addSubList(el);
    e.stopPropagation();
}

function addSubList(obj) {
    var lastNumber = obj.querySelectorAll("li");
    var newUL = document.createElement("ul");
    for (var i = lastNumber.length; i < lastNumber.length + 3; i++) {
        var newIL = document.createElement("li");
        newIL.textContent = i;
        newUL.appendChild(newIL);
    }
    newUL.addEventListener("click", onLinkClick, false);
    obj.appendChild(newUL);
}

function getDataGrid(obj) {
    var attrElements = obj.querySelectorAll("[XGClass=Attribute]");
    var attrs = [];
    for (var i = 0; i < attrElements.length; i++) {
        attrs[i] = attrElements.item(i).getAttribute("Name");
    }
    return attrs;
}

function getDataGrid(obj) {
    var attrElements = obj.querySelectorAll("[XGClass=Attribute]");
    var attrs = [];
    for (var i = 0; i < attrElements.length; i++) {
        attrs[i] = attrElements.item(i).getAttribute("Name");
    }
    return attrs;
}

function getDataGrid(obj) {
    var attrElements = obj.querySelectorAll("[XGClass=Attribute]");
    var attrs = [];
    for (var i = 0; i < attrElements.length; i++) {
        attrs[i] = attrElements.item(i).getAttribute("Name");
    }
    return attrs;
}