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>
<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>
<script>
$(document).ready(function(){
$('#demo-1').aCollapTable({
startCollapsed: true,
addColumn: false,
plusButton: '<i class="glyphicon glyphicon-plus"> </i> ;',
minusButton: '<i class="glyphicon glyphicon-minus"> </i> ; ' ,
});
});
<script>
<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>
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 idstartCollapsed: 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> ;',= Creating a "+" Display When the Table is Closed
-minusButton: '<i class="glyphicon glyphicon-minus"> </i> ; ' .= Creating a "-" Display When the Table is openedid="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
Your contribution cannot be approved because it does not follow the Utopian Rules. You need to focus on technical aspects and not just on basic projects.It is clearly against the rules of Utopian. Thank you for your understanding!
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @princewahaj, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit