可增加删除编辑的组织结构图

可增加删除编辑的组织结构图

可增加删除编辑的组织结构图

一款可增加、删除、编辑的组织结构图,类似于树形结构,点击每个组织成员,可以在输入框内输入内容然后点击增加即可修改内容,如果不输人内容直接点击增加,则在此成员下添加新的分支,适合做公司的组织结构图等等,喜欢的童鞋请收下吧。

源码介绍

页面的head部分,先引入两个CSS样式文件,然后设置好页面部分元素的样式,代码如下:

 type="text/css" rel="stylesheet" href="css/jquery.jorgchart.css"/> 
 type="text/css" rel="stylesheet" href="css/custom.css"/> 
> 
.jOrgChart .node{ 
    line-height: 60px; 

.add{ 
    display: none; 

.add p{ 
    width: 90px; 
    height: 32px; 
    line-height: 32px; 
    font-size: 14px; 
    text-align: center; 
    color: #fff; 
    background: #00a0e9; 
    float: left; 
    margin-left: 25px; 
    cursor: pointer; 

.add input{ 
    padding: 0; 
    padding-left: 5px; 
    margin-left: 25px; 
    float: left; 
    width: 120px; 
    height: 32px; 
    border: 1px solid #ccc; 

               

接着引入jQuery库和两个JS文件,并设置好结构交互的事件响应,代码如下:

 type="text/javascript" src="js/jquery.min.js"> 
 type="text/javascript" src="js/jquery-ui-1.11.0.js"> 
 type="text/javascript" src="js/jquery.jorgchart.js"> 
 type="text/javascript"> 
jQuery(document).ready(renderTree.bind(null,rightClick)); 
 
function renderTree(cb){ 
    $("#org").jOrgChart({ 
        chartElement: '#chart'
        dragAndDrop: true 
    }); 
    setTimeout(function(){ 
        cb && cb(); 
    }
} 
function rightClick(){ 
 
    $('.node').on('click',function(e){ 
        $(".add").show(); 
        var that = this
        $(".add").children('input.mark').remove(); 
        var mark = $(""); 
        $('.add').find('p').eq(0).before(mark); 
        $(".newAdd").unbind('click').click(function (){ 
        e.preventDefault(); 
            var str = '
  • 新加块
  • '

                var str1 = '
    • 新加块
    • 新加块
    • 新加块
    '

                var tableDivs = $(`.jOrgChart div:contains("${$(that).text()}")`); 
                var index = tableDivs.index($(that)); 
                var text = $(that).text().trim(); 
                var sourceLis = []; 
     
            $(`#org li`).each(function(index,item){ 
                if($(item).text().trim().indexOf(text) === 0){ 
                    sourceLis.push($(item)); 
                }
            }); 
            sourceLi = sourceLis[index]; 
                if(sourceLi.children().length === 0{ 
                    sourceLi.append(str1); 
                }else{ 
                    sourceLi.children().children('li:last').after(str); 
                }
                    $('.jOrgChart').remove(); 
                    renderTree(rightClick); 
                $(".add").hide(); 
            }); 
            $(".newDel").unbind('click').click(function () { 
                e.preventDefault(); 
                var sourceLi1 = $(`#org li:contains("${$(that).text()}")`).last(); 
                sourceLi1.remove(); 
                $('.jOrgChart').remove(); 
                renderTree(rightClick); 
                $(".add").hide(); 
            }); 
            $('.mark').unbind('click').blur(function(){ 
                e.preventDefault(); 
                var sourceLi1 = $(`#org li:contains("${$(that).text()}")`).last(); 
                var attext = $(that).text(); 
                var athtml = $(sourceLi1).html(); 
                    var val =  $(this).val(); 
                    var str1 =attext.trim(); 
                    var str2 = athtml.replace(str1,val); 
                    $(sourceLi1).html(str2); 
                    $('.jOrgChart').remove(); 
                    renderTree(rightClick); 
                    $(".add").hide(); 
                }
            }); 
    } 

                   

    页面的body部分,分为3个部分:最上面的一个div时点击编辑时的交互,中间的ul是页面初始的组织结构数据,最下面的div是显示数据生成table后的容器,代码如下:

     class="add"> 
         class="newAdd">增加

     
         class="newDel">删除

     
         style="padding-left: 30px;color: black "> 输入框空时增加块,有内容时修改当前块值 
     
     id="org" style="display:none"> 
        > 
            来自星星的你 
            > 
                 id="beer">都敏俊 
                    > 
                        >古代千颂伊 
                        >张英牧 
                     
                 
                >千颂伊 
                    > 
                        >李辉京 
                        >刘世美 
                     
                 
             
         
     
     id="chart" class="orgChart" >


    分享到 :

    发表评论

    登录... 后才能评论