Jquery.treetable Use and asynchronous loading

Usage

1 GitHub Address https://github.com/ludo/jquery-treetable/

2 API Address http://ludo.cubicphuse.nl/jquery-treetable/

3 JQuery website Link http://plugins.jquery.com/treetable/

Introduce code:

<link href= "Path/to/jquery.treetable.css" rel= "stylesheet" type= "Text/css"/> <script src= "path/to/ Jquery.treetable.js "></script> <script> $ (" #your_table_id "). Treetable (); </script>

Precautions:

1 show the tree in the table, each TR must have the Data-tt-id attribute, and the attribute value must be unique

When you

pasted the above code and adjusted it to reflect your situation, you enabled the possibility of displaying A tree in your table. The tree actually display as a tree you has to add Data-tt-id and Data-tt-parent-id attributes to your table rows (TR).

2 Each child node must have a Data-tt-parent-id property, and the value of Data-tt-parent-id must be equal to the Data-tt-id value of the parent node
3 The presentation of the rows in the table must be in the order in which the trees are expanded, that is, the list must be ordered and consistent with the order in which the trees unfold

Please note that the plugin expects the "the rows in the" HTML table to is in the

same order in which they should is DISPL Ayed in the tree. For example, suppose you has three nodes:a, B (Child of Node A) and C (Child of Node B). If you create rows for these nodes in your HTML table in the following order A-c-B and then the tree would not display cor rectly.

you have a to do sure that the rows is in the order a-B-C.

Table HTML code example:

<table>   <tr data-tt-id= "1" >     <td>Parent</td>   </tr>   <tr Data-tt-id= "2" data-tt-parent-id= "1" >     <td>Child</td>   </tr> </table>

ConfigurationSettings

Setting	Type	Default	Description
Branchattr	String	"Ttbranch"	Optionally, force the open node's expand icon to allow a node without a son node to be defined as a branch node, which is presented in HTML as a Data-tt-branch attribute.
Clickablenodenames	bool	False	Default False, click the expand icon to open the child node. When set to True, clicking the node name also opens the child node.
Column	Int	0	The number of columns in the table to be displayed as trees.
Columneltype	String	"TD"	The category of cells that are displayed as trees (TH,TD or both).
Expandable	bool	False	Whether the tree can be expanded, the tree that can be expanded contains the expand/collapse button.
Expandertemplate	String	<a href= "#" >&nbsp;</a>	Expands the HTML fragment of the button.
Indent	Int	19	The number of pixels to indent per branch.
Indentertemplate	String	<span class= "Indenter" ></span>	HTML fragment of the collapse button
Initialstate	String	"Collapsed"	Initial state, optional value: "Expanded" or "collapsed".
Nodeidattr	String	"Ttid"	The name of the data property used to identify the node. In the HTML with Data-tt-id embodiment.
Parentidattr	String	"Ttparentid"	The name of the data property that sets the parent node is used. In the HTML with Data-tt-parent-id embodiment.
Stringcollapse	String	"Collapse"	The title of the folding button, internationalized use.
Stringexpand	String	"Expand"	Expand the title of the button and use it internationally.

Events

Setting	Type	Default	Description
OnInitialized	function	Null	The callback function after the tree has been initialized.
Onnodecollapse	function	Null	The callback function when the node collapses.
Onnodeexpand	function	Null	The callback function when the node expands.
Onnodeinitialized	function	Null	callback function after node initialization is complete

Public Apiplugin Function

Treetable ()

The Treetable () method can pass in the following parameters:

Options (optional): A JS object that describes the configuration.

Force (optional): Forces the reinitialization of the tree when the parameter is true.

Additional Functions

For some methods of tree manipulation, additional methods must be called through the Treetable () method. Eg: Collapse id=42 node, $ ("#tree"). Treetable ("Collapsenode", "42").

CollapseAll (): Collapse all nodes

Collapsenode (ID): Collapse A single node, identified by ID.

ExpandAll (): Expand all nodes at once.

Expandnode (ID): Expand A single node, identified by ID.

Loadbranch (node, rows): Inserts a new row into the tree (<tr>s), passes in the parameter node as the parent node, and rows is the row to be inserted . If the parent node is null, the new row is inserted as the parent node

Move (NodeId, DestinationId): Move node nodeId to new parent with DestinationId.

Node (ID): Select a node from the tree. Returns a treetable.node object.

