树形组织结构图
第一、组织结构预览如下图:
第二、功能说明:
当鼠标点击左边某组织时,会把该组织下的所有成员添加到右边(排重);
当鼠标点击左边某成员时,会把该成员添加到右边(排重);
当鼠标点击"全选"时,会把所有组织的成员添加到右边(排重);
当鼠标点击"移除"时,会把右侧被选中的成员移除;
第三、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