Ztree + Ajax + JSON request to load a ztree tree

ztree

var setting = {

view: {

showLine: false, // Don’t show connectors

//showIcon: showIconForTree // Don’t show the folder icon ( call showIconForTree())

},

data: {

simpleData: {

enable: true

}

}

};

var nodes = [

{ id: 1, pId: 0, name: ” Parent node 1 – an “, open: false }, // according to pId Parameter specifies the parent node

{ id: 11, pId: 1, name: ” Parent node 11 – Fold ” },

{ id: 111, pId: 11, name: ” Leaf node 111″ },

{ id: 112, pId: 11, name: ” Leaf node 112″ },

{ id: 113, pId: 11, name: ” Leaf node 113″ },

{ id: 114, pId: 11, name: ” Leaf node 114″ },

{ id: 12, pId: 1, name: ” Parent node 12 – Fold ” },

{ id: 121, pId: 12, name: ” Leaf node 121″ },

{ id: 122, pId: 12, name: ” Leaf node 122″ },

{ id: 123, pId: 12, name: ” Leaf node 123″ },

{ id: 124, pId: 12, name: ” Leaf node 124″ },

{ id: 13, pId: 1, name: ” Parent node 13 – No child node “, isParent: false },

{ id: 2, pId: 0, name: ” Parent node 2 – Fold ” },

{ id: 21, pId: 2, name: ” Parent node 21 – an “, open: false },

{ id: 211, pId: 21, name: ” Leaf node 211″ },

{ id: 212, pId: 21, name: ” Leaf node 212″ },

{ id: 213, pId: 21, name: ” Leaf node 213″ },

{ id: 214, pId: 21, name: ” Leaf node 214″ },

{ id: 22, pId: 2, name: ” Parent node 22 – Fold ” },

{ id: 221, pId: 22, name: ” Leaf node 221″ },

{ id: 222, pId: 22, name: ” Leaf node 222″ },

{ id: 223, pId: 22, name: ” Leaf node 223″ },

{ id: 224, pId: 22, name: ” Leaf node 224″ },

{ id: 23, pId: 2, name: ” Parent node 23 – Fold ” },

{ id: 231, pId: 23, name: ” Leaf node 231″ },

{ id: 232, pId: 23, name: ” Leaf node 232″ },

{ id: 233, pId: 23, name: ” Leaf node 233″ },

{ id: 234, pId: 23, name: ” Leaf node 234″ },

{ id: 3, pId: 0, name: ” Parent node 3 – No child node “, isParent: true }

];

/*function showIconForTree(treeId, treeNode) {

return !treeNode.isParent;

};*/

$(document).ready(function() {

$.fn.zTree.init($(“#sys”), setting, nodes);

});

</html>