Understanding the Basic Use of the aCollapTable-master function

A. What Will I Learn?

What's is a aCollapTable-master
How to download and install aCollapTable-master
Understand the function code for the functioning of aCollapTable-master function

B. Requirements

Applications for web editing programming like Notpad, notpad, ++ etc.
You already have aCollapTable-master function.

C. Difficulty

Basic

D. Tutorial Contents

1. What Is aCollapTable-master

aCollapTable- master is a function that can be used to create a table tree, in other words aCollapTable-master can be used for tables that have more tables, with aCollapTable-master table in the main table can be hidden and also tamilkan.

- example:
If we create a table of countries where there are in the country table there are names of cities, as we see below.

2. How to download and install.
a. Download
the first stage of the use of the aCollapTable-master function is to prepare its function, if you have not yet memorized its function you can download it in aCollapTable-master as for the phases of application download stage you can see below:

Open the link https://github.com/filamentgroup/collapsible,
Clicking the clone or download button, and then click download zip, and wait until the download is complete.
Create a new folder and extract the .zip file to that folder.

b. Install
After the forder finished downloading, then we make we must have to create html file to call call css and java script from aCollapTable-master, as for the stages in making its html function is as follows.

Create new file and Create basic basic structure of html.


<html>
     <head>
      <title> aCollapTable-master  </title>
     </head>
    <body>
     ......  
    </body>
</html>

2. Create function for CSS calling. and put it under < /title>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="aCollapTable-master/jquery.aCollapTable.js"></script>

3.Create a Javascrpt function. and place it in the </head> top


<script>
        $(document).ready(function(){
            $('#demo-1').aCollapTable({
                startCollapsed: true,
                addColumn: false,
                   plusButton: '<i class="glyphicon glyphicon-plus"> </i&gt ;', 
                  minusButton: '<i class="glyphicon glyphicon-minus"> </i&gt ; ' ,
            });         
        });
 <script>

4. Create a table function and place it in < body >


<div class="container">
        <div role="tabpanel">
                 <div class="tab-content" >
                        <div role="tabpanel" class="tab-pane active" id="result-1">
                            <table class="table table-hover" id="demo-1" style="padding-top=10px">
                                <thead>
                                    <tr>
                                        <th>TABLE </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-id="1" data-parent="">  <td>table 1</td> </tr>
                                        <tr data-id="2" data-parent="1"> <td>sub table 1-1 </td> </tr>
                                        <tr data-id="3" data-parent="1"> <td>sub table 1-2</td> </tr> 
                                        <tr data-id="3" data-parent="1"> <td>sub table 1-3</td></tr>
                                    <tr data-id="4" data-parent=""> <td>table 2 </td> </tr>
                                        <tr data-id="5" data-parent="4"> <td>sub table 2-1</td>  </tr>
                                        <tr data-id="6" data-parent="5"> <td>sub table 2-2</td> </tr>
                                        <tr data-id="7" data-parent="5"> <td>sub table 2-3</td> </tr>
                                    <tr data-id="8" data-parent=""> <td>table 3 </td> </tr>
                                        <tr data-id="9" data-parent="8"> <td>sub table 2-1</td>  </tr>
                                        <tr data-id="10" data-parent="9"> <td>sub table 2-2</td> </tr>
                                        <tr data-id="11" data-parent="10"> <td>sub table 2-3</td> </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

5. Save it with the .html format And open it through your web browser

3. Explanation of the Code aCollapTable-maste

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="aCollapTable-master/jquery.aCollapTable.js"></script>
The purpose of this function is to call all the functions of javascript and css, which will be declared in the table

$('#demo-1').aCollapTable({ =Declare a table with a demo id
startCollapsed: true, = this function states the state of the table when the link is -
opened if the condition startCollapsed in true condition then the table in the show only the core of the table and otherwise the table will be in show all.
addColumn: false, = this function aims to create a table structure such as rung when in show
- plusButton: '<i class="glyphicon glyphicon-plus"> </i&gt ;', = Creating a "+" Display When the Table is Closed
- minusButton: '<i class="glyphicon glyphicon-minus"> </i&gt ; ' . = Creating a "-" Display When the Table is opened
id="demo-1" = function id of this table class is to to call class id that we have created above.

E. Curriculum

To know more about aCollapTable-master you can visit:
The source of the tutorial is github

Posted on Utopian.io - Rewarding Open Source Contributors