RemoveNode (ID): Removes a node and all its child nodes from the tree

Reveal (ID): Show a node in the tree

Sortbranch (node)

Sortbranch (node, columnorfunction): Sorts all child nodes of a node based on alphabetical order. Defaults to sorting on the values in the configured tree column (see Settings). Pass an optional column number or sorting function as the second argument columnorfunction. See the tests for examples of custom sorting functions. Does not recursively sort children of children.

Unloadbranch (node): Remove nodes/rows (HTML <tr>s) from the tree, with parent node. Note that the parent (node) won't be removed.

Classes

HTML TR class:

Expanded: Identity node is expanded

Collapsed: Identity node is collapsed

Branch: Branch node, having child nodes or owning Branchattr property

Leaf: leaf node, No child nodes

Examples

Basic Static Tree:

$ ("#example-basic-static"). Treetable ();

Basic Expandable Tree

$ ("#example-basic-expandable"). Treetable ({expandable:true});

Complex Tree with Drag and Drop

$ ("#example-advanced"). Treetable ({expandable:true}); Highlight selected Row $ ("#example-advanced tbody"). On ("MouseDown", "tr", function () {$ (". Selected"). (). Remo   Veclass ("selected"); $ (this). Toggleclass ("selected");  }); Drag & Drop Example Code $ ("#example-advanced. File, #example-advanced. Folder"). Draggable ({helper: "clone", O  Pacity:. Refreshpositions:true, revert: "Invalid", revertduration:300, scroll:true});  $ ("#example-advanced. Folder"). each (function () {$ (this). Parents ("#example-advanced tr"). Droppable ({accept: ". File,       . Folder ", Drop:function (E, UI) {var Droppedel = ui.draggable.parents (" tr ");     $ ("#example-advanced"). Treetable ("Move", Droppedel.data ("Ttid"), $ (this). Data ("Ttid"));       }, Hoverclass: "Accept", Over:function (E, UI) {var Droppedel = ui.draggable.parents ("tr"); if (this = droppedel[0] &&!$ (this). is (". Expanded")) {$ ("#example-advanced"). Treetable ("ExpandnodE ", $ (this). Data (" Ttid ")); }     }   }); });

  Asynchronous loading:

$ ("#treetable"). Treetable ({expandable:true,//show initialstate: "Expanded",//Open all nodes by default stringcollapse: ' Off ', Stringexpand: ' Unfold ', onnodeexpand:function () {//branch expansion after the callback function var node = this;///Determine if the current node already has a child node var childsize = $ ("#treetabl E "). Find (" [data-tt-parent-id= ' "+ node.id +" '] "). Length;  if (Childsize > 0) {return; } var data = "pageid=" + node.id; Render Loader/spinner while loading loads when rendering $.ajax ({loading:false, sync:false,//must be false, otherwise loadbranch Happens after Showchildren? Url:context + "/document/loadchild.json", Data:data, success:function (Result) {if (0 = = Result.code) {if (!com.isnull (r Esult.body) {if (0 = = eval (result.body[' chilpages '). Length) {//No child nodes var $tr = $ ("#treetable"). Find ("[data-tt-id= '" + Node.id + "']"); $tr. attr ("Data-tt-branch", "false");//Data-tt-branch marks whether the current node is a branch node, which takes effect when the tree is initialized $tr. Find ("Span.indenter"). HTML ("") ;//Remove the expand icon return; } var rows = this.getnereatehtml (result.body[' chilpages '); $ ("#treetable"). Treetable ("Loadbranch", noDE, rows);//Insert child node $ ("#treetable"). Treetable ("Expandnode", node.id);//Expand child nodes}}else{alert (Result.tip);}}   }); } });

Using treetable with Persistjs

Https://github.com/jughead/jquery-treetable-ajax-persist/blob/master/example/index.html

<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.9.1.min.js" ></script> <script Type= "Text/javascript" src= ". /src/javascripts/jquery.treetable-ajax-persist.js "></script> <script type=" Text/javascript "src=". /src/javascripts/jquery.treetable-3.0.0.js "></script> <script type=" Text/javascript "src=". /src/javascripts/persist-min.js "></script> <link href=". /src/stylesheets/jquery.treetable.css "media=" All "rel=" stylesheet "type=" Text/css "/> $ (" #treetable "). Agikitreetable ({//Treetable & Persistjs  

Jquery.treetable Use and asynchronous loading