I have been playing with JsTree a little and MVC3. I can successfully call MVC3 methods and get back JSON to load a basic JsTree so i can do the very basics. What i don't understand is the more complicated data structure to use mostly to do wait extra data i need on nodes and also getting the tree to act on some of that data.
My data is
NodeText (string) - text to display
ItemStatus (enum) - Used to set colors etc on tree
ItemType (enum) - controls what can be dragged and dropped and onto what
RelatedIDs (List ID is a struct described below) - used when an item is dropped
PrimaryItemID (ID and is a struct) - used for right click menu and DB item identification and applying info for RelatedIDs from dropped item.
SecondaryItemID (ID and is a struct) - used for right click menu and DB item identification and applying info for RelatedIDs from dropped item.
ID struct is
ID (long)
IDType (enum)
From my reading i understand the JSON data layout may have changed as well as there been attribute data and meta data but i am not very clear on what should go where and what MVC3 model object i should create to serialize this data into JSON the tree can understand. I really want to get the base data structure right the first time so i don't have to rewrite a heap of code.
If i have left any required info out let me know.
This is the data model I have been using for JSTree. You will have to put it in json form.
node.data.attr.href <a> tag within <li> href
.other-a-attr any other attribute you want on the <a>
.title visible title of node
.icon optional image_file for icon
.state controls icon, "open", "closed" or "" = default
.arrt.id node id on the <li>
.nType type_attr for UI and types plug ins - MUST SET using type_attr in Types plugin default is ref
.title node title (not visible)
.other-li-attr any other attritubes you want on the <li>
I have to agree JSTree has a very steep learning curve and getting this out of the documentation is not at all easy for us newbees.
I am still not sure what node.arrt.title is for. It is not the title you see in the tree. node.data.title is the one that shows in the tree.
There may be others that I have not figured out yet. Let me know if you figure them out.
It does not matter what language you use for the backend. In your response the JSON has to look in a certain way. The basic jsTree acceptable JSON format is:
[
{
"data" : {
"icon" : "/path/to/icon.png",
"title" : "name of the node"
},
"attr" : {
"rel" : "type defined by types",
"title" : "node title",
"id" : "Node id"
},
"state" : "closed"
}
]
Obviously., this is just an example you can play around with. Naturally, you can put null in icon, or completely drop it. The rel has to be defined by the types plugin, but is also optional, so is the title.
