Question

我有一个导航菜单，我需要在我的所有页面上包含....通过jsp我只是包含该菜单

<div id="header"><jsp:include page="../menu_v1.jsp"/></div>

但问题是我的菜单包含<html><head></head><body></body></html>现在当我想使用我在<script></script>内的新页面上定义的jqGrid时，它没有显示....因为它与我的标题jquery脚本......我尝试过的解决方案：

使用iframe，但这不会让我控制其他页面。
而不是包括<jsp:include page=""/>我可以在同一个脚本的每个页面上包含所有带有jquery导航的组件...这可能根本不是一个好的解决方案，因为每当我需要在菜单中包含更多组件时我必须在每个页面上进行更改......

如果有人有更好的解决方案......请让我知道....谢谢！

更新：我的主菜单代码

<script type="text/javascript"> 
//<![CDATA[

var navMenu = function(){

    jQuery("ul.subnav").parent().append("<span></span>"); 

    jQuery("ul.topnav li span").hover(function() { 

        jQuery(this).parent().find("ul.subnav").slideDown('fast').show(); 

        jQuery(this).parent().hover(function() {
        }, function(){  
            jQuery(this).parent().find("ul.subnav").slideUp('slow'); 
        });
        }).hover(function() { 
            jQuery(this).addClass("subhover"); 
        }, function(){  
            jQuery(this).removeClass("subhover"); 
    });

}
//]]>
</script>


    <div id="topbar">
         <div class="disclaimer"></div>
        <ul class="topnav">
            <li>
                <a href="#">Order Management</a>

                <ul class="subnav">
                    <li><a href="<%=request.getContextPath()%>/jsp/1.jsp">1</a></li>
                    <li><a href="<%=request.getContextPath() %>/jsp/2.jsp">2</a></li>

                </ul>
            </li>
            <li>
                <a href="#">3</a>
                <ul class="subnav">
                    <li><a href="<%=request.getContextPath()%>/3.jsp">3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">4</a>
                <ul class="subnav">
                <li><a href="<%=request.getContextPath()%>/4.1.do">4.1</a></li>
                <li><a href="<%=request.getContextPath()%>/jsp/4.2.jsp">Add Spog</a></li>
                <li><a href="<%=request.getContextPath()%>/jsp/4.3.jsp">4.3</a></li>

                </ul>
            </li>


        </ul>
    </div>

使用菜单的另一页：

script type="text/javascript">
//<![CDATA[
  jQuery(document).ready(function(){
    navMenu();        
  jQuery("#test").jqGrid({
                    sortable:true,
                    url: '',
                    datatype:'json',
                 colNames:['col1','col2', 'col3'], 
                 colModel:[  {name:'col1',index:'col1', width:85, sorttype:"int", align:"center", key:true},
                             {name:'col2',index:'col2', width:40, sorttype:"int", align:"center"},
                             {name:'col3',index:'col3', width:100, align:"center"},
                              ],

               rowNum:10,
               rowList:[10,20,30],
               jsonReader : {repeatitems: false,
                    root: function(obj) {
                        return obj;
                    },
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.length; }
                },
               pager: '#pager',
               sortname: 'col1',
               sortorder: "desc",
               loadonce:true,
               viewrecords: true,
               multiselect: true,
               caption: "Test",
               height:230 
             }); 
          jQuery("#test").jqGrid('navGrid','#pager10',{view:true,add:false,edit:false,del:false, searchtext:'Filter'},{},{},{},{multipleSearch:true});
         jQuery("#test").jqGrid('hideCol', 'cb');


  }) ;        
//]]>
</script>
</head>
<body>
<div id="header"><jsp:include page="../menu_v1.jsp"/></div>

但现在问题是我的菜单和主要的jqGrid根本没有工作......

Answer 1

您的菜单不应有<html><head>等。
您可以在包含它的页面中定义所需的脚本
如果该页面也是由包含的，在标题的<jsp:include之上，则定义一个变量（带<c:set）来保存所需的所有脚本，然后在标题中解析它。

您可以使用某些模板引擎，例如tiles，sitemesh，velocity，freemaker，而不是上述步骤。那里的页面结构是不同的，你必须调整你的页面。

Answer 2

我已经解决了这个问题：

1）每当创建任何导航菜单时:( Bozho的建议）链接附加到该导航菜单的CSS文件。不要使用任何<html>,<head>,<title> and <body>标记。只需使用，（对于CSS）和（将包含导航菜单）。

2）在<jsp:include page="../navMenu.jsp"/>内使用<div id="header"><jsp:include page="../navMenu.jsp"/></div> 并在CSS中进行必要的调整。

3）所有js文件使用不同的功能将其保存在一个文件中，如：

var navBar = function(){}
  var otherScript = function(){}

因此，当您想要使用这些文件时，只需使用：在jQuery的情况下：

jQuery(document).ready(function(){
                          navMenu();
                          otherScript();
                     });

因此，您的服务器周围没有多个js文件。

如果有人有任何疑问或问题，请告诉我。

谢谢！

包括页面上的jquery菜单和jqGrid

2 个答案: