包括页面上的jquery菜单和jqGrid答案

【问题标题】：including jquery menu and jqGrid on the page包括页面上的jquery菜单和jqGrid
【发布时间】：2010-09-05 17:23:48
【问题描述】：

我有一个导航菜单，我需要将其包含在我的所有页面中......通过 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 根本不工作......

【问题讨论】：

标签： jquery jsp jqgrid master-pages

【解决方案1】：

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

您可以使用tiles、sitemesh、velocity、freemaker 等模板引擎来代替上述步骤。那里的页面结构不同，您必须调整您的页面。

【讨论】：

如果你给我看你的代码我就可以了。现在我只能猜测了。

【解决方案2】：

我已经解决了这个问题：

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

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

3) 所有 js 文件都使用不同的函数将其保存在一个文件中，例如：

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

所以当你想使用这些文件时，只需使用：如果是 jQuery：

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

这样您的服务器上就不会出现多个 js 文件。

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

谢谢！

【讨论】：