Front-end JS development Framework-dhtmlx--dhtmlxtree

Introduced

Dhtmlxtree is a feature-rich JavaScript tree menu that allows you to quickly add a nice-looking, Ajax-based Web page to a hierarchical tree.

The TreeView supports online node editing, advanced drag-and-drop, tri-State checkboxes, and more. Due to special techniques, this JavaScript tree control can load big data quickly and efficiently.

Online Demo case

Online Source API

Characteristics:

　　Note that some features are available only in the Professional edition. The following API explains the features that are available in the Professional version of the Pro logo method

1. Cross browser compatibility (Chrome, Firefox, Google, Safari,ie) support IE6 OH

2. Support RTL

3. Support multiple data source formats (XML, JavaScript, JSON, CSV)

4. can be edited online

5. Server-side Integration Dhtmlxconnector

6. support Keyboard Direction key operation

7. Support Multi-Select

8. Support Right-click menu

9. Advanced Drag and drop function

10. Drag-and-drop interaction with Dhtmlxgrid

11. Comprehensive JS API

12. Dynamic loading of Big data

13. Intelligent XML Parsing

14. Intelligent rendering of Big data tree

Serialization of 15.xml

16. check box (two/three states, disable/Hide), radio button

17. Customizable look

18. Unlimited User node data

Chinese API

Method

Assignkeys(PRO)	Used to configure keyboard navigation keys
Attachevent	Adding custom events
Changeitemid	Change an item ID
Clearcut	Deselect the cut of a selected item
ClearSelection(PRO)	Deselect an item in the tree
Closeallitems	Collapse All nodes
Closeitem	Collapse a node
Deletechilditems	Delete all child nodes under a node
DeleteItem	Delete a node (a node and all child nodes)
destructor	Delete Tree and clear memory
DetachEvent	Delete a custom event
Disablecheckbox	Disable check box
Docut	Cut Selected items
Dopaste	Paste Selected Items
EditItem	Edit an item (by ID)
Enableactiveimages	So that the picture can be clicked or dragged, by default only text can be
enableautosavingselected(PRO)	Enable or disable automatic saving of selected nodes in a cookie
Enableautotooltips(PRO)	Turn on node tips for this article
Enablecheckboxes	Show or hide all check boxes
Enablecontextmenu(PRO)	Open the right-click menu
Enabledistributedparsing(PRO)	Turn on distribution resolution for Big data tree (partial timeout for project item loading section)
Enabledraganddrop	Turn on/off drag and drop
Enabledraganddropscrolling	Enable/disable automatic scrolling in a drag-and-drop operation
Enablehighlighting	Open the text highlight of the item (when the mouse is moved up)
Enableieimagefix	Replace the IMG tag with the background image to solve the picture cache problem under IE6
Enableimagedrag	Turning on the icon of a clicked item also allows you to drag the item (the default is only the text of the item)
Enableitemeditor	Open the text that allows you to edit an entry
Enablekeysearch(PRO)	Open items can be retrieved by keyword
Enablekeyboardnavigation(PRO)	Turn on the tree to navigate the keyboard
Enableloadingitem(PRO)	Turn on/off "Loading ..." Item
Enablemercydrag(PRO)	Do not delete items when dragging is turned on (copy does not move)
Enablemultilineitems(PRO)	Turn on text wrapping
Enablemultiselection(PRO)	Turn on multiple selection
Enablertl(PRO)	Turn on RLT mode
Enableradiobuttons(PRO)	Turn on the Use radio button
Enablesingleradiomode(PRO)	Turn on Radio mode
Enablesmartcheckboxes(PRO)	Turn on the Smart check box
Enablesmartrendering(PRO)	Turn on smart rendering mode
Enablesmartxmlparsing(PRO)	Enable/Disable Intelligent XML parsing mode
Enabletextsigns(PRO)	Replace a picture with a text marker (expand the collapsed icon)
Enablethreestatecheckboxes	Turn on the tri-State check box (Cascade Check parent node)
Enabletreeimages	Show/Hide tree node icon
Enabletreelines	Enable/disable line styles for a tree
FindItem(PRO)	Find an item by text, select and focus
Finditemidbylabel(PRO)	Find an item by text
Getallchecked	Returns a collection of all selected node IDs, separated by default separators
Getallcheckedbranches	Returns a collection of all selected check boxes and node IDs that are three-state check boxes, delimited by default separators
Getallchildless	Gets a collection of all child node IDs, delimited by default delimiter
Getallitemswithkids	Returns a collection of child node items, delimited by default delimiter
Getallpartiallychecked	Returns a collection of all selected and three-state check boxes for the node ID, delimited by default delimiter
Getallsubitems	Returns a nested collection of all sub-hierarchies (relative to the specified item)
Getallunchecked	The Return check box is not selected for the node collection, and the default delimiter separates
Getchilditemidbyindex	Get child Node ID by index
Getdistributedparsingstate(PRO)	Get the resolution of the current state distribution
Getindexbyid	Get the subscript of a node in a sub-collection by ID
Getitemcolor	Get the color of an item
Getitemidbyindex	Get the node ID from the node subscript
GetItemImage(PRO)	Get the path to a picture of a node
Getitemparsingstate(PRO)	Gets the resolution state of the current item
GetItemText	Get node text
Getitemtooltip	Gets the ToolTip for the item
Getlevel	Get node level (location hierarchy)
Getopenstate	Gets the state of the node opening and closing
Getparentid	Get parent Node ID
Getselecteditemid	Gets the selected Node ID
Getselecteditemtext	Get selected node text
Getsubitems	Returns the ID collection of the first-level child node
Getuserdata	Get User Data
Getxmlstate(PRO)	Gets the state of the currently loaded XML
HasChildren	Gets the number of child nodes
Insertnewchild	Insert a new child node
Insertnewitem	Insert New Item
Insertnewnext	Insert a new item next to the specified item
Isitemchecked	Gets the selected state of the item
isLocked(PRO)	Whether lock lock returns true
Loadcsv	To load a tree's data source from a CSV file
Loadcsvstring	A data source that loads a tree from a CSV string
Loadjsarray	To load a tree's data source from an array object
Loadjsarrayfile	To load a tree's data source from an array object file
Loadjson	To load a tree's data source from a JSON file
Loadjsonobject	To load a tree's data source from a JSON object
Loadopenstates(PRO)	Recovering an open node from a cookie
LoadState(PRO)	To load a tree from a cookie
LoadXML	To load a data source from an XML file
Loadxmlstring	To load a data source from an XML string
Lockitem(PRO)	Lock or unlock an item
Locktree(PRO)	Lock tree
Makealldraggable	Add drag-and-drop functionality to all tree nodes
Makedraggable	Add a drag-and-drop feature into an HTML object
MoveItem	Move one item (inside of tree)
Openallitems	Expand All nodes
Openallitemsdynamic(PRO)	Expand target node and all child nodes (the same as Openallitems, but works in dynamic trees)
OpenItem	Expand a Node
Openitemsdynamic(PRO)	Expand Dynamically loaded tree nodes (load end and expand)
openonitemadded(PRO)	When a child node is added to a node, the node becomes the expanded parent node
Preventiecaching	Prevent caching by adding random values to the URL
Refreshitem	Refreshing items from XML
Refreshitems(PRO)	Refreshes the specified node (updates only the specified content in the XML data source)
Registerxmlentity(PRO)	Replace entity content in XML when initializing (default Are:ampersand, Lessthen and greaterthen operator)
Restoreselecteditem(PRO)	Recover selected items from a cookie
Saveopenstates(PRO)	Save an open node to a cookie
Saveselecteditem(PRO)	Select Item to Cookie
SaveState(PRO)	Save to Cookie
SelectItem	Select the specified node
Serializetree(PRO)	Serializing the XML format into a tree
Serializetreetojson	Serializing the JSON format into a tree
SetCheck	Set the state of a node's check box
Setchildcalchtml(PRO)	Set the cross signs prefix and suffix text symbol (default [])
Setchildcalcmode(PRO)	Sets children calculation mode
Setcustomsortfunction(PRO)	Set a custom sort function with two parameters
Setdatamode	Set a default data transfer mode
Setdragbehavior(PRO)	Setting drag-and-drop behavior
Seteditstartaction	The procedure that defines which events must begin editing (double-click, or clicking)
Setescapingmode	Set encoding format (for escaping ID requests)
Seticonsize(PRO)	Setting the size of the icons
Seticonspath	Define the path to the Icons icon folder
Setimagearrays	Custom Tree's picture style (line, plus, minus)
Setimagespath	Define the path to the IMGs folder
Setitemcloseable	Block an item from shutting down
Setitemcolor	Set the color of item text
Setitemcontextmenu(PRO)	Set the context menu for individual items
SetItemImage	Set up a picture of an item
Setitemstyle	Set the style of individual items
Setitemtext	Set the text of a new node (which can be HTML)
Setitemtopoffset(PRO)	Set top offset for an item
Setlistdelimeter(PRO)	Sets the delimiter for list by default (",")
Setlockedicons(PRO)	Setting icons for locked items
Setserializationlevel(PRO)	Configuring XML Serialization
Setskin	Set Skin
Setstdimages	Set the default picture node (previously must be called XML load)
Setsubchecked	Set the check box state of the node and all child nodes
Setuserdata	Set user data for the target node
Setxmlautoloading	Allow dynamic loading of XML
Setxmlautoloadingbehaviour(PRO)	Dynamically load data uploaded to the server ID
Showitemcheckbox(PRO)	Show/Hide check boxes for an item of a tree node
Showitemsign(PRO)	Show/Hide (+/-) icon
Smartrefreshbranch(PRO)	Refreshes the specified subkey (gets XML from the server, adds a new node, deletes unused nodes)
Smartrefreshitem(PRO)	Refreshes the specified item (gets XML from the server, adds a new node, deletes unused nodes)
Sorttree(PRO)	Sort
Stopedit	Stop editing
UpdateItem(PRO)	Modify the properties of an item

