• easyUI Tab href,content差别



    easyUI的Tab面板是继承了panel

    Tab中js的两种使用方法:
    说明:jsp主页面加入一个id为tab的div,要引入easyUI的相关js、css

     <div data-options="region:'center'" >
       
       <div id="tab" class="easyui-tabs" fit="true">
                 
                   <div title="主页"></div>
         </div>
      </div>


    第一种。使用content:

    /加入tab。这里有一个name属性
    function f_addTab(name,tabId,title,url){
     if ($("#tab").tabs('exists', tabId)) {
      $('#tab').tabs('select', tabId);
     // $('#'+tabId).attr('src',url);//刷新
     } else {
      $('#tab').tabs('add',{
       id:tabId,
       title:title,
       content:'<iframe name="'+name+'" src="'+url+'" frameborder="0" style="height:100%;100%;" "></iframe>',
       closable:true ,//tab显示关闭键
       cache:true //设置缓存,假设为false。在每次选中所选的tab时,都会载入一次页面内容

      });
     }
     
    }

    另外一种,使用href:
    function f_addHref(tabId,title,hrefUrl){
     
     if ($("#tab").tabs('exists', tabId)) {
       $('#tab').tabs('select', tabId);
       $('#'+tabId).attr('src',url);//刷新
     } else {
      $('#tab').tabs('add',{
       id:tabId,
       title:title,
       href:hrefUrl,
       closable:true ,
       cache:true

      });
     }

    }

    第一种和另外一种的差别:
    content属性是加入整个url请求中完整的jsp页面,而href属性仅仅引入url中的<body></body>中的内容,详细可參考这个站点:


    假设使用href创建tab,那么使用datagrid时。每一个页面的grid的id都不能重名。否则会无法显示,由于href属性是不断在原来的页面插入url中请求的页面内容,一旦datagrid的id重名,那么在第二个datagrid就会无法显示

    引入easyUI的相关js文件差别:
    假设使用href创建tab,那么仅仅要在主页中引入相关的easyUI的js、css文件就能够了。
    假设使用content创建tab,那么每一个页面都要引入相关的easyUI的js、css文件


    下面是我自己測试出来的结果:

    我这里有三个页面。分别为1.jsp  、 2.jsp  、3.jsp,1.jsp是主页

    2.jsp中有一个js的f_search()方法,用来刷新id为invendg的datagrid数据
    function f_search(){

     alert('已调用f_search方法');//href创建tab时。这里能够运行
       
     $('#invendg').datagrid('load',
       serializeObject( $("#searchForm").form() ) //将searchForm表单内的元素序列为对象传递到后台
     );
     
     console.info($('#invendg'));//href创建tab时,这时火狐控制台打印一个空的对象。即Object[ ]
     
    }

    3.jsp是用来添加、改动2.jsp的数据。在3.jsp添加、改动完保存后要刷新1.jsp中grid的数据

    使用content创建tab时调用父窗体方法,要加上name属性,子页面可通过这个name属性调用指定的父窗体。如:
    window.frames['test'].f_search();
    我这里使用了第一种方法创建tab。假设使用parent或window调用,即parent.f_search()。将会调用最上层的方法,即1.jsp中的方法。假设1.jsp找不到这种方法将会报错

    使用href创建tab时调用父窗体方法,能够直接调用。但使用父窗体方法时,不能调用到父窗体的对象元素。
    假设我3页面使用了2.jsp页面的 f_search()方法,那么将无法找到 $('#invendg')这个对象。这个能够从火狐浏览器的调试控制台查看。利用
     console.info($('#invendg'));打印出来是一个空的对象,正常的打印应该是这种,



    可看到object的中括号里有值

    我在使用href属性创建tab时。在3.jsp页面直接调用2.jsp页面的方法。即f_search()方法,尽管能运行到父页面方法,但调用不了 $('#invendg')这个对象


    注意:在使用href引入页面时另一个须要注意的问题。就是每一个页面都不能有重名的js方法。新建tab时,使用href属性,假设每一个tab的页面都使用了同名的js方法。或同样的div的id。那么新的窗体js方法和document元素会覆盖了旧窗体中同样的js方法和document元素。

    如有1、2两个页面,1和2 都有一个f_add()方法,假设先打开了1。然后再打开2,这时在1中将不能使用1中原来的f_add()方法。使用的将是2页面中的方法。



    初学easyUI。在使用tab面板时遇到了很多问题。临时将我自己实践出来的经验分享给大家。大家也能够加easyUI的一些QQ群,积累一下经验。

    href,content的差别,写得比較具体的一篇文章,大家可參考一下: http://www.easyui.info/archives/164.html 



  • 相关阅读:
    iis 500
    无线密码获取
    数据库创建
    系统基础配置指令
    手把手教你用ngrx管理Angular状态
    vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
    HBuilder如何与真机连接
    01 spring boot源码阅读参考
    01 git学习笔记参考
    OAuth2授权基础知识
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/7054666.html
Copyright © 2020-2023  润新知