`
toyota2006
  • 浏览: 545854 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

deptTree

阅读更多
<%@ 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>
分享到:
评论

相关推荐

    jQuery zTree插件使用简单教程

    &lt;ul id=deptTree class=ztree&gt; 第二步,zTree在init的时候都需要什么参数 zTree 初始化方法,创建 zTree 必须使用此方法 $.fn.zTree.init($(#deptTree), setting, data); init(obj, zSetting, zNodes);

    aceadmin用简单json生成treeview

    其它版本稍做改动即可使用,需要先引入aceadmin相应的tree.min.js,使用时只需要传入带id、pId的json数组,自动生成上下级多层关系的树,可直接从后端取数返回json,引入此js后,调用:aceTree.tree("deptTree",tree...

    treegrid-dnd.js

    在easyui中,官方提供的文档中没有这个js,官方给的demo中没有可以直接拖拽节点的功能,这个js就是满足拖拽功能的js,在实行拖拽的页面将这个js导入,在代码中加入... //enableDnd($('#datagrid_depttree')); } 就行了

    api-docs:开放API格式的Bokun API文档(以前是大张旗鼓)

    api-docs Bokun API的文档,采用Open API格式(以前是大张旗鼓)。安装swagger命令行界面swagger-cli可以验证yaml文件swagger validate [file] 。 并将它们捆绑为自包含的json文件,以与Swagger代码生成器结合使用,...

    vue treeselect获取当前选中项的label实例

    我就废话不多说了,大家还是直接看代码吧~ ...$t( options=deptTree normalizer=normalizer v-model=formData.deptId select=selectDepart&gt; // 获取当前选中部门的名称 selectDepart(val) { console

    vue 监听 Treeselect 选择项的改变操作

    项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值。 我使用了watch 来监听 treeselect 绑定的 model ,...treeselect :options=deptTree :normalizer=normalizer

Global site tag (gtag.js) - Google Analytics