layui实现iframe框架_layui table重新渲染

layui实现iframe框架_layui table重新渲染layuiAdmin.std(iframe版)是完全基于layui架构而成的通用型后台管理模板系统,采用传统的iframe多页面开发模式,可更快速直接地开发网页后台应用程序,无需过多地学习成本,简单高效,撸起袖子直接干。题外该文档适用于layuiAdmin.std常规版(iframe),阅读之前请务必确认是否与你使用的版本对应。熟练掌握layuiAdmin的前提是熟练…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

layuiAdmin.std(iframe 版) 是完全基于 layui 架构而成的通用型后台管理模板系统,采用传统的 iframe 多页面开发模式,可更快速直接地开发网页后台应用程序,无需过多地学习成本,简单高效,撸起袖子直接干。

题外

该文档适用于 layuiAdmin.std 常规版(iframe),阅读之前请务必确认是否与你使用的版本对应。
熟练掌握 layuiAdmin 的前提是熟练掌握 layui,因此除了本篇文档, layui 的文档 也是必不可少的存在。

快速上手

目录说明

解压文件后,你将看到以下目录:

  • src/
    layuiAdmin 源代码,通常用于开发环境(如本地)。
    src/layuiadmin/:layuiAdmin 的静态资源(JS、CSS、模块碎片等)
    src/layuiadmin/json/:模拟接口返回的 JSON 相应信息,实际应用时可无视。
    src/layuiadmin/layui/:layui 基础框架,功能一般领先于官网提供下载的版本。
    src/layuiadmin/lib/:layuiAdmin 的核心模块,通常不建议修改。
    src/layuiadmin/modules/:layuiAdmin 的业务模块
    src/layuiadmin/style/:layuiAdmin 的样式文件
    src/layuiadmin/tpl/:layuiAdmin 部分区块可能用到的模版碎片
    src/layuiadmin/config.js:全局配置文件
    src/views/:layuiAdmin 提供的视图文件,你可以将其移动到你服务端工程的 view 层中,注意修改 JS/CSS 的路径即可。

  • dist/
    通过 gulp 将 资源包的 src 目录的源代码进行构建后生成的目录(即:将 JS 和 CSS 文件进行了压缩等处理),通常用于线上环境。关于 gulp 的使用,下文也有介绍。

部署到服务端

将 src 目录中的 views 文件夹整个复制到你 服务端工程 的 view 层中,通过本地 web 服务器访问(Tomcat / IIS / Apache / Nginx 等)
确保可以访问后,修改好 HTML 文件中的 JS/CSS 路径,即可正常运行页面。
iframe 常规版 相比于 单页面模式的专业版 ,无论是在目录结构还是开发模式上都要简单很多。因为单页版是接管了服务端 MVC 的视图层,而 iframe 版则将视图交给了服务端来控制和输出,可以避免鉴权的复杂程度,直接可衔接好新老项目(因为你们的大部分老项目都是采用 iframe 模式)。

Jetbrains全家桶1年46,售后保障稳定

全局配置

当你已经顺利在本地预览了 layuiAdmin 后,你一定迫不及待关注更深层的结构。假设你页面引入的是 src 目录 的 JS,你还需要关注的是 src/layuiadmin/
目录中的 config.js,它里面存储着所有的默认配置。你可以按照实际需求选择性修改:

layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
  exports('setter', {
    container: 'LAY_app' //容器ID
    ,base: layui.cache.base //记录静态资源所在路径
    ,views: layui.cache.base + 'tpl/' //动态模板所在目录
    ,entry: 'index' //默认视图文件名
    ,engine: '.html' //视图文件后缀名
    ,pageTabs: true //是否开启页面选项卡功能。iframe 版推荐开启
    
    ,name: 'layuiAdmin'
    ,tableName: 'layuiAdmin' //本地存储表名
    ,MOD_NAME: 'admin' //模块事件名
    
    ,debug: true //是否开启调试模式。如开启,接口异常时会抛出异常 URL 等信息

    //自定义请求字段
    ,request: {
      tokenName: false //自动携带 token 的字段名(如:access_token)。可设置 false 不携带。
    }
    
    //自定义响应字段
    ,response: {
      statusName: 'code' //数据状态的字段名称
      ,statusCode: {
        ok: 0 //数据状态一切正常的状态码
        ,logout: 1001 //登录状态失效的状态码
      }
      ,msgName: 'msg' //状态信息的字段名称
      ,dataName: 'data' //数据详情的字段名称
    }
    
    //扩展的第三方模块
    ,extend: [
      'echarts', //echarts 核心包
      'echartsTheme' //echarts 主题
    ]
    
    //主题配置
    ,theme: {
      //配色方案,如果用户未设置主题,第一个将作为默认
      color: [{
        main: '#20222A' //主题色
        ,selected: '#009688' //选中色
        ,logo: '' //logo区域背景色
        ,header: '' //头部区域背景色
        ,alias: 'default' //默认别名
      }] //为了减少篇幅,更多主题此处不做列举,可直接参考 config.js

      //初始的颜色索引,对应上面的配色方案数组索引
      //如果本地已经有主题色记录,则以本地记录为优先,除非清除 LocalStorage(步骤:F12呼出调试工具→Aplication→Local Storage→选中页面地址→layuiAdmin→再点上面的X)
      // 1.0 正式版开始新增
      ,initColorIndex: 0
    }
  });
});

