包括页面上的jquery菜单和jqGrid

小编典典

包括页面上的jquery菜单和jqGrid

jsp

我有一个导航菜单，需要将其包含在我的所有页面上。…通过jsp，我只包含了该菜单

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

但是问题是我的菜单包含<html><head></head><body></body></html>现在，当我想使用在新页面中定义的jqGrid时，<script></script>它不会显示…。因为它与我的头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根本无法工作…

阅读 343

2020-06-10

共1个答案

小编典典

好吧，我已经解决了这个问题：

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文件。

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

谢谢！

2020-06-10