Event

Onallopendynamic	triggered when all child nodes are loaded and open
Onbeforecheck	Trigger before selecting or unchecking an item
Onbeforecontextmenu	Triggered before the right mouse button menu
Onbeforedrag	Triggered when the item starts to drag (the item is selected and the mouse starts dragging)
OnCheck	Select or Uncheck events (check box)
OnClick	Click events
OnDblClick	Double-click event
Ondrag	Triggers when a specified item is dropped on a different item but before the item's motion is processed
Ondragin	Triggers when a specified item is dragged and dropped to an item
OnDrop	Fires when Drag-and-drop had already been processed; Besides, fires when the nodes is moved programmatically
OnEdit	4 different editing stages triggered: Before you start editing (can be canceled), after you start editing, finish editing (can be canceled), finish editing
Oneditcancel	Trigger after canceling edit
OnKeyPress	Trigger after keyboard key
Onmousein	Mouse Up Trigger
onmouseout	The mouse leaves the area of the item to trigger
Onopendynamicend	Triggered after the Openitemsdynamic method of the item is triggered
Onopenend	Trigger when an item is opened
Onopenstart	Trigger before an item is opened
Onrightclick	Right-click Trigger
OnSelect	Trigger after selecting an item
Onxle	XML is loaded and triggered after a set of data is rendered
Onxls	triggered when XML load starts

back to navigation page

Front-end JS development Framework-dhtmlx--dhtmlxtree