树形组织结构图

树形组织结构图

第一、组织结构预览如下图：

 第二、功能说明：

当鼠标点击左边某组织时，会把该组织下的所有成员添加到右边（排重）；

当鼠标点击左边某成员时，会把该成员添加到右边（排重）；

当鼠标点击"全选"时，会把所有组织的成员添加到右边（排重）；

当鼠标点击"移除"时，会把右侧被选中的成员移除；

第三、java script代码实现如下：

//添加成员
    function addUser(id, name) {
        var oOption = document.createElement("OPTION");
        oOption.text = name;
        oOption.value = id;
        var oSelect = window.parent.document.getElementById("groupdest");
        if (!checkById(id, name)) {
            oSelect.add(oOption);
        } 
    }

//添加组织
    function addGroup(id, ids, names) {
        if (ids == "") {
            return;
        }
        var idArr = ids.split(",");
        var nameArr = names.split(",");
        var len = idArr.length;
        for (var i = 0; i < len - 1; i ++) {
            addUser(idArr[i], nameArr[i]);
        }
    }

//检查是否已经添加过
    function checkById(id, name) {
        var oSelect = window.parent.document.getElementById("groupdest");
        var bContains = false;
        for (var i = 0; i < oSelect.length; i++) {
            if (oSelect.options[i].value == id || oSelect.options[i].text == name) {
                bContains = true;
            }
        }
        return bContains;
    }

//移除用户

function removeUser() {
        var oSelect = document.getElementById("groupdest");
        for (var i = 0; i < oSelect.length; i++) {
            var option = oSelect.options[i];
            if (option.selected == true) {
                oSelect.remove(i);
                return;
            }
        }
    }

第四：树状组织结构图的MzTreeView-1.0动态实现的Table

/**
 *
 */
package com.daniel.lr.crbt.share.db;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;

import org.hibernate.validator.Pattern;

/**
 * @author Daniel Cao
 * @date