基础方法

  • config 模块
    你可以在任何地方通过 layui.setter 得到 config.js 中的配置信息。如:layui.setter.base

  • admin 模块
    var admin = layui.admin;

  • admin.req(options)
    Ajax 请求,用法同 $.ajax(options),只是该方法会进行错误处理

  • admin.screen()
    获取屏幕类型,根据当前屏幕大小,返回 0 – 3 的值
    0: 低于768px的屏幕
    1:768px到992px之间的屏幕
    2:992px到1200px之间的屏幕
    3:高于1200px的屏幕

  • admin.sideFlexible(status)
    侧边伸缩。status 为 null:收缩;status为 “spread”:展开

  • admin.on(eventName, callback)
    事件监听,下文会有讲解

  • admin.popup(options)
    弹出一个 layuiAdmin 主题风格的 layer 层,参数 options 跟 layer.open(options) 完全相同

  • admin.popupRight(options)
    在屏幕右侧呼出一个面板层。options 同上。

    admin.popupRight({

    id: ‘LAY-popup-right-new1’ //定义唯一ID,防止重复弹出
    ,success: function(){

    //将 views 目录下的某视图文件内容渲染给该面板
    layui.view(this.id).render(‘视图文件所在路径’);
    }
    });

  • admin.resize(callback)
    窗口 resize 事件处理,我们推荐你使用该方法取代 jQuery 的 resize 事件,以避免多页面标签下可能存在的冲突。

  • admin.fullScreen()
    全屏

  • admin.exitScreen()
    退出全屏

  • admin.events

  • admin.events.refresh()
    刷新当前右侧区域

  • admin.events.closeThisTabs()
    关闭当前标签页

  • admin.resize(callback)
    窗口 resize 事件处理,我们推荐你使用该方法取代 jQuery 的 resize 事件,以避免多页面标签下可能存在的冲突。

  • admin.fullScreen()
    全屏

  • admin.exitScreen()
    退出全屏

  • admin.events

admin.events.refresh()
刷新当前右侧区域

admin.events.closeThisTabs()
关闭当前标签页

注意:如果是在 iframe 页面中执行关闭,需要如下写法:
parent.layui.admin.events.closeThisTabs();

admin.events.closeOtherTabs()
关闭其它标签页

admin.events.closeAllTabs()
关闭全部标签页

在 iframe 页面内部打开新标签

通常你会涉及一些在右侧 iframe 页面内部去打开一个新标签的需求,目前有以下方式可以实现

方法一:

直接在 a 标签上加上相关属性

<a lay-href="url">文本</a>

方法二:

调用 index 模块的相关方法

parent.layui.index.openTabsPage(href, text); //这里要注意的是 parent 的层级关系

自定义标签栏标题

每当你打开一个标签页,头部都会出现标题。它默认读取的是所点元素的文本,但是你也可以自定义标题。

<a lay-href="url" lay-text="自定义标题文本">默认读取的文本</a>

值得说明的是,只要你配置了上述的 lay-href 属性,就会打开一个新的标签,如果要在当前标签跳转,直接配置 href=”” 属性即可。

实用组件

Hover 提示层
通过对元素设置 lay-tips=”提示内容” 来开启一个 hover 提示,如:

<i class="layui-icon layui-icon-tips" lay-tips="要支持的噢" lay-offset="5"></i>

其中 lay-offset 用于定于水平偏移距离(单位px),以调整箭头让其对准元素

兼容性

