樹形菜單

時間 2019-11-18

標籤菜單简体版

原文原文鏈接

這裏是struts2裏的應用:1,.js導入javascript

2.js代碼：html

            // 去除字符串首尾空格
            String.prototype.trim = function()
            {
                return this.replace(/(^\s+)|(\s+$)/g, "");
            }node

            /**
             * 點擊菜單後的處理函數
             * 更新菜單的訪問記錄
             */
            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);
            }jquery

            /**
             * 執行菜單跳轉
             * @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);
            });
            /**
        調用新增或者編輯類別方法
             **/ajax

/**
        設置編輯框的值爲當前選定的節點值
             **/
            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">
            
            var xmlHttp;
            function createXMLHttpRequest() {
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if (window.XMLHttpRequest) {
                    xmlHttp = new XMLHttpRequest();
                }
            }cookie

            //新增
            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 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 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>

                            </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>

</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編碼顯示

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。