jquery - 页面上包括jquery菜单和jqGrid-6ren

jquery - 页面上包括jquery菜单和jqGrid

转载作者：行者123 更新时间：2023-12-01 01:39:24

25

4

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

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

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

最佳答案

你的菜单不应该有<html><head>等等
您可以在包含它的页面中定义它所需的脚本
如果该页面也是使用包含构建的，则位于 <jsp:include 上方在 header 中，定义一个变量(使用 <c:set )来保存所需的所有脚本，然后在 header 中解析它。

除了上述步骤之外，您还可以使用一些模板引擎，例如 tiles , sitemesh , velocity , freemaker 。那里的页面结构不同，您必须调整您的页面。

关于jquery - 页面上包括jquery菜单和jqGrid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3646984/

25

4

0

文章推荐： jQuery 解除 Live/Delegate 事件与命名空间的绑定(bind)

文章推荐： jquery - Jquery Ajax 请求响应错误

jqgrid - 根据另一个 jqgrid 单元格的值在 jqgrid 单元格中设置值
我的 jqgrid 中有一个状态栏。如果状态为事件，我希望同一行中的另一个单元格为绿色。如果状态为“未激活”，我希望单元格为红色。如何做到这一点？截至目前，我已经在“图像”行上创建了一个自定义格
jqgrid - 如何将工具提示添加到 jqgrid
我正在使用 jqgrid 显示服务器中存在的数据如何在鼠标悬停工具提示上显示数据描述。这是在 jqgrid 上显示工具提示的最佳方式？最佳答案鼠标悬停时 jqGrid 中显示的工具提示只不过是相
jqgrid - 我怎么知道我使用的是哪个版本的 jqgrid
我有一个 asp.net 项目，它使用 jqgrid 作为 javascript 网格。如何找出正在使用的 jqgrid 版本？最佳答案如果您需要以编程方式查询版本，您可以使用: $.jgrid.
jqgrid - 在客户端以编程方式过滤 jqGrid？
有没有办法以编程方式(在 Javascript 中，而不是服务器端)过滤当前显示在 jqGrid 中的数据？所有搜索示例似乎都依赖于使用 jqGrid 自己的搜索 UI，这对我不起作用。例如，我希望能
jqgrid - JQGrid-切换多选
有没有一种方法可以切换网格的multiselect选项？如果在创建网格时multiselect不是multiselect，则更改网格的TRUE参数并要求重新加载具有禁用或不创建标题列时将标题留在后面
jqgrid - jqGrid:何时对列进行重新排序有事件？
我在jqGrid中使用列重新排序功能 $grid = jQuery("#list").jqGrid({ sortable:true, ... }); 重新排列列后是否会触发事件？如果有
jqgrid - jqGrid DatePicker过滤而不点击Enter键
我正在构建我的第一个ASP.NET MVC 3应用程序并使用jqGrid。我的其中一个列“Flavor Created”是日期列，我想使用DatePicker过滤该列上的网格。当前发生的情况是:用户单
jqgrid - Jqgrid:基于所选行的导航
我试图基于选定的行启用导航。因此，用户从jQgrid中选择一行，然后按show(有一个显示网格的按钮，我看到了edit，add等)，它需要根据url转到新页面(该行的一部分) )。 $(documen
jqgrid - jqgrid 列的固定宽度？
有没有办法设置 jqgrid 列的固定宽度(最大和最小)？我已经在 colmodel 中设置了宽度属性，但是如果我调整网格的大小，列正在调整。最佳答案不能定义列的最大和最小宽度，但可以使其具有固
jqgrid - JQGrid DateTime高级过滤器
我被困在这里-生产前要做的最后一件事。来自oracle的日期采用以下格式：“ 8/14/2012 10:46:48 AM” 我在jqgrid上使用以下内容： { name: 'CreationDat
jqgrid - jqgrid colModel中的Index属性有什么用？
我是 jqGrid 的新手，谁能解释一下 jqgrid colModel 中 Index 属性的用途最佳答案如果您使用datatype: "json" 或datatype: "xml" 没有额外使
jqgrid - jqGrid 可以支持拖放带有本地数据的行吗？
我正在学习 jqGrid，希望最终能将它连接到 Redis 数据库。作为第一步，我正在处理本地数据。这是我必须使用可排序行(在网格中拖放行)。网格出现并且看起来不错，列甚至可以排序，但我无法选择一行并
jqgrid - 按给定间隔重新加载 Jqgrid
我想每 5 分钟重新加载一次 jqgrid(给定间隔时间)，是否有任何选项/事件。如何做到这一点？最佳答案您可以使用setInterval JavaScript函数进行自动刷新 var grid
jqgrid - jqGrid 可以支持拖放带有本地数据的行吗？
我正在学习 jqGrid，希望最终能将它连接到 Redis 数据库。作为第一步，我正在处理本地数据。这是我必须使用可排序行(在网格中拖放行)。网格出现并且看起来不错，列甚至可以排序，但我无法选择一行并
jqgrid - JQGrid 日期格式
大家好，我正在使用 JQ Grid，我得到的日期格式是 2012-09-16T00:00:00，就像这样。我希望日期格式采用 2012-09-16 方式。我试图改变它，但它不起作用。请查看我的代码并告
jqgrid - JQGrid 如何从单个文件加载图标
当我搜索 JQGrid 使用的图标时，我找到了包含所有图标的单个 PNG 文件。我想知道它如何使用图像的一部分作为 JQGrid 中使用的按钮的图标。最佳答案 jqGrid 使用来自 jQuery
jqgrid - 如何在 jqgrid 中对格式化列值进行本地搜索？
我使用 loadonce 预先获取所有数据，然后在本地进行排序和过滤。我的列值之一是一个对象数组。在 colModel 选项中，我使用了如下所示的格式化程序函数: function my_forma
jqGrid - 在 jqGrid 中右键单击列时确定列的名称
我想要在 jqGrid 中右键单击列标题时的列名称。任何代码将不胜感激。最佳答案可以绑定(bind)contextmenu事件到所有列标题。每个标题都是元素等它的 DOM 支持 cellInde
jqgrid - 如何在 jqGrid 中创建非数据库列？
我想计算总计无需在 calctotal.php 中执行即可即时完成。从本质上讲，这是一个计算列。我想使用一些事件，如 afterInsertRow ，但即使没有事件，它也会将列数据移动一格，因为 X
jqgrid - 有没有办法在 jqGrid 中添加带有按钮的列
我有一些数据想在 jqqgrid 中显示。除了添加、编辑和删除之外，还可以对选定记录执行其他操作。我喜欢在该记录的行中有一个用于该操作的按钮/链接的流程。有没有办法在 jqgrid 中添加未绑定(bi

首页

博学

6Ren·AI

商城

jquery - 页面上包括jquery菜单和jqGrid