Layui-跳转传参、父子页面

重点是这个parent，折磨了我一下午，原来是没有搞清应该从父页面打开。最开始的xadminadd_tab()是用在左边菜单上的，点击就会增加新的标签页，这个才是父页面。

使用X-admin(Layui)前端框架，在打开新Tab页面内刷新其他Tab页面解决方案（表单数据多可以使用opend框全屏）

这个bug隐藏地非常深，我一开始写了新增合同页面，通过“下一步”的按钮跳转到添加合同条款的页面，结果可以跳转，合同编号也传递正确了，但是条款信息提交时却又返回到了上一页面。

因为某种机缘巧合而发现了原来是新增合同页面的form检查语句formverify{}不让我提交……至于原因，可能是我把不该写的东西写在了formverify{}里吧……改得太快，没注意具体原因。

layui 打开新页面,并传入参数

下面这篇也是差不多的道理，拼接url实现layeropen

layui+springboot+thymeleaf 动态传参

我的理解是如果不return false，传的参数会被页面自动刷新掉。

Layui form表单提交注意事项

如何在表单里面做上一步跟下一步

提交form表单后，页面的跳转和刷新问题

（ 用什么标签不重要，只要样式用对了，都能出效果，用ul里面嵌套li与div嵌套div是一样的，注意里面子项里面要加一个<a></a>不然点击没效果 ）

（ 如果不加载element模块，也没有效果 ）

（在页面中有很多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换 *** 作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件）

相关样式：

1、方向

（1）水平：默认的

（2）垂直：layui-nav-tree

2、其他样式

（1） layui-nav ：代表这是一个导航菜单

（2） layui-nav-item ：放在（1）的子标签中，代表这个导航菜单的一个子项

（3） lay-this ：和（2）同级，代表当前选中的菜单项

（4） layui-nav-child ：子项的子项

（5） layui-nav-img ：会以导航合适的大小处理

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

1、风格说明

默认风格：只需要加layui-tab

简洁风格：再追加上layui-tab-brief

卡片风格：再追加上layui-tab-card

2、相关样式

layui-tab：代表这是一个选项卡

（1）layui-tab-title：选项卡的头

1layui-tab-this：选中该选项卡

（2）layui-tab-content：选项卡的内容

1layui-tab-item：一个选项卡头对应的具体内容

2layui-tab-show：表示初始显示，一般哪个头上加了layui-tab-this，它对应的content就加上layui-tab-show

3、相关属性

lay-allowclose="true"：是否开启关闭按钮

lay-filter="demo"：用来在方法中唯一确定一个layui组件

lay-id="1"：用来配合lay-filter属性唯一确定一个子组件

4、相关方法

elementtabAdd(filter, options)：用于新增一个Tab选项

option示例：

{

title: '选项卡的标题'

,content: '选项卡的内容' //支持传入html

,id: '选项卡标题的lay-id属性值'

}

elementtabDelete(filter, layid)：用于删除指定的Tab选项

elementtabChange(filter, layid)：用于外部切换到指定的Tab项上

进度条进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。

相关样式：

layui-progress：表示这是一个进度条

layui-progress-bar：表示进度条中的进度，依靠其lay-percent属性的值来控制进度大小，值取值范围0-100%

layui-bg-red/green/：表示进度条的颜色

layui-progress-big：表示大尺寸进度条

相关属性：

lay-percent="80%"：代表具体的进度

lay-showpercent="true"：是否显示百分比数字

进度条的宽度是 100% 适配于它的父级元素

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等（同样依赖element）

1、卡片面板

相关样式：

layui-row：代表一行

layui-col-space15：space0-space30，代表卡片之间的间距

layui-colmd5：md1-12，代表当前卡片占整行的列数

layui-card：代表一个卡片

layui-card-header：代表卡片头信息

layui-card-body：代表卡片内容样式

2、普通折叠面板

相关样式：

layui-collapse：代表一个折叠面板

layui-colla-item：代表一个折叠项

layui-colla-title：代表一个折叠项的标题

layui-colla-content：代表一个折叠项展开s的内容

layui-show：是否展开

相关事件：

3、手风琴面板

在普通折叠面板的基础上加上lay-accordion=""

最近抽空总结了下layui中table表格的相关配置，解释的比较全面，可供大家参考，页面效果如下：

table表格html部分：

table表格渲染js (包含分页器及返回数据处理等）:

table表格 *** 作列事件：

首先是官方文档。我真的不是第一次觉得阅读官方文档比百度上搜索要有效率几百倍了，当然前提教程是汉语。

组件库

使用文档

Springboot+Thymeleaf+layui框架的配置与使用

Spring data jpa 分页+ layui数据表格渲染数据

我觉得我现在能看懂了，感慨。

layuitable 里面 json数据有多层嵌套, 请问要怎么获取数据

下面这个主楼里用的是改底层源码的方式，我觉得不可取。

layui数据表格total和data无法使用多层嵌套json格式的数据的解决办法

下面有对主楼这样的补充，但也是改的底层源码：

我用的版本中Layui符号是以字体的形式表示的（layui 230 之前只支持采用 unicode 字符），可能也是被拦截掉了，参考以下写法。

SpringBoot 中 引用LayUI font 不显示问题解决办法

以后可以直接使用内联元素调出字体图标。

Layui字体图标库

第二种方法（我没试过）：

Spring Boot使用layui的字体图标时无法正常显示 解决办法

layuiAdmin使用总结，基于springmvc

Layui在MVC下的配置过程，我没用到，但是感觉不错。去看了看这位以前的文章，感叹大佬真的太多了，随处一看就都是大佬。

虽然大家都说毕设很水，但是年轻又有为的人却不计其数，可能他们很聪明早就开始做自己的项目了，没把毕设当作发力点。那我就将错就错吧，我想学习，我很羡慕。

通过tablerender来刷新、绘制table

Layui表格单元格编辑保存

le可编辑扩展下拉框编辑器

layui的table中日期格式转换

这个除了显示其实还有个问题：当这个日期还是null时，会自动显示当前日期，所以需要加一个判断，不为空才显示。

下面是我用在了进度计划行内编辑中的例子。

以上就是关于Layui-跳转传参、父子页面全部的内容，包括:Layui-跳转传参、父子页面、Layui（三）：导航菜单、选项卡、进度条和面板、layui中table表格的基本 *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！