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

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

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 30 积分

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

<link type="text/css" rel="stylesheet" href="css/jquery.jorgchart.css"/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<style>
.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;
}
</style>

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

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.jorgchart.js"></script>
<script 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 = $("<input type='text' class='mark' maxlength='8'/>");
        $('.add').find('p').eq(0).before(mark);
        $(".newAdd").unbind('click').click(function (){
        e.preventDefault();
            var str = '<li>新加块</li>';
            var str1 = '<ul><li>新加块</li><li>新加块</li><li>新加块</li></ul>';
            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();
            })
        });
}
</script>

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

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