树形组织结构图
第一、组织结构预览如下图:
第二、功能说明:
当鼠标点击左边某组织时,会把该组织下的所有成员添加到右边(排重);
当鼠标点击左边某成员时,会把该成员添加到右边(排重);
当鼠标点击"全选"时,会把所有组织的成员添加到右边(排重);
当鼠标点击"移除"时,会把右侧被选中的成员移除;
第三、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 2007-4-27
* @time 下午10:47:59
*
* 树状菜单(Menu)数据库定义.
* 利用MzTreeView1.0生成.
* 每个字段值中不可有冒号,不可以换行,
* 引号酌情考虑应不与节点字符串的引号相冲突
*
*/
@Entity
@Table(name="sys_menu")
public class Menu extends HibernateObject {
private static final long serialVersionUID = 9135605811004668162L;
//父节点ID,若已经是根节点则为0
private Long parentId;
//节点显示文本,根节点可空,表示不显示
private String text;
//节点提示说明
private String hint;
//节点的图标,对应的名字在类里的icons和iconsExpand定义,这里表示图片的名称pic.gif;picopen.gif格式
private String icon;
//节点挂的数据,如param=value¶m