树形菜单

 

这里是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="&nbsp;保&nbsp;存&nbsp;"onClick="saveNewTreeNode()" class="btn_href" />
                                        <input type="button" value="&nbsp;关&nbsp;闭&nbsp;" 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编码显示