deptTree

最新推荐文章于 2023-07-22 18:32:11 发布

最新推荐文章于 2023-07-22 18:32:11 发布 · 652 阅读

文章标签：

#Dojo #Yahoo #JavaScript #DWR #JSP #ViewUI

JS/AJAX 专栏收录该内容

13 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link type="text/css" rel="stylesheet"
href="<c:url value="/styles/dojoTable.css"/>">
</head>
<body>
<%@include file="/common/yahooUi.jsp"%>
<link type="text/css" rel="stylesheet" href="templates/dojo.css">
<link type="text/css" rel="stylesheet" href="<c:url value='/styles/style.css'/>">
<script src="<c:url value='/js/prototype.js'/>" type="text/javascript"></script>
<script src="<c:url value='/js/dojo/dojo.js'/>" type="text/javascript"></script>
<script src="<c:url value="/dwr/interface/deptDojoAction.js"/>"
type="text/javascript"></script>
<script src="<c:url value="/dwr/engine.js"/>" type="text/javascript"></script>
<script src="<c:url value="/dwr/util.js"/>" type="text/javascript"></script>

<script>
YAHOO.namespace("dept.dlg");

dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");

dojo.require("dojo.widget.*");
dojo.require("dojo.collections.*");
dojo.require("dojo.ex.FilteringTableEx");

/**
* 设置根目录style，并且加载第一级目录
*/
dojo.addOnLoad(function() {
//初始化YahooUI对话框
YAHOO.dept.dlg.Editor = new YAHOO.widget.Dialog("editDeptDlg", {visible:false,
modal:true,
shadow:false,
close: true,
fixedcenter : true ,
width:"300px" } );
YAHOO.dept.dlg.Editor.render();
YAHOO.dept.dlg.manager = new YAHOO.widget.OverlayManager();
YAHOO.dept.dlg.manager.register([YAHOO.dept.dlg.Editor]);
YAHOO.dept.dlg.Editor.beforeHideEvent.fire = resetDlg;//对话框关闭之前的事件。
//设置根节点style
var rootNode = dojo.widget.manager.getWidgetById('root');
rootNode.childIcon.style["width"] = "14px";
rootNode.childIcon.style["height"] = "14px";
//加载第一级目录
loadRemoteChildren(rootNode);

//注册菜单事件
dojo.event.topic.subscribe('treeContextMenuCreate/engage',
function (menuItem) { createClicked( menuItem.getTreeNode()); });

dojo.event.topic.subscribe('treeContextMenuRemove/engage',
function (menuItem) { removeClicked( menuItem.getTreeNode()); });

dojo.event.topic.subscribe('treeContextMenuEdit/engage',
function (menuItem) { editClicked( menuItem.getTreeNode()); });

dojo.event.topic.subscribe('treeContextMenuRefresh/engage',
function (menuItem) { refreshClicked(menuItem.getTreeNode());});
}
);

/**
* 新建部门菜单事件
*/
function createClicked(treeNode) {
var dlgTextNode = document.getElementById("dlgHead");
dlgTextNode.innerHTML = treeNode.title + '--' + '<fmt:message key="global.new" />';

$('parentId').value = treeNode.objectId;
$('treeNodeId').value = treeNode.widgetId;

YAHOO.dept.dlg.Editor.show();
}

/**
* 编辑目录菜单事件
*/
function editClicked(treeNode) {
deptDojoAction.get(treeNode.objectId, function(dept){

var dlgTextNode = document.getElementById("dlgHead");
dlgTextNode.innerHTML = treeNode.title + '--' + '<fmt:message key="global.edit" />';

DWRUtil.setValue("treeNodeId", treeNode.widgetId);
DWRUtil.setValue("name", dept.name);
DWRUtil.setValue("id", dept.id);
DWRUtil.setValue("descn",dept.descn);

YAHOO.dept.dlg.Editor.show();
});
}

/**
* 删除部门菜单事件
*/
function removeClicked(treeNode) {
if(confirm('<fmt:message key="global.delete.warn"/>')) {
deptDojoAction.removeDept(treeNode.objectId,
function() {
if(!treeNode.children || treeNode.children.length == 0){
treeNode.tree.removeNode(treeNode);
} else {
alert('<fmt:message key="dept.delete.warn"/>');
}
});
}
}

/**
* 在给定的父节点下，建立子节点.
*/
function buildChildNode(parent, nodeData) {
node = dojo.widget.createWidget(parent.widgetType, nodeData);
node.childIconSrc = '<c:url value="/images/icons/foldericon.png"/>';
//isFolder是node一个内置属性，缺省为false在树中是不会显示的，为true时才会显示出来
node.isFolder = true;
parent.addChild(node);
node.childIcon.style["width"] = "16px";
node.childIcon.style["height"] = "16px";

return node;
}

