Mon application Web a l'arborescence suivante afin d'afficher certains fichiers et fichiers.

ul {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<ul id="myTreeSelector">
  <li>
    <span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>
    <ul class="nested">
      <li class="file"><i class="fa fa-file"></i> app1.dat</li>
      <li class="file"><i class="fa fa-file"></i> app2.dat</li>
      <li>
        <span class="caret folder-selector"><i class="fa fa-folder"></i> second_folder</span>
        <ul class="nested">
          <li class="file"><i class="fa fa-file"></i> ret.dat</li>
          <li><span class="caret folder-selector"><i class="fa fa-folder"></i> third_folder</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Ceci est juste un exemple statique, je veux créer ce dossier dynamiquement à partir d'un tableau d'entrée à l'aide de jQuery.

En suivant l'exemple ci-dessus (et en ajoutant un dernier élément en tant que nouveau répertoire vide), mon tableau d'entrée est le suivant :

arrayOfFiles= ["/first_folder/app1.dat","/first_folder/app2.dat","/first_folder/second_folder/ret.dat", "/first_folder/second_folder/third_folder"]

Comment puis-je, à l'aide de jQuery, itérer ce tableau et créer la structure de dossiers appropriée ? C'est mon essai jusqu'à présent, je sais que je peux utiliser appendTo pour ajouter du contenu au HTML, mais c'est tellement difficile pour moi de gérer les fichiers-dossiers.

general_ul = $("#myTreeSelector")
general_li = $('</li>').appendTo(general_ul);
arrayOfPaths.forEach( function(pathOrFile) {
    var li = $('<li/>')
        .html('<span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>')
        .appendTo(general_li);
});

Merci d'avance.

1
Avión 8 oct. 2020 à 09:47

1 réponse

Meilleure réponse

J'ai retravaillé mon projet pour qu'il soit le plus proche possible de ce dont vous avez besoin. Ce n'est pas jQuery mais j'espère que cela vous aidera !

JS/HTML/CSS

var arrayOfFiles = [
    "/first_folder/app_01.dat",
    "/first_folder/app_02.dat",
    "/first_folder/second_folder/ret_01.dat",
    "/first_folder/second_folder/ret_02.dat",
    "/first_folder/second_folder/third_folder",
    "/other_first_folder/other_app_01.dat",
    "/other_first_folder/other_app_02.dat",
    "/other_first_folder/other_sec_folder/other_app_03.dat",
    "/other_first_folder/other_sec_folder/other_app_04.dat",
    "/new_folder/new_other_folder/last_folder",
];

var wrap = document.getElementById("myTreeSelector");

var lines = "----";
var res = {};
function makeObj(obj) {
    var splme = obj.split('/').slice(1);
    var f = res;
    for (i = 0; i < splme.length; i++) {
        obName = { name: splme[i] };
        f = f[splme[i]] = f[splme[i]] || obName;
    }
}
arrayOfFiles.map(makeObj);

var tmp = [];
function prsObj(x, y) {
    for (var k in x) {
        if (typeof x[k] === 'object' && x[k] !== null) {
            prsObj(x[k], y);
        }
        else if (x.hasOwnProperty(k)) {
            y(x[k]);
        }
        tmp.push(lines);
    }
};
prsObj(res, function (ftmp) { tmp.push(ftmp); });

var redy = [];
for (var i = 0; i < tmp.length - 1; i++) {
    if (tmp[i] !== lines) {
        redy.push(tmp[i]);
    }
    else if (tmp[i] === lines && tmp[i + 1] === lines) {
        redy.push("file");
        i++;
    }
    else if (tmp[i] === lines && tmp[i + 1] !== lines) {
        redy.push("folder");
    } else { }
}
redy.pop();

var text = '';
var x = 0;
var y = 0;
for (var i = 0; i < redy.length; i++) {
    if (y === 1) {
        var text = document.createTextNode(redy[i]);
        addThis(0);
        x = 0;
        y = 0;
    }
    else if (redy[i + 1] === "file" && redy[i + 2] === "file") {
        if (redy[i].indexOf(".") > -1) {
            var text = document.createTextNode(redy[i]);
            addThis(1);
            i = i + 2; 
            x = 0;
            y = 1;
        } else {
            var text = document.createTextNode(redy[i]);
            addThis(2);
            i = i + 2;
            x = 0;
            y = 1;
        }
    }
    else if (redy[i + 1] === "folder" && i === 0) {
        var text = document.createTextNode(redy[i]);
        addThis(0);
        x++;
        y = 0;
    }
    else if (redy[i + 1] === "folder" && x >= 1 || redy[i + 1] === "folder") {
        var text = document.createTextNode(redy[i]);
        addThis(2);
        x++;
        y = 0;
    }
    else if (redy[i + 1] === "file") {
        if (redy[i] === '') { continue; }
        else if (redy[i].indexOf(".") > -1) {
            var text = document.createTextNode(redy[i]);
            addThis(1);
            y = 0;
        } else {
            var text = document.createTextNode(redy[i]);
            addThis(2);
            y = 0;
        }
    }
    else { }
}

function addThis(x) {
    if (x === 0) {
        var li = document.createElement("li");

        var span = document.createElement("span");
        span.setAttribute("class", "caret folder-selector");

        var iel = document.createElement("i");
        iel.setAttribute("class", "fa fa-folder");

        var ul = document.createElement("ul");
        ul.setAttribute("class", "nested");

        span.appendChild(iel);
        span.appendChild(text);
        li.appendChild(span);
        wrap.appendChild(li);
        li.appendChild(ul);
    }

    if (x === 1) {
        var get = wrap.getElementsByClassName("nested");
        var ul = get[get.length - 1];

        var iel = document.createElement("i");
        iel.setAttribute("class", "fa fa-file");

        var li = document.createElement("li");
        li.setAttribute("class", "file");

        ul.appendChild(li);
        li.appendChild(iel);
        li.appendChild(text);
    }

    if (x === 2) {
        var get = wrap.getElementsByClassName("nested");
        var ul = get[get.length - 1];

        var li = document.createElement("li");

        var span = document.createElement("span");
        span.setAttribute("class", "caret folder-selector");

        var iel = document.createElement("i");
        iel.setAttribute("class", "fa fa-folder");

        ul.appendChild(li);
        li.appendChild(span);
        span.appendChild(iel);
        span.appendChild(text);

        var get = wrap.querySelectorAll("li")
        var li = get[get.length - 1];
        var ul = document.createElement("ul");
        ul.setAttribute("class", "nested");

        li.appendChild(ul);
    }
}
ul {
    list-style-type: none;
}

i {
    margin-right: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

<ul id="myTreeSelector">
</ul>
1
54ka 16 oct. 2020 à 10:22