layuiAdmin 使用到了 layui 的栅格系统,而栅格则是基于浏览器的媒体查询。ie8、9不支持。
所以要在宿主页面(如 start/index.html )加上下面这段保证兼容:

<!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->  

升级事项

从官网更新资源包后,以 src 目录为例(dist 由于是 src 构建后生成的目录,所以本质是和 src 一样的)
src 目录下可以直接覆盖的有:

src/json/
src/layui/
src/lib/
src/style/

需要灵活调配的有:
src/modules/
src/tpl/
src/config.js
如果没有改动默认配置,事实上 config.js 也可以覆盖升级

源码构建

当你在 src 目录完成开发后,你可通过 gulp 对 src 源码进行自动化构建,以生成用于线上环境的 dist 目录。并在 HTML 源代码中引入该目录的 JS/CSS。

在资源包中根目录下看到的 gulpfile.js 是 layuiAdmin 写好的任务脚本,package.json 是任务配置文件,你只需按照以下步骤:

step1:确保你的电脑已经安装好了 Node.js,如果未安装,可去官网下载安装
step2: 命令行安装 gulp:npm install gulp -g
step3:切换到 layuiAdmin 项目根目录(即 gulpfile.js 所在目录),命令行安装任务所依赖的包:npm install
安装完成后,后续只需直接执行命令:gulp 即可完成 src 到 dist 目录的构建

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219189.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 怎样可以把手机app的文字复制出来_Android长按弹出选项框

    怎样可以把手机app的文字复制出来_Android长按弹出选项框如果要实现长按复制文本,那么android是可以支持的,只要将textview的android:textIsSelectable=”true”就可以。Edittext继承textview,因此,,,查看TextView的API,里面就有这么一段介绍:ToallowuserstocopysomeoralloftheTextView’svalueandpasteitso…

  • python fileinputstream_fileinputstream读取网络文件

    python fileinputstream_fileinputstream读取网络文件JavaIO:网络原文链接作者:JakobJenkov译者:李璟(jlee381344197@gmail.com)校对:方腾飞Java中网络的内容或多或少的超出了JavaIO的范畴。关于Java网络更多的是在我的Java网络教程中探讨。但是既然网络是一个常见的数据来源以及数据流目的地,并且因为你使用…文章ali清英2016-04-061054浏览量JavaIO:网络Jav…

  • alt复制选区就会卡 ps_ps复制选区快捷键是什么

    alt复制选区就会卡 ps_ps复制选区快捷键是什么大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答。ps复制选区快捷键:1、新选区:Ctrl+点击。2、添加到选区:Ctrl+Shift+点击。3、从选区中减去:Ctrl+Alt+点击。4、与选区交叉:Ctrl+Shift+Alt+点击。5、使用ps创建一个选区后按Ctrl+J就会复制ps选区。AdobePhotoshop是AdobeSystems开发和发行的图像处理软件,主…

  • vb 学习的几个网站链接

    vb 学习的几个网站链接
    1.w3c:http://www.w3schools.com/vbScript/default.asp
    2.vb用户手册 http://www.cheapbuy.cn/tools/vbs/vskeyNothing.htm
    3.vb程序员指南源码下载地址,http://www.wrox.com/WileyCDA/Section/id-WROX_SEARCH_RESULT.html?query=vbscript
    找到vb第三版,然后下载源码
    4.xml

  • 哥伦比亚大学留学申请_哥伦比亚大学巴纳德学院怎么样

    哥伦比亚大学留学申请_哥伦比亚大学巴纳德学院怎么样【转载原因】这是一篇讲述出国申请的文章。虽然我不准备出国,但还是被那朴实而激扬的文字所感染了。这确实是一篇励志的好文。其实不论在哪里,做什么,我们都需要朝着自己的目标去奋斗。真的,只有不懈地奋斗,才能活出更加精彩的人生。文章的作者确实很聪明,而且很坚强。我从心底里佩服她。每个人都有各自不同的路,就像文中提到的某些人,虽然一开始也不满现状,信心满满,但是最终还是向现实妥协了。每每看到一篇像这样…

    2022年10月26日
  • java多线程–同步锁、

    java多线程–同步锁、同步代码块:语法:synchronized(同步锁){     需要同步操作的代码}—————————————————同步锁:为了保证每个线程都能正常执行原子操作,Java引入了线程同步机制.同步监听对象/同步锁/同步监听器/互斥锁:对象的同步锁只是一个概念,可以想象为在对象上标记了一个锁….

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号