/**
* 根据给定的父节点，展开子节点。远程调用DWR函数。
*/
function loadRemoteChildren(parent) {

deptDojoAction.getDeptsByParentId(parent.objectId, function(children) {
for(var i=0; i<children.length; i++) {
buildChildNode(parent, children[i]);
}
parent.state = parent.loadStates.LOADED;
});
parent.expand();
}
/**
* 展开子节点
*/
function getChildren(node, sync, callObj, callFunc) {
nodeJSON = this.getInfo(node);
var children = loadRemoteChildren(node);
$('deptMsg').style.display = 'none';
}

/**
* 调用DWR函数，保存编辑结果
*/
function onSave() {

var formValues = DWRUtil.getValues("editDeptFrm");

if(formValues.id == "" || !formValues.id){//当id不存在时，表示新建
deptDojoAction.saveDept(formValues.parentId,
{name: formValues.name,
descn: formValues.descn},
function(newId) {
var treeNode = dojo.widget.byId(formValues.treeNodeId);
if(treeNode) {//当前节点下加入一个新节点
if(treeNode.state == treeNode.loadStates.LOADED) {
var child =
buildChildNode(treeNode, {title:formValues.name,
objectId:newId,
isFolder:true});
//child.isFolder = true;
}
}

});
}
else { //如果id存在则表示更新
deptDojoAction.updateDept({id: formValues.id,
name: formValues.name,
descn: formValues.descn},
function(id){
var treeNode = dojo.widget.byId(formValues.treeNodeId);
if(treeNode) {//更新节点
treeNode.edit({title:formValues.name});
}
});
}

YAHOO.dept.dlg.Editor.hide();
}

/**
* 刷新树形节点
*/
function refreshClicked(node) {
//更新当前节点
deptDojoAction.get(node.objectId, function(dept) {
node.edit({title: dept.name, objectId: dept.id})
});
//如果没有子节点，则直接返回
if(!node.children || node.children.length == 0) {
return;
}
//首先要删除所有子节点，删除的时候要将子节点们复制到一个数组
//如果不这样，而采用dojo.lang.forEach(node.children...
//则相当于修改了循环下标
var nodes = new Array;
for(i = 0; i < node.children.length; i ++) {
//hasChildren用于标记节点是否已经展开，如果展开则加载子节点，但是，本次并未实现该功能
nodes[i] = {body : node.children[i],
hasChildren : (node.children[i].chilren && node.children[i].chilren.length > 0)};
}
dojo.lang.forEach(nodes, function(elem){elem.body.tree.removeNode(elem.body);});
//重新加载子节点
loadRemoteChildren(node);
}
/**
* 移动（Drag and Drop）一个节点到新的节点下
*/
function moveNode(child, newParent, index) {
alert("childId=" + child.objectId + ";\nnewParentId=" + newParent.objectId + ";\nIndex=" + index);
}

var files = new dojo.collections.ArrayList();

function dblselect(message) {
alert();
}
/**
* 选中一个节点的时候触发的事件。
*/
function onSelectNode(message) {
var node = message.source;
var e = message.event;
var table = dojo.widget.byId('files');
if(node) {
//alert(node.objectId + node.object);
$('deptMsg').style.display = 'block';
//$('deptDesc').innerHTML = node.object;
DWRUtil.setValue('deptDesc',node.object);
//var aa="";
deptDojoAction.getDeptsNameByParentId(node.objectId, function(children) {
for(var i=0; i<children.length; i++) {
var file = {};
file.filename = children[i];
files.add(file);
}
//alert(aa);
table.store.setData(files.toArray());
files.clear();
});

}

doSelect(message, 'treeSelector');//使Tree恢复选中状态
}

/**
* Copy dojo的源代码，使得Tree恢复选中状态
*/
function doSelect(message, treeSelectorId) {
var node = message.source;
var e = message.event;

var selector = dojo.widget.byId(treeSelectorId);
if (selector.selectedNode === node) {
if(e.ctrlKey || e.shiftKey || e.metaKey){
selector.deselect();
return;
}
dojo.event.topic.publish(this.eventNames.dblselect, { node: node });
return;
}

if (selector.selectedNode) {
selector.deselect();
}
selector.doSelect(node);
dojo.event.topic.publish(selector.eventNames.select, {node: node} );
}

/**
* 复选框选中事件。选中复选框，则清空DatePicker
*/
function neverExpired(never) {
if(never) {
resetDataPicker();
}
}

