Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title></title>
- <link rel="stylesheet" href="">
- <style type="text/css">
- /*Now the CSS*/
- * {margin: 0; padding: 0;}
- .tree ul {
- padding-top: 20px; position: relative;
- transition: all 0.5s;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- }
- .tree li {
- float: left; text-align: center;
- list-style-type: none;
- position: relative;
- padding: 20px 5px 0 5px;
- transition: all 0.5s;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- }
- /*We will use ::before and ::after to draw the connectors*/
- .tree li::before, .tree li::after{
- content: '';
- position: absolute; top: 0; right: 50%;
- border-top: 1px solid #ccc;
- width: 50%; height: 20px;
- }
- .tree li::after{
- right: auto; left: 50%;
- border-left: 1px solid #ccc;
- }
- /*We need to remove left-right connectors from elements without
- any siblings*/
- .tree li:only-child::after, .tree li:only-child::before {
- display: none;
- }
- /*Remove space from the top of single children*/
- .tree li:only-child{ padding-top: 0;}
- /*Remove left connector from first child and
- right connector from last child*/
- .tree li:first-child::before, .tree li:last-child::after{
- border: 0 none;
- }
- /*Adding back the vertical connector to the last nodes*/
- .tree li:last-child::before{
- border-right: 1px solid #ccc;
- border-radius: 0 5px 0 0;
- -webkit-border-radius: 0 5px 0 0;
- -moz-border-radius: 0 5px 0 0;
- }
- .tree li:first-child::after{
- border-radius: 5px 0 0 0;
- -webkit-border-radius: 5px 0 0 0;
- -moz-border-radius: 5px 0 0 0;
- }
- /*Time to add downward connectors from parents*/
- .tree ul ul::before{
- content: '';
- position: absolute; top: 0; left: 50%;
- border-left: 1px solid #ccc;
- width: 0; height: 20px;
- }
- .tree li a{
- border: 1px solid #ccc;
- padding: 5px 10px;
- text-decoration: none;
- color: #666;
- font-family: arial, verdana, tahoma;
- font-size: 11px;
- display: inline-block;
- border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- transition: all 0.5s;
- -webkit-transition: all 0.5s;
- -moz-transition: all 0.5s;
- }
- /*Time for some hover effects*/
- /*We will apply the hover effect the the lineage of the element also*/
- .tree li a:hover, .tree li a:hover+ul li a {
- background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
- }
- /*Connector styles on hover*/
- .tree li a:hover+ul li::after,
- .tree li a:hover+ul li::before,
- .tree li a:hover+ul::before,
- .tree li a:hover+ul ul::before{
- border-color: #94a0b4;
- }
- /*Thats all. I hope you enjoyed it.
- Thanks :)*/
- </style>
- <script
- src="https://code.jquery.com/jquery-3.2.1.min.js"
- integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
- crossorigin="anonymous"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var idgen = 1;
- $('.pengaturan').hide();
- $('.tree').hide();
- /* untuk id defaultnya generate*/
- jQuery(document).on('click','.child',function(){
- var namaParent = $(this).data('nameparent') ;
- var parent = $(this).data('parent') ;
- var row = $(this).data('row') ;
- var id = $(this).data('id') ;
- $("#nameParent").html(namaParent);
- $("#parentinp").val(parent);
- $("#idinp").val(idgen++);
- $("#idsblm").val(id);
- $("#rowinp").val(row);
- });
- jQuery(document).on('click','#buatstruktur',function(){
- var namamanager = ($("#namamanager").val());
- $(".adefault").data("nameparent",namamanager);
- $(".adefault").html(namamanager);
- $('.tree').show();
- $(".pertamatampil").remove();
- $(".pengaturan").show();
- });
- jQuery(document).on('click','#tambahChild',function(){
- var namabawahan = ($("#namabawahan").val());
- var parent = parseInt($("#parentinp").val());
- var idinp = parseInt($("#idinp").val());
- var rowinp = parseInt($("#rowinp").val());
- tambahChild(parent,idinp,rowinp,namabawahan);
- });
- jQuery(document).on('click','#removeChild',function(){
- var idsblm = parseInt($("#idsblm").val());
- var rowinp = parseInt($("#rowinp").val());
- $(".uldefault").find('li:not(:first)').remove();
- /*if(idsblm != 0){
- $('.parent-'+idsblm).remove();
- }else{
- alert("Maaf Tidak Bisa Di Hapus");
- }*/
- });
- function tambahChild(p,i,r,namabawahan){
- /*p = parent, i = id, r = row*/
- /*<!-- untuk jika row tidak ketemu make tambah UL baru -->*/
- r = r+1;
- if($("ul#row-" + r+".parentul-"+p).length == 0){
- // alert("masuk if"+p);
- $(".parent-"+p).append('<ul id="row-'+(r)+'" class="parentul-'+p+'">'+
- '<li class="parent-'+(i)+'">'+
- '<a href="#" data-parent="'+i+'" data-id="'+i+'" data-row="'+r+'" data-nameparent="'+namabawahan+'" class="child posisi'+r+""+i+'">'+namabawahan+'</a>'+
- '</li>'+
- '</ul>');
- }else{
- // alert("R = "+r+" "+$("#row-" + r+""+p).length+" parent "+$(".parent-"+p).length);
- $("ul#row-"+r+".parentul-"+p).append('<li class="parent-'+(i)+'">'+
- '<a href="#" data-parent="'+i+'" data-id="'+i+'" data-row="'+r+'" data-nameparent="'+namabawahan+'" class="child posisi'+r+""+i+'">'+namabawahan+'</a>'+
- '</li>');
- }
- }
- });
- </script>
- </head>
- <body>
- <!--
- We will create a family tree using just CSS(3)
- The markup will be simple nested lists
- -->
- <div class="pengaturan">
- Atasan : <a href="#" id="nameParent"></a> <br>
- Nama Bawahan : <input type="text" value="" id="namabawahan" placeholder="Nama Bawahan"> <br>
- parent <input type="text" value="" id="parentinp" placeholder="parent"> <br>
- id <input type="text" value="" id="idinp" placeholder="id user yang ingin dibuat"> <br>
- id sebelum <input type="text" value="" id="idsblm" placeholder="id user bersangkutan"> <br>
- row <input type="text" value="" id="rowinp" placeholder="row saat ini"> <br>
- <button id="tambahChild">Tambah</button>
- <button id="removeChild">Hapus</button>
- </div><br>
- <div class="pertamatampil">
- <span>Berfungsi ketika pertama kali load input terlebih dahulu nama manager:</span><br>
- Nama Manager : <input type="text" id="namamanager" value="" placeholder="Nama Manager"><br>
- <button id="buatstruktur">Buat Struktur</button>
- </div>
- <div class="tree">
- <ul id="row-0" class="parentul-0 uldefault">
- <li class="parent-0">
- <a href="#" data-parent="0" data-id="0" data-row="0" data-nameparent="Parent" class="child adefault">Parent</a>
- </li>
- </ul>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement