dhtmlxtree 如何得到xml,json等文件中的自定义的属性值
先看代码:
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
Methods
| 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 |
Events
| 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 |
浙公网安备 33010602011771号