/**
* 重新设置对话框
*/
function resetDlg() {
DWRUtil.setValues({parentId: "",
id: "",
treeNodeId: ""}, "editDeptFrm");
DWRUtil.setValue("name", "");
DWRUtil.setValue("descn","");
}
</script>
<table width="100%" cellspacing="10px" cellpadding="10px">
<tr>
<td width="50%" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#6290d2">
<tr><td bgcolor="#E8F2FE" height="20px"><fmt:message key='dept.tree'/></td></tr>
<tr>
<td style="padding-top:10px;padding-right:10px;" bgcolor="#ffffff">
<div dojoType="TreeRPCController" RPCUrl=""
widgetId="deptTreeController" DNDController="create"
loadRemote="getChildren" doMove="moveNode"></div>
<div dojoType="TreeSelector" widgetId="treeSelector"
select="onSelectNode" dblselect="dblselect"></div>

<div dojoType="TreeContextMenu" toggle="explode"
contextMenuForWindow="false" widgetId="treeContextMenu">
<div dojoType="TreeMenuItem" treeActions="addChild"
iconSrc="<c:url value='/images/icons/folder_add.gif'/>"
widgetId="treeContextMenuCreate"
caption="<fmt:message key='global.new'/>"></div>

<div dojoType="TreeMenuItem" treeActions="remove"
iconSrc="<c:url value='/images/icons/folder_remove.gif'/>"
widgetId="treeContextMenuRemove"
caption="<fmt:message key='global.remove'/>"></div>

<div dojoType="TreeMenuItem" treeActions="remove"
iconSrc="<c:url value='/images/icons/folder_edit.gif'/>"
widgetId="treeContextMenuEdit"
caption="<fmt:message key='global.edit'/>"></div>
<div dojoType="MenuSeparator2"></div>
<div dojoType="TreeMenuItem" widgetId="treeContextMenuRefresh"
caption="<fmt:message key='cms.refresh'/>"></div>
</div>


<div dojoType="Tree" menu="treeContextMenu" DNDMode="between"
selector="treeSelector" widgetId="deptTree"
DNDAcceptTypes="deptTree" controller="deptTreeController">
<div dojoType="TreeNode" title="<fmt:message key='dept.root'/>"
widgetId="root" isFolder="true"
childIconSrc="<c:url value='/images/icons/home_1.gif'/>" objectId="-1"></div>

</div>

<div id="editDeptDlg" style="visibility:hidden">
<div class="hd" id="dlgHead" style="font:12px"></div>
<div class="bd" id="dlgBody" style="font:12px">
<form id="editDeptFrm" onsubmit="return false">
<input type="hidden" id="parentId" name="parentId"/>
<input type="hidden" id="id" name="id"/>
<input type="hidden" id="treeNodeId" name="treeNodeId"/>
<br>
<table width="100%">
<tr>
<td width="20%" align="right"><fmt:message key="dept.name"/>:</td>
<td><input id="name" name="name" type="text" size="28" class="thin-input"/></td>
<td width=10%" align="left"><font color="#990000">*</font></td>
</tr>

<tr>
<td width="20%" align="right"><fmt:message key="dept.descn"/>:</td>
<td><textarea id="descn" name="descn" rows="3" cols="30" class="thin-input"></textarea></td>
<td></td>
</tr>

<tr>
<td width="20%"></td>
<td>
<table>
<tr>
<td width="20%" align="right">
<input type="button" value="<fmt:message key='global.save'/>"
onclick="onSave()"/>
</td>
<td>
</td>

</tr>
</table>
</td>
</tr>
</table>

</form>
</div>
<div class="ft" id="dlgFoot" style="font:12px;"></div>
</div>
</td>
</tr>
</table>
</td>

<td valign="top">

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#6290d2">
<tr><td bgcolor="#E8F2FE" height="20px" ><fmt:message key='dept.msg'/> : </td></tr>
<tr>
<td>
<div id="deptDesc" style="height:50px; border-width:10px; color='#003366'; border='1px solid #6290D2'; background-color: #ffffff"></div>

</td>
</tr>
<tr>

<td bgcolor="#ffffff">
<div id='deptMsg' class='dojoTable' style="display:none;">

<table dojoType="FilteringTableEx" widgetId="files" id="files" minRows="0"
valueField="filename" headerClass="tableHeader"
tbodyClass="tableBody" rowAlternateClass="odd"
headerUpClass="tableHeaderSort" headerDownClass="tableHeaderSort"
alternateRows="true" cellpadding="0" cellspacing="0" border="0"
class='tableRegion' style="width:100%">
<thead>
<tr>

<th field="filename" dataType="String" class="tableHeader" align="center" ><fmt:message key="dept.subList"/></th>

</tr>
</thead>
</table>
</div>

</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>