Dynamic Tree Table Plugin With jQuery - QiangTableTree

QiangTableTree is a jQuery plugin which helps you render a configurable, collapsible tree table from dynamic data sets you define in the JavaScript.

How to use it:

1. Include the required JavaScript and Stylesheet on the webpage.

<link href="jquery.qtt.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.qtt.min.js"></script>

2. Include a theme CSS of your choice on the webpage.

<link href="skin/default.css" rel="stylesheet">
<!-- OR -->
<link href="skin/blue.css" rel="stylesheet">
<!-- OR -->
<link href="skin/YOUR_CUSTOM.css" rel="stylesheet">

3. Create the html for the tree table.

<div id="qiang-table-tree" class="qiang-table-tree">
  <!--start of QTTHeader-->
  <div class="QTTHeader">
      <div class="treeHeaderBox">
        <span class="tLabel">Country</span>
        <ul class="tValue">
        </ul>
      </div>
  </div>
  <!--end of QTTHeader-->
  <!--start of QTTContainer-->
  <div class="QTTContainer">
  </div>
  <!--end of QTTContainer-->
</div>

4. Define your own data in the JavaScript.

var treeData = {
    name:'Table Name',
    value:{},
    children:[
      {
        name:'Data A',
        value:{},
        children:[]
      },
      {
        name:'Data B',
        value:{},
        children:[]
      },
      {
        name:'Data C',
        value:{},
        children:[]
      }
    ]
};

5. Initialize the tree table and done.

var instance = window.QTT.qiangTableTree({
    TreeBox: $('#qiang-table-tree')
});

6. More plugin options with default values.

var instance = window.QTT.qiangTableTree({

    createNodeIconHTML: function( nodeObj ){
      return '';
    }, 

    createNodeNameHTML: function( nodeObj ){
      return nodeObj.name ;
    },    

    createNodeBarHTML: function( nodeObj ){
      return '' ;
    },    

    createNodeValueHTML: function( nodeObj ){
      return '' ;
    },

    findNodeContent: function( nodeObj , keyword ){
      return _findNodeContent( nodeObj , keyword );
    }
    
});

7. API methods.

// get node by id
instance.getNodeByID( nodeID );

// get dom node by id
instance.getDomNodeByID( nodeID );

// shrink all nodes
instance.shrinkAllNode();

// expand all nodes
instance.expandAllNode();

// expand a node you specify
var nodeID = 3 ;
instance.expandToNode( nodeID );

var nodeArray = [ 3 , 10 , 12 ] ;
instance.expandToNode( nodeArray );

// select a node
var nodeID = 3 ;
instance.selectNode( nodeID );

var nodeArray = [ 3 , 10 , 12 ] ;
instance.selectNode( nodeArray );

// cancel selected node
var nodeID = 3 ;
instance.cancelSelectNode( nodeID );

var nodeArray = [ 3 , 10 , 12 ] ;
instance.cancelSelectNode( nodeArray );

// cancel all selected nodes
instance.cancelAllSelectNode();

// update the tree
instance.updateTree( treeData ); 

// get tree data
instance.getTreeData();

// add nodes
instance.addNode( parentNodeID , newNodeObj );

// edit a node
instance.newNodeObj( nodeID , editedNodeObj );

// delete a node
instance.deleteNode( nodeID );

// search a node
var keyword = 'Football' ;
var resultArray = instance.findNode( keyword );

// Highlight the result of find
instance.highlightNode( resultArray );

// Expand to the tree nodes of find keyword
instance.expandToNode( resultArray );

// search node by name
var keyword = 'BasketBall' ;
var resultArray = instance.findNodeByName( keyword );

// search node by value
var value = 1982 ;
var resultArray = instance.findNodeByValue( value );

// highlight nodes
var nodeIDArray = [ 1 , 3 , 12] ;
instance.highlightNode( nodeIDArray );

// get node id by dom object
instance.getNodeIdByDomObj();

 

---

This awesome jQuery plugin is developed by ilinkit. For more Advanced Usages, please check the demo page or visit the official website.