先看代码:
var TreeForJSON = new dhtmlXTreeObject('TreeForJSON', '100%', '100%', 0); TreeForJSON.setImagePath("dhtmlx/codebase/imgs/csh_vista/"); TreeForJSON.enableDragAndDrop(true); TreeForJSON.enableKeyboardNavigation(true) TreeForJSON.loadJSONObject({id:0, item:[ {id:1,text:"first",userdata:[{name:'url',content:'http://g.cn#1'}]}, {id:2, text:"middle",userdata:[{name:'url',content:'http://g.cn#2'}], item:[ {id:"21", text:"child",userdata:[{name:'url',content:'http://g.cn#3'}]} ]}, {id:3,text:"last",userdata:[{name:'url',content:'空'}]} ] } ); TreeForJSON.setOnClickHandler(TestOnClick); function TestOnClick(id){ var url = (TreeForJSON.getUserData(id, "url")); alert(url); }
dhtmlxTree中的loadJSONObject方法也是支持userdata属性的,只是写法特殊一点
取值时是通过当前ID去找userdatea下的name,如代码中的url,然后获取其content内容,即http://g.cn...
同理,使用这个方法可以自定义更多的属性
userdata:[{name:'type',content:'1'},{name:'remark',content:'空'}]
dhtmlXTree API
assignKeys | configures the keys used for keyboard navigation |
attachEvent | adds any user-defined handler to available events |
changeItemId | changes the item's id |
clearCut | cancels marking an item as cut |
clearSelection | unselects the item in the tree |
closeAllItems | collapses target node and all sub nodes |
closeItem | collapses a node |
deleteChildItems | deletes all children of the node |
deleteItem | deletes a node |
destructor | deletes tree and clears memory |
detachEvent | detaches a handler from an event |
disableCheckbox | disables a checkbox |
doCut | marks the selected item as cut |
doPaste | inserts the previously cut branch |
editItem | opens editor for the specified item |
enableActiveImages | enables active images (clickable and dragable). By default only text part of the node is active |
enableAutoSavingSelected | enables/disables autosaving selected node in cookies |
enableAutoTooltips | enables auto tooltips (node text as tooltip) |
enableCheckBoxes | shows/hides checkboxes (all checkboxes in the tree) |
enableContextMenu | enables context menu |
enableDistributedParsing | enables distributed parsing of a big tree (items loaded portion by portion with some timeouts) |
enableDragAndDrop | enables/disables drag-and-drop |
enableDragAndDropScrolling | enables/disables auto scrolling during the drag-and-drop operation |
enableHighlighting | enables item highlighting (item's text is highlighted on mouseover) |
enableIEImageFix | replaces IMG tag with background images - solves the problem with IE image caching, doesn't work for IE6 SP1 |
enableImageDrag | enables dragging an item by its image (by default an item is dragged by text) |
enableItemEditor | enables editing of the item's text |
enableKeySearch | enables searching of items by pressing keys |
enableKeyboardNavigation | enables keyboard navigation in the tree |
enableLoadingItem | enables/disables "Loading..." item |
enableMercyDrag | enables dragging without removing (copies instead of moving) |
enableMultiLineItems | enables multiline items |
enableMultiselection | enables multiselection |
enableRTL | enables Right-to-Left mode in the tree |
enableRadioButtons | replaces checkboxes with radio buttons |
enableSingleRadioMode | replaces checkboxes with radio buttons |
enableSmartCheckboxes | enables smart checkboxes |
enableSmartRendering | enables smart rendering mode |
enableSmartXMLParsing | enables/disables smart XML parsing mode |
enableTextSigns | replaces images with text signs |
enableThreeStateCheckboxes | enables three-state checkboxes |
enableTreeImages | enables tree images |
enableTreeLines | enables/disables tree lines (parent-child threads) |
findItem | finds a tree item by text, selects it and focuses on it |
findItemIdByLabel | finds a tree item by text |
focusItem | scrolls Tree to the indicated item to make it visible and sets focus on it |
getAllChecked | returns the list of ids of the nodes with checked checkboxes, separated by default delimiter |
getAllCheckedBranches | returns the list of ids of the nodes with checked and three-state checkboxes, separated by default delimiter |
getAllChildless | returns the list of all items which don't have child nodes |
getAllItemsWithKids | returns the list of all items which have child nodes, separated by default delimiter |
getAllPartiallyChecked | returns the list of ids of the nodes with three-state checkboxes, separated by default delimiter |
getAllSubItems | returns the list of all children nested on all sublevels of the tree (in relation to the specified item) |
getAllUnchecked | returns the list of identificators of the nodes with unchecked checkboxes, separated by default delimiter |
getAttribute | returns the value of the specified item attribute |
getChildItemIdByIndex | returns child node's id by index |
getDistributedParsingState | gets the current state of distributed parsing |
getIndexById | returns the node's index in the children collection by id |
getItemColor | gets the color of the target item |
getItemIdByIndex | returns the node's id by index |
getItemImage | gets URL of the item's image |
getItemParsingState | gets current parsing state of an item |
getItemText | returns the node's text |
getItemTooltip | gets item's tooltip |
getLevel | gets the node's level (position in the hierarchy) |
getOpenState | returns open/close state |
getParentId | returns the parent item's id |
getSelectedItemId | returns the selected item's id |
getSelectedItemText | returns the selected node's text |
getSubItems | returns a comma-delimited list of ids of all children nested on the sublevel in relation to the specified item |
getUserData | gets user data from the target node |
getXMLState | returns the current state of XML loading |
hasChildren | returns the number of children |
insertNewChild | creates a new node as a child to the specified one with parentId |
insertNewItem | creates a new node as a child to the specified one with parentId |
insertNewNext | creates a new node next to the specified one |
isItemChecked | gets the state of the node's checkbox |
isLocked | returns "true" if the item is locked |
load | loads data to the component via XML or JSON, usually data-values pairs |
loadCSV | loads tree from csv file/stream |
loadCSVString | loads tree from csv string |
loadJSArray | loads tree from js array object |
loadJSArrayFile | loads tree from js array file/stream |
loadJSON | loads tree from json file |
loadJSONObject | loads dhtmlxTree from a JSON object |
loadOpenStates | restores open nodes from cookie |
loadState | loads tree from cookie |
loadXML | loads tree from xml file |
loadXMLString | loads tree from xml string |
lockItem | locks/unlocks an item |
lockTree | locks tree |
makeAllDraggable | adds drag-n-drop capabilities to all HTML items with dragInDhtmlXTree attribute |
makeDraggable | adds drag-n-drop capabilities (with the possibility to drop into dhtmlxTree) to HTML object |
moveItem | moves an item (inside of tree) |
openAllItems | expands target node and all sub-nodes |
openAllItemsDynamic | expands target node and all child nodes (the same as openAllItems, but works in dynamic trees) |
openItem | expands a node |
openItemsDynamic | expands the list of nodes in dynamic tree (wait till the end of a node's loading before expanding the next one) |
openOnItemAdded | configures if parent node will be expanded immediately after a child item has been added |
parse | loads data from a local datasource (XML string, CSV string, XML island, XML object, JSON object, javascript array) |
preventIECaching | prevents caching in IE by adding a random value to URL string |
refreshItem | refreshes a tree branch from XML |
refreshItems | refreshes the specified tree nodes (gets XML from server and updates only the nodes included into itemIdList) |
registerXMLEntity | registers XML entity for replacement during the initialization (the default entities are: ampersand, less-than and greater-than symbols) |
restoreSelectedItem | restores the selected item from cookie |
saveOpenStates | saves open nodes to cookie |
saveSelectedItem | saves the selected item to cookie |
saveState | saves tree to cookie |
selectItem | selects the specified node (and optionally fires the onClick event) |
serializeTree | gets xml representation (as string) of tree |
serializeTreeToJSON | returns tree as json string |
setAttribute | sets an attribute for an item |
setCheck | sets the state of a node's checkbox |
setChildCalcHTML | sets children calculation prefix and postfix |
setChildCalcMode | sets children calculation mode |
setCustomSortFunction | sets custom sort function which has two parameters - id_of_item1,id_of_item2 |
setDataMode | sets a default data transfer mode |
setDragBehavior | sets Drag-And-Drop behavior (child - drop as child, sibling - drop as sibling, complex - complex drop behaviour) |
setEditStartAction | defines which events must start the process of editing |
setEscapingMode | sets escaping mode (used for escaping ID in requests) |
setIconSize | sets the size of icons |
setIconsPath | defines path to the icons folder |
setImageArrays | sets the images used for parent-child threads drawing (lines, plus, minus) |
setImagesPath | defines path to the imgs folder |
setItemCloseable | prevents a node from closing |
setItemColor | sets the color of the node's text |
setItemContextMenu | sets context menu for individual nodes |
setItemImage | sets item's icons (mostly useful for childless nodes) |
setItemStyle | sets an individual item's style |
setItemText | sets a new node's text (HTML is allowed) |
setItemTopOffset | sets the top offset for an item |
setListDelimeter | sets list separator ("," by default) |
setLockedIcons | sets an icon for locked items |
setSerializationLevel | configures XML serialization |
setSkin | set skin for the component |
setStdImages | sets default images for nodes (must be called before XML loading) |
setSubChecked | changes the state of the node's checkbox and all children checkboxes |
setUserData | sets user data for the target node |
setXMLAutoLoading | enables dynamic loading from XML |
setXMLAutoLoadingBehaviour | defines the mode of passing to the server the id of an item for which the data should be loaded during dynamic loading |
showItemCheckbox | shows/hides a checkbox for a tree item |
showItemSign | shows/hides (+/-) an icon |
smartRefreshBranch | refreshes the specified tree branch (gets XML from server, adds new nodes, removes unused nodes) |
smartRefreshItem | refreshes the specified tree item (gets XML from server, adds new nodes, removes unused nodes) |
sortTree | reorders items in the tree according to their text |
stopEdit | switches the item which is currently being edited back to normal view |
updateItem | updates item's properties |
onAllOpenDynamic | fires when all sub levels is loaded and opened |
onBeforeCheck | fires before an item is checked/unchecked |
onBeforeContextMenu | fires before the moment when a context menu appears on the right mouse click |
onBeforeDrag | fires when the item's dragging starts (the item is selected and the mouse is moving) |
onCheck | fires immediately after an item in the tree has been checked/unchecked |
onClick | fires when the text part of a tree item is clicked, but after the default onClick functionality has been processed |
onDblClick | fires right after a tree item has been double clicked, but before the default onDblClick functionality has been processed |
onDrag | fires when the item was dragged and dropped on some other item, but before item's moving has been processed |
onDragIn | fires when the item is dragged over some target the item can be dropped to |
onDrop | fires when drag-and-drop has already been processed; besides, fires when the nodes are moved programmatically |
onEdit | fires on 4 different stages of the editing process (see the details) |
onEditCancel | event occurs after cancelling edit by Escape key or other means |
onKeyPress | fires after each key press when tree is in focus |
onMouseIn | fires when the mouse pointer is hovered over an item |
onMouseOut | fires when the mouse pointer is moved out of item's area |
onOpenDynamicEnd | fires after the item defined in the openItemsDynamic() method opens |
onOpenEnd | fires right after an item in the tree has become open |
onOpenStart | fires right when an item in the tree starts to open, but before this item has opened |
onRightClick | fires when the user clicks the right mouse button |
onSelect | fires when selection in the tree was changed |
onXLE | fires when the data loading is finished and a component or data is rendered |
onXLS | fires when XML loading started |