Я пытаюсь создать какое-то локальное приложение.Раньше я учился, как разрабатывать, но не занимался вообще в течение 7 лет.И я довольно ржавый.
У меня есть HTML-страница со входом.Этот вход должен быть XML-файлом.Цель состоит в том, чтобы построить дерево этого файла, используя JsTree, и когда я нажимаю на один из «листов», показывая описание в другом div.
Ну, я обработал часть «div».Но у меня есть некоторые проблемы с чтением файла.
Вот так выглядит мой XML-файл (просто пример):
<offres>
<formation>
<domaine-formation>
<groupName>domaine-formation</groupName>
<groupDesc>Cet élément contient des listes de codes décrivant le dormaine de la formation, en utilisant les nomenclatures NSF (Nomenclatures des Spécialités de Formation), ROME (Répertoire Opérationnel des Métiers et des Emplois) et/ou le FORMACODE (thésaurus de l'offre de formation du Centre Inffo). Règle de gestion : le premier code FORMACODE doit être considéré comme le FORMACODE principal.</groupDesc>
<occMin>1</occMin>
<occMax>1</occMax>
<code-FORMACODE>
<dataName>code-FORMACODE</dataName>
<dataType>Alphanumérique</dataType>
<dataPresence>Conditionnel</dataPresence>
<minLength>5</minLength>
<maxLength>5</maxLength>
<dataDesc2>Cet élément contient un code du FORMACODE. Il est obligatoire de préciser grâce à l'attribut 'ref' la version du FORMACODE utilisée (par exemple 'V10' pour la version 10 du FORMACODE).</dataDesc2>
<txcompOI>99.7</txcompOI>
</code-FORMACODE>
<code-NSF>
<dataName>code-NSF</dataName>
<dataType>Alphanumérique</dataType>
<dataPresence>Facultatif</dataPresence>
<minLength>3</minLength>
<maxLength>3</maxLength>
<dataDesc2>Cet élément contient un code de la NSF (3 postes).</dataDesc2>
<txcompOI>75.4</txcompOI>
</code-NSF>
<code-RNCP>
<dataName>code-RNCP</dataName>
<dataType>Alphanumérique</dataType>
<dataPresence>Facultatif</dataPresence>
<minLength>1</minLength>
<maxLength>6</maxLength>
<dataDesc2>Cet élément contient un code d'une certification dans le Répertoire National des Certifications Professionnelles.</dataDesc2>
<txcompOI>34.6</txcompOI>
</code-RNCP>
<extras></extras>
</domaine-formation>
<intitule-formation>
<dataName>intitule-formation</dataName>
<dataType>Alphanumérique</dataType>
<dataPresence>Obligatoire</dataPresence>
<minLength>1</minLength>
<maxLength>255</maxLength>
<dataDesc1>Intitulé qui sert à caractériser et singulariser une action de formation. Il en indique le titre.</dataDesc1>
<dataDesc2>Cet élément décrit l'intitulé de la formation. Si la formation a comme résultat l'obtention d'un diplôme, le contenu de cet élément devrait utiliser une dénomination conforme aux tables de l'Éducation Nationale. Si la formation a comme résultat un titre ou une certification, le contenu devrait utiliser une dénomination conforme au contenu du Répertoire National des Certifications Professionnelles (RNCP).</dataDesc2>
<txcompOI>100</txcompOI>
</intitule-formation>
<objectif-formation>
<dataName>objectif-formation</dataName>
<dataType>Alphanumérique</dataType>
<dataPresence>Obligatoire</dataPresence>
<minLength>1</minLength>
<maxLength>3000</maxLength>
<dataDesc1>Il peut s'agir d'une session de certification, de professionnalisation, de préparation à la qualification, de remise à niveau, de (re)mobilisation, de perfectionnement ou de création d'entreprise. Ces catégories sont de type administratif et sont décrites ci-dessous.</dataDesc1>
<dataDesc2>Cet élément décrit l'objectif de la formation. Il décrit la ou les compétences à acquérir, à améliorer ou à entretenir.</dataDesc2>
<txcompOI>89.9</txcompOI>
</objectif-formation>
</formation>
</offres>
И вот это JsTree, которое я хочу иметь:
offres
-- formation
-- -- domaine-formation
-- -- -- code-FORMACODE
-- -- -- code-NSF
-- -- -- code-RNCP
-- -- intitule-formation
-- -- objectif-formation
Если у вас есть идеи, как это сделать, было бы неплохо.Я пытаюсь.Если мне нужно переделать файл XML, просто скажите это тоже:)
Редактировать: Это на самом деле то, что я получаю
Редактировать: Если это может помочь, вот мойкод для получения изображения по ссылке выше.
var loadXmlButton = document.getElementById('loadXmlButton');
loadXmlButton.addEventListener('change', handleFileSelection, false);
function handleFileSelection() {
var file = loadXmlButton.files[0],
reader = new FileReader();
waitForTextReadComplete(reader);
reader.readAsText(file);
fileName = file.name;
fileName = fileName.substr(0, fileName.lastIndexOf('.'));
// On remplace le champs de sélection du fichier par le nom du fichier chargé
$("#dataFileName").text('Norme '+ fileName.toUpperCase());
}
function waitForTextReadComplete(reader) {
reader.onloadend = function(event) {
var text = event.target.result;
parseTextAsXml(text);
}
}
function parseTextAsXml(text) {
var xml = (new DOMParser()).parseFromString(text, 'text/xml')
var parser = new DOMParser(),
xmlDom = parser.parseFromString(text, "text/xml");
$(function () {
// var sHTML = drawTreeFromXml(xmlDom);
var sHTML = xmlToJson(xml.documentElement)
$(document).ready(function(){
$('#tree-container').jstree({
'core' : {
'data' : sHTML,
'themes' : {
'responsive' : true
}
},
"search": {
"case_insensitive": true,
"show_only_matches" : true
},
plugins: ["search"]
}).bind("select_node.jstree", function (e, data) {
var href = data.node.a_attr.href;
var parentId = data.node.a_attr.parent_id;
if(href == '#')
return '';
//window.open(href);
$('html,body').animate({scrollTop: ($(href).offset().top-65)},'slow');
});
$('#tree-container').slimScroll({
height: '480px',
start: 'top'
});
$('#search').keyup(function(){
$('#tree-container').jstree('search', $(this).val());
});
});
});
}
function xmlToJson(xmlNode) {
return {
text: xmlNode.firstChild && xmlNode.firstChild.nodeType === 3 ?
xmlNode.firstChild.textContent : '',
children: [...xmlNode.children].map(childNode => xmlToJson(childNode))
};
}
loadXmlButton - мой ввод.tree-container - это div, куда дерево должно загружаться.