DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by Sven on Jul 23, 2009 13:14

open dhtmlx forum

How to get checked Items as a unordered list

I`m not yet very familiar with DHTMLX-Tree, but I will use it (Pro-version) since it is just what I was looking for. My Question:

I have a large tree with several hundreds of items. After the user has finished checking the Items he wants or needs to select I want to present the checked Items as unordered list >ul></ul>, showing the same structure of levels he checked before. I just can't find a way to do this. I guess it`s easy but not for me.

By the side: It's a great tool! Thanks a lot for that.

Answer posted by Alex (support) on Jul 24, 2009 01:36

Hello,�

there is no such a built-in functionality in tree.�

Tree allows to get checked items by using getAllChecked() method. Or you can iterate through all tree nodes and check they state ( getSubItems(itemId) and isItemChecked(itemId) methods).

You can use one of this approach for creating unordered list.�

The full list of tree method can be found in the documentation�dhtmlxTree/doc/alpha.html ( http://dhtmlx.com/docs/products/dhtmlxTree/doc/alpha.html )

Answer posted by Sven on Jul 24, 2009 22:14

Thanks for the answer. I solved the problem. If anybody is interested, this is my way of generating a UL-List from checked items in the tree:
You need to adjust the following:

path to your CSS-File in line 12
path to your javascript files in lines 14, 15
path to image in line 32
load the correct XML-File in line 36

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<title>Generate UL-List from Tree</title>

</head>

<body>
<link rel='STYLESHEET' type='text/css' href='../common/style.css'> 

<script src="../../codebase/dhtmlxcommon.js"></script> 
    <script src="../../codebase/dhtmlxtree.js"></script> 






<div id="treebox_tree2" style="width:500px; height:600px; background-color:#f5f5f5;border :1px solid Silver; margin-right:20px"></div>

<a href="javascript:void(0)" onClick="alleEintraege();">Zeige alle markierten</a>

<p> </p>
<span id="Ergebnis"></span>
<script>


            tree2=new dhtmlXTreeObject("treebox_tree2","100%","100%",0);
            tree2.setImagePath("../../codebase/imgs/csh_bluebooks/"); 
            tree2.enableCheckBoxes(1);
            tree2.enableThreeStateCheckboxes(false);
            tree2.loadXML("assistent.xml"); 

            tree2.attachEvent("onCheck",onNodeSelect)
                function onNodeSelect(nodeId)
                {
                    // Prüfen ob der Parent des gewählten Item auch gechecked ist
                    var bezug = tree2.getParentId(nodeId);
                    var ebene = tree2.getLevel(bezug);
                    // Alle darüberliegenden Parents durchlaufen und prüfen ob diese gechecked sind
                    for (var i=ebene; i>=1; i--) {
                        if(tree2.isItemChecked(bezug) == false)
                        {
                        tree2.setCheck(bezug,1);
                        }

                        var bezug = tree2.getParentId(bezug);
                    }



                    if(tree2.hasChildren(nodeId) > 0) {
                        // Wenn checked, dann den Baum ausklappen, sonst einklappen
                        if(tree2.isItemChecked(nodeId) == true)
                        {
                        tree2.openItem(nodeId);
                        } else {
                        // Da Parent abgewählt wurde, auch die Children abwählen
                            // Funktion um alle Children auf unchecked zu setzen
                            var ids=tree2.getAllSubItems(nodeId).split(",");
                            for (var i=0; i<ids.length; i++)
                               tree2.setCheck(ids[i],0);
                        // Nun den Zweig einklappen
                        tree2.closeItem(nodeId);
                        }

                    }
                alleEintraege();
                }

            function alleEintraege() {
                inhalt=new Array();
                var ListeMarkierte = tree2.getAllChecked().split(",");
                    var lastLevel = 2;
                    inhalt[0] = "<ul>";
                    for (var i=1; i<ListeMarkierte.length; i++) {

                        if(lastLevel == tree2.getLevel(ListeMarkierte[i])) {
                            if(i > 1) {
                            inhalt[i] = "</li><li>"+tree2.getItemText(ListeMarkierte[i]);
                            } else {
                            inhalt[i] = "<li>"+tree2.getItemText(ListeMarkierte[i]);
                            }
                        }

                        if(lastLevel < tree2.getLevel(ListeMarkierte[i])) {
                        inhalt[i] = "<ul><li>"+tree2.getItemText(ListeMarkierte[i]);
                        }

                        if(lastLevel > tree2.getLevel(ListeMarkierte[i])) {
                        var diff = lastLevel-tree2.getLevel(ListeMarkierte[i]);
                        inhalt[i] = "";
                        for(var x=0; x<diff; x++) {
                        inhalt[i] = inhalt[i]+"</li></ul>";
                        }
                        inhalt[i] = inhalt[i]+"<li>"+tree2.getItemText(ListeMarkierte[i]);
                        }

                    var lastLevel = tree2.getLevel(ListeMarkierte[i]);
                    }
                // Erforderliche Abschlusstags erzeugen
                var appendix = "";
                for(n=1; n < lastLevel; n++) {
                appendix = appendix+"</li></ul>";
                }


                document.getElementById("Ergebnis").innerHTML = inhalt.join("")+appendix;

            }

    </script>
</body>
</html>