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

 

posted @ 2018-05-03 20:57  锐洋智能  阅读(795)  评论(0编辑  收藏  举报