Front-end JS development Framework-dhtmlx--dhtmlxtree

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.