Mám ťažkosti s naplnením tejto jQuery treeelect widget pomocou súboru json (alebo čokoľvek). Som nový v jQuery / javascript, takže mi asi chýbajú nejaké základy.
Mám doplnok z https://github.com/travist/jquery.treeselect.js a nenašli sme žiaden príklad, ako ho načítať.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.moreorless.js"></script>
<script type="text/javascript" src="js/jquery.treeselect.js"></script>
<script type="text/javascript" src="js/jquery.chosentree.js"></script>
<link rel="stylesheet" type="text/css" href="css/moreorless.css"/>
<link rel="stylesheet" type="text/css" href="css/treeselect.css"/>
<link rel="stylesheet" type="text/css" href="css/chosen.css"/>
<script type="text/javascript">
jQuery(function () {
var data1 = ["EVENT1", "EVENT2"];
var data2 = [{
"id": 1,
"name": "A green door"
},
{
"id": 2,
"name": "A blue door"
}
]
$("div.chosentree").chosentree({
width: 200,
deepLoad: true,
default_value: data2, // does not work
load: function (node, callback) {
// What do I put here?
/**
* This would typically call jQuery.ajax to load a new node
* on your server where you would return the tree structure
* for the provided node.
*/
}
});
});
</script>
</head>
<body>
<div class="chosentree"></div>
</body>
</html>odpovede:
0 pre odpoveď č. 1Najlepší spôsob, ako zistiť, ako to funguje, je pozrieť sa na ukážkové súbory uvedené v repo nájdenom @ https://github.com/travist/jquery.treeselect.js/blob/master/treeselect.html, Tu uvidíte nasledujúci kód.
$("div.chosentree").chosentree({
width: 500,
deepLoad: true,
showtree: true,
load: function(node, callback) {
setTimeout(function() {
callback(loadChildren(node, 0));
}, 1000);
}
});
Kód v rámci load metóda tu v skutočnosti vykonáva falošnú žiadosť o to, ako by údaje mali vyzerať. Urobí to tak, že zavoláte volanú metódu loadChildren ktorý je definovaný v nájdenom súbore @ https://github.com/travist/jquery.treeselect.js/blob/master/index.html, Čo je nasledujúce ...
var maxDepth = 3;
var loadChildren = function(node, level) {
var hasChildren = node.level < maxDepth;
for (var i=0; i<8; i++) {
var id = node.id + (i+1).toString();
node.children.push({
id:id,
title:"Node " + id,
has_children:hasChildren,
level: node.level + 1,
children:[]
});
if (hasChildren && level < 2) {
loadChildren(node.children[i], (level+1));
}
}
return node;
};
Dôležité je uvedomiť si, že ide o „falšovanie“ požiadavky na server. Toto v podstate napĺňa požiadavku na server, ktorý by vrátil niečo, čo vyzerá nasledovne.
{
"id": "1",
"title": "Node 1",
"has_children": "1",
"children": [
{
"id": "11",
"title": "Node 11",
"has_children": "1",
"children": [
]
},
...
...
]
}
Na load metóda sa potom volá odovzdaním do jedného objektu uzla, ktorý môžete použiť na načítanie všetkých detí pod týmto uzlom, ak si budete priať.
Dúfam, že to pomôže.
1 pre odpoveď č. 2
Chcel by som uverejniť tento kód, pretože som strávil posledné 2 hodiny tým, že by to nebral surový JSON. Je to tak, ale nezabudnite spustiť reťazcový literál pomocou JSON.parse (jsonString);
Príklad:
jQuery(function() {
JSONObject = JSON.parse("{"id":"01","title":"Node 01","has_children":true,"level":1,"children":[{"id":"011","title":"Node 011","has_children":true,"level":2,"children":[{"id":"0111","title":"Node 0111","has_children":false,"level":3,"children":[]}]}]}");
$("div.chosentree").chosentree({
width: 500,
deepLoad: true,
load: function(node, callback) {
callback(JSONObject);
}
});
});