树形菜单
来源:互联网 发布:java中标签的作用 编辑:程序博客网 时间:2024/05/29 15:49
这里是struts2里的应用:1,.js导入
<link href="plug/Dtree/editTree.css" rel="stylesheet" type="text/css">
<script src="plug/Dtree/editTree.js" type="text/javascript" ></script>
<script src="plug/Dtree/jquery-1.3.2.js" language="JavaScript"></script>
<link href="plug/Dtree/saveKey.css" rel="stylesheet" type="text/css" />
2.js代码:
<script type="text/javascript">
<!--
$(document).ready(function(){
postSelectedNode(tree.getSelected());
});
// 去除字符串首尾空格
String.prototype.trim = function()
{
return this.replace(/(^\s+)|(\s+$)/g, "");
}
/**
* 点击菜单后的处理函数
* 更新菜单的访问记录
*/
function postSelectedNode(nodeId){
var selectedNode = tree.getNode(nodeId);
if(selectedNode!=null){
//var treeLevel = selectedNode.findByPropertyKey("treeLevel");
var type_Name = selectedNode.findByPropertyKey("name");
var type_describe = selectedNode.findByPropertyKey("describe");
var isSystemDefine=selectedNode.findByPropertyKey("isSystemDefine");
//alert(type_describe);
setCurrentCollectClassify(selectedNode.id,selectedNode.pid,type_Name,type_describe,isSystemDefine);
}
//否则展开菜单目录
postTreeSelect(selectedNode);
}
/**
* 执行菜单跳转
* @param {Object} selectedNode 当前选中的菜单节点对象
*/
function postTreeSelect(selectedNode){
if(selectedNode == null||selectedNode.id == 0){
return;
}
//当前节点id
var strNodeId = selectedNode.id;
var expandFlag = selectedNode.findByPropertyKey("expandFlag");
//如果当前菜单是叶子
if(selectedNode.isLeaf == true){
var vUrl = selectedNode.findByPropertyKey("url");
vUrl = vUrl.replace("#","=");
vUrl = vUrl.replace("#","=");
vUrl = vUrl.replace("#","=");
vUrl = vUrl.replace("#","=");
var vWin;
//在右边窗口打开
openSelectPointList(vUrl,selectedNode.id,selectedNode.pid);
}else{//否则展开分支
//如果还没有加载此节点的儿子节点
//node._hc 可能是hasCookie的意思,dTree会在cookie中保存了已经加载的节点
if(!selectedNode._hc){
document.frameTree.branchloadDataId.value = strNodeId;
document.frameTree.submit();
}
}
}
function setCurrentCollectClassify(nodeId,pNodeId,cpType_Name,cpType_descripe,isSystemDefine){
$('#id').val(nodeId); //子节点
$('#parentID').val(pNodeId); //父节点
//alert(cpType_Name);
//alert(cpType_descripe);
$('#name').val(cpType_Name);
$('#describe').val(cpType_descripe);
$('#isSystemDefine').val(isSystemDefine);
}
/**
设置节点ID,并在右窗口中打开
@parm actions 调用的Action;
@parm nodeId 节点名称
@parm pNodeId 父节点名称
**/
function openSelectPointList(actions,nodeId,pNodeId){
var url = actions + "?id="+nodeId+"^parentID="+pNodeId;
$('#workSpace',parent.document).attr('src',url);
}
$(document).ready(function(){
//树刷新时即刷新采集点列表
var id = $('#id').val();
var pid = $('#parentID').val();
var url = "manage/article/view.do?id=" + id+"^parentID="+pid;;
$('#workSpace',parent.document).attr('src',url);
});
/**
调用新增或者编辑类别方法
**/
/**
设置编辑框的值为当前选定的节点值
**/
function setNodeValue(){
$('#name').val($('#name').val());
$('#describe').val($('#describe').val());
}
function ifCanModify(){
var cpClassifyId = $('#id').val();
var cpParentID = $('#parentID').val();
var isSystemDefine=$('#isSystemDefine').val();
if(cpClassifyId==0){
alert("不允许编辑根节点!");
return;
}
if(isSystemDefine==1){
alert("不允许编辑系统定义的节点!");
return;
}
setNodeValue();
$('#addNewOrEdit').val(2);
$('#divQuery').slideDown('1000');
}
//-->
</script>
<script type="text/javascript">
<!--原始ajax-->
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validate() {
createXMLHttpRequest();
var mainid = $('#id').val();
var pid = $('#parentID').val();
if(mainid==0){
alert("不允许删除根节点!");
return;
}
var isSystemDefine=$('#isSystemDefine').val();
if(isSystemDefine==1){
alert("不允许删除系统定义的节点!");
return;
}
if(!confirm("确定删除该采集点类别?")){
return false;
}
var url ='manage/article/del.do?id=' +mainid+'&TimeID=' + Math.random();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
try{
if(1==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, ""))){
alert('删除成功');
parent.document.form1.submit();
return true;
}else if((0==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, "")))){
alert('删除失败');
return false;
}else if((-1==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, "")))){
alert("该分类下存在子分类,无法删除!");
return false;
}
}catch(e){}
}
}
}
//新增
function Add() {
createXMLHttpRequest();
document.cookie = "returnUrl=" + escape(location.pathname + location.search);
var mainid = $('#id').val();
var pid = $('#parentID').val();
if(mainid==null || mainid ==""){
alert("请先选择分类!");
return;
}
var type_Name = document.getElementById('name').value; //类别名称
var type_Describe = document.getElementById('describe').value; //描述
//var type_ParentID = $("#type_ParentID").val();
if(type_Name==null || $.trim(type_Name) ==""){
alert("必须填写类别名称!");
return;
}
var url ='manage/article/save.do?type_Name=' + encodeURI($.trim(type_Name))+'&typeDescribe='+ encodeURI(type_Describe)+'&type_ParentID=' + mainid+'&pid='+pid+'&TimeID=' + Math.random();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callbackAdd;
xmlHttp.send(null);
}
function callbackAdd() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
try{
if(1==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, ""))){
alert('新建类别成功');
//document.form1.submit();
parent.document.form1.submit();
return true;
}else if((0==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, "")))){
alert('新建类别失败');
return false;
}else if((-1==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, "")))){
alert("新建类别失败,该节点下已存在该分类名称!");
return false;
}
}catch(e){}
}
}
}
function checkField(){
document.form2.submit();
}
//修改方法
//新增
function validateUpdate() {
var cpClassifyId = $('#id').val();
var isSystemDefine=$('#isSystemDefine').val();
createXMLHttpRequest();
document.cookie = "returnUrl=" + escape(location.pathname + location.search);
var mainid = $('#id').val();
if(mainid==null || mainid ==""){
alert("请先选择分类!");
return;
}
if(cpClassifyId==0){
alert("不允许编辑根节点!");
return;
}
if(isSystemDefine==1){
alert("不允许编辑系统定义的节点!");
return;
}
var type_Name = document.getElementById('name').value;
var type_Describe= document.getElementById('describe').value;
//var type_ParentID = $("#type_ParentID").val();
if(type_Name==null || $.trim(type_Name) ==""){
alert("必须填写类别名称!");
return;
}
// if(mainid==0){
// alert("不允许编辑根目录!");
// return;
// }
var url ='manage/article/update.do'+'?id='+mainid+'&type_Name=' + encodeURI($.trim(type_Name))+'&typeDescribe='+ encodeURI(type_Describe)+'&TimeID=' + Math.random();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callbackupdate;
xmlHttp.send(null);
}
function callbackupdate() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
try{
if(1==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, ""))){
alert('编辑类别成功');
parent.document.form1.submit();
return true;
}else if((0==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, "")))){
alert('编辑类别失败');
return false;
}else if((-1==(xmlHttp.responseText.replace(/(^\s*)|(\s*$)/g, "")))){
alert("编辑类别失败,该节点下已存在该分类名称!");
return false;
}
}catch(e){}
}
}
}
/**
调用新增或者编辑类别方法
**/
function saveNewTreeNode(){
var flag = $('#addNewOrEdit').val();
var type_Name = document.getElementById('name').value;
var type_Describe = document.getElementById('describe').value;
if(type_Name.length>6){
alert("中文名称字数不能大于6个!");
return;
}
if(type_Describe.length>85){
alert("英文名称字数不能大于85个!");
return;
}
if(flag==1){
Add();
}else{
validateUpdate();
}
}
//iframe网页高度自适应
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0, d=document, dd=d.documentElement;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px";
if(dd && dd.scrollHeight) h1=dd.scrollHeight;
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all){h += 4;}
if(window.opera){h += 1;}
a[i].style.height = a[i].parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAutoFit, false);
}
</script>
3. html部分<!--树形菜单-->
<!-- 做刷新页面用-->
<form action="manage/article/view.do">
<input type="hidden" value="测试" class="btn_newStyle" />
</form>
<form action="manage/article/view.do" name="form1" method="post">
<input type="hidden" name="id" Id="id" value="${node}" />
<input type="hidden" name="Hname" Id="Hname" />
<input type="hidden" name="Hdescribe" Id="Hdescribe" />
<input type="hidden" name="parentID" Id="parentID" />
<input type="hidden" name="isSystemDefine" Id="isSystemDefine" />
<input type="hidden" name="addNewOrEdit" Id="addNewOrEdit" />
<div id="listLayer" style="width:290px; height:700px; z-index:1; overflow-x: auto; overflow-y: auto;visibility: visible;">
<div style="width:100%;background-image: url(whitetopbottom.gif)">
<table>
<tr>
<td align="center" width="290">
<input type="button" value="新增下级" class="btn_newStyle" onClick="$('#addNewOrEdit').val(1);$('#divQuery').slideDown('1000');$('#name').val('');$('#describe').val('');"/>
<input type="button" value="编辑" class="btn_newStyle" onClick="ifCanModify();"/>
<input type="button" value="删除" class="btn_newStyle" onClick="validate()"/>
</td>
</tr>
</table>
</div>
<div id="divQuery" style="display:none;width:285px;border:#A6B8D0 1px solid;background-color:#D1DFF1;margin-top: 2px;padding: 1px;">
<div style="border:#ffffff 1px solid;padding: 7px;">
<div style="height:135px;padding-top:13px;background-color:#C7D6E9">
<table cellspacing="0" cellpadding="0" style="width:100%;" border="0" style="font-size:9pt;">
<tr>
<tr>
<td align="center" >类别名称:</td>
<td ><input type="text" name="name" id="name" maxlength="6" size="15" ></td>
</tr>
<tr>
<td align="center">描述:</td>
<td >
<textarea name="describe" id="describe" onpropertychange="if(value.length>85) value=value.substr(0,85)" cols="13" rows="4" ></textarea>
</td>
</tr>
<tr>
<td height="30px;" align="center" nowrap="nowrap" colspan="2">
<input type="button" value=" 保 存 "onClick="saveNewTreeNode()" class="btn_href" />
<input type="button" value=" 关 闭 " class="btn_href" onClick="$('#divQuery').slideUp('1000')"/>
</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<table class="bg_table" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<script type="text/javascript">
<s:if test="#request.articleTypelist.size!=0">
//alert('dd');
tree = new dTree('tree','/pages');
<s:iterator value="#request.articleTypelist" status="stuts">
tree.add('<s:property value="id" />',
'<s:property value="parentID" />',
'<s:property value="name" escape="false"/>',
'<s:property value="isSystemDefine" escape="false"/>',
'url=manage/article/view.do^id=<s:property value="id" />^parentID=<s:property value="parentID" />^name=<s:property value="name" escape="false"/>^describe=<s:property value="describe" escape="false"/>^isSystemDefine=<s:property value="isSystemDefine" escape="false"/>',
'<%=path%>/plug/Dtree/dtreeimg/menufolder.gif',
'<%=path%>/plug/Dtree/dtreeimg/menufolderopen.gif',
false,
false,
true);
</s:iterator>
</s:if>
document.write(tree);
</script>
</td>
<td></td>
</tr>
</table>
</div>
</div>
</form>
4.struts2标签:<%@ taglib uri="/struts-tags" prefix="s"%> 注意编码 用utf-8
5:备注:<s:property value="id" />是表的主键,<s:property value="parentID" />父级ID,escape="false"/:避免struts2的unicode编码显示