LAYUI - 技术教程文章
layui批量删除怎么刷新当前分页【图】
1.先进行可视化界面操作，如图有2条数据。2.批量选择需要删除的数据。3.点击删除按钮，弹出提示代码layer.confirm("确认删除勾选的专题？", {icon: 3, title:"确认"}, function(){batchDel(resSubInfoIds);}, function(){});batchDel 调用真正的批量删除方法4.批量删除完的结果界面。相关推荐：《layui框架教程》5.加数据的方法，等下批量删除时会用到这个，所以这个方法是复用的，数据初始加载和批量删除过程中都会使用：function...
layui如何使用按钮事件【图】
首先我们创建一个layui的按钮。要使用按钮事件，我们可以直接添加一个onclick属性就行了，并为其添加调用的函数，clickme。定义函数clickme就行了。代码如图。运行页面，可以看到一个按钮，点击这个按钮。相关推荐：《layui框架教程》点击后，就可以触发点击事件了，运行了我们函数里的弹出窗口的代码。除了可以直接添加onclick事添加事件外，我们还可以使用jquery来为按钮注册事件。先把onclick去掉，再为按钮添加一个id。（需要先...
layui的文件上传功能怎么获取文件名【图】
第一步在我们的电脑上面打开软件，新建一个html页面，并添加上layui插件的css,js文件和jquery.js文件，如下图所示：第二步在新建的index1.html文件里面首先引入layui.css，layui.js，jquery-1.9.0.js三个文件，如下图所示：第三步在index1.html的body里面添加一个表格、文件选择和文件上传的按钮，实现将文件上传到服务器，并以表格的形式显示到界面，显示文件名，文件大小等，如下图所示：第四步我们在浏览器中打开页面，可以看到...
layuiadmin是什么【图】
layuiAdmin介绍layuiAdmin 是一种采用 layui 自建的纯前端 MVC 架构而成的后台模板系统开发框架，而不仅限于模板。layuiAdmin 全面接管视图和路由，并自主完成数据渲染，服务端只负责数据接口，因此这赋予了 layuiAdmin 单页面应用开发的能力。你可以在模板碎片中遵循 laytpl 语法，很轻松就能完成视图的基本展现和逻辑处理。而基础组件的应用依旧采用 layui 现有的模式，一切都并不会那么陌生。layuiAdmin 主要特色：单页面应用 /...
layui框架的优缺点是什么【图】
layui框架的优点有它属于轻量级框架，简单适合后端人员开发；缺点是技术还不是很成熟，由于需要查询DOM操作因此在前端交互上较麻烦layui是一款模块化的前端框架，因其简单而又充实的内在而受到欢迎。今天将要介绍layui框架的优点与缺点，具有一定的参考价值，希望对大家有所帮助。【推荐课程：javascript教程】layui含义：layui是一款采用自身模块规范编写的前端 UI 框架，它遵循原生的 HTML/CSS/JS 书写方式。它虽然外在极简，但是...
bootstrap与layui的不同之处有哪些【图】
bootstrap与layui的不同之处有适用范围不同，前者适合开发网站，后者适合做后端框架；大小不同，前者因为成熟所以存在代码冗余，后者是属于轻量级的bootstrap与layui都是前端开发框架，但是它们之间还存在一些不同之处，接下来在文章中将为大家详细介绍【推荐课程：bootstrap教程】bootstrap与layui的含义：Bootstrap是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 语言开发的简洁、直观、强...
如何禁用layui框架中的侧边导航栏点击事件【图】
我们在工作中经常会用到框架，一款功能齐全又好用的框架的确可以提高工作效率。layui就是一款优秀的前端模块化css框架，且基于jquery，很容易上手。这篇文章主要介绍了layui禁用侧边导航栏点击事件,需要的朋友可以参考下。layui是一款优秀的前端模块化css框架。我用layui做过两个完整的项目，对她的感觉就是，这货非常适合做后台管理界面，且基于jquery，很容易上手。当然，她最大的优点我觉得还是她的模块化方式，相比requirejs，...
layui数据表格如何实现自动合并（代码）【图】
本篇文章给大家带来的内容是关于layui数据表格如何实现自动合并（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。需求描述：在数据表格中，对于按某个分类展示数据其分类下又有多个细分的嵌套细分项，如省市区昵称，省下面有多个市，市下面有多个区，区下面有昵称，需要实现跨行合并，且操作按钮以分类为单位（即操作按钮需按照分类合并）。需求分析：除操作列外，以左边列为基础单位进行跨行合并，当前单...
如何实现layui点击按钮给table添加一行（手动添加）
本篇文章给大家带来的内容是关于如何实现layui点击按钮给table添加一行（手动添加），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。问题描述：想实现点击按钮在表格添加一行的功能，但发现layuii并未集成该工具栏，因此，需要自己手动添加这个功能；原先我写的table是这样实现的：$("#addTable").click(function(){var tr=" <tr>"+" <td>11</td>"+" <td>22</td>"+" <td>33</td>"+" <td>44</td>"+" <td>55<...
基于layui如何实现无限极联选择器（附代码）
本篇文章给大家带来的内容是关于基于layui如何实现无限极联选择器（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。html元素<div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><input type="text" id="a" class="layui-input" readonly="readonly"></div> </div>js引用layui.use([form,"jquery","cascader"], function(){var $ = layui.jqu...
layui的项目优化以及无侵入优化的详细解析【图】
本篇文章给大家带来的内容是关于layui的项目优化以及无侵入优化的详细解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。基于layui的实战优化,无侵入优化 form date open-iframe data-table upload verify-form laytpl laypage laytree tableTree # layui-update#### 项目介绍##### 基于layui的实战优化,无侵入优化###### [1. 表单元素优化](https://bable2000.gitee.io/layui-update/view-demo/imit-form.htm...
layuiadmin的iframe版在ios系统页面不能自适应的解决方法介绍【图】
本篇文章给大家带来的内容是关于layuiadmin的iframe版在ios系统页面不能自适应的解决方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。layuiadmin官方演示的iframe版，在安卓上正常，但在ios上就会出现iframe页面不能自适应的问题。经过各种百度和谷歌，终于结合网上的一些办法，目前看是完美的结局了这一问题。实际上方法很简单，就用js判断一下客户端，如果是ios，就是根据取得的屏幕参数，强制限制ifr...
layui如何实现图片的上传以及图片预览（纯代码）【图】
本篇文章给大家带来的内容是关于layui如何实现图片的上传以及图片预览（纯代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.选择文件后自动上传<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../../layui/css/layui.css"/></head><body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>常规使用：普通图片上...
layui中有关取值传值方面的问题【图】
本篇文章主要介绍了详解layui中的树形关于取值传值问题，现在分享给大家，也给大家做个参考。本文介绍了layui中的树形关于取值传值问题，分享给大家，具体如下：这个是我们需要的效果，实际操作中会先执行渲染 然后在执行方法，然后我们发现树形的JSON是空，调试了N遍一直以为是优先级别的问题了。最后解决方案是<script type="text/javascript">////layui 的 form 模块var form = "";layui.use([form], function () {// $ = layui...
详细解读layui父子窗口如何传递参数
本篇文章主要介绍了ayui弹窗父子窗口之间传参数的方法，现在分享给大家，也给大家做个参考。本文介绍了layui弹窗父子窗口之间传参数的方法，分享给大家，具体如下：1、父页面打开子页面并向子页面传参数function setChooseValues(ret){ var oView = document.getElementById("userName"); var oValue = document.getElementById("userIds"); var i = 0; if( ret != null){ oValue.value=""; oView.value=""; oView.title=""...
如何使用jquerylayui弹出层
这次给大家带来如何使用jquery layui弹出层，使用jquery layui弹出层的注意事项有哪些，下面就是实战案例，一起来看一下。Jquery必须大于1.83layui必须是all，否则不显示<script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script>html代码<input id="about" type="button" value="修改考勤" class="layui-btn layui-btn-normal" />主要js代码<script>$(input#about).on(click, function (...
怎样操作layui实现动态和静态分页【图】
这次给大家带来怎样操作layui实现动态和静态分页，操作layui实现动态和静态分页的注意事项有哪些，下面就是实战案例，一起来看一下。开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了...
layui表格checkbox选择全选样式及功能的实例
下面我就为大家分享一篇layui表格checkbox选择全选样式及功能的实例，具有很好的参考价值，希望对大家有所帮助。在之前的版本，默认复选框是要有值得，默认为“勾选”两个字，在表格里用来做选择不适合，很难改，还好layui升级后，可以支持不写name值，来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)<span style="white-space:pre;"> </span><p class="layui-form"><table class="layui-table"><thead><t...
layuiselect动态添加option的实例
下面我就为大家分享一篇layui select动态添加option的实例，具有很好的参考价值，希望对大家有所帮助。html<form class="layui-form" action=""><p class="layui-form-item proSelect"><label class="layui-form-label">产品类别</label><p class="layui-input-block editWidth"><select name="productList" lay-verify="required" id="zcySelect"><option value=""></option><option value="0">轻松融</option><option value="1">...
layui之select的option叠加问题的解决方法
下面我就为大家分享一篇layui之select的option叠加问题的解决方法，具有很好的参考价值，希望对大家有所帮助。我在使用layui，在select的地方遇到了坑，select里的值居然无法清空，select里的option还有叠加问题，为了解决这个问题，也达到我的功能，我研究了下，让有同样需求的小伙伴不踩坑，特贴上我的源码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>layui-下拉框联动测试</title><link rel="style...
layui动态与静态分页实现步骤详解【图】
这次给大家带来layui动态与静态分页实现步骤详解，layui动态与静态分页实现的注意事项有哪些，下面就是实战案例，一起来看一下。开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们...
layui实现动态和静态分页【图】
本篇文章通过实例给大家分享了layui实现动态和静态分页的详细方法，以及效果展示，有需要的朋友可以跟着参考学习下。开发管理后台是每一个开发人员都要熟悉的一个环节，作为后端程序员，公司的所有机密数据都掌握在我们手上，所以这个时候，如果不是公司的核心成员，是不能接触到某些数据的，这个时候所有的工作都落到了我们的手上，从PS到Linux都需要我们亲历亲为，还好发现了layui这个前端框架，很大程度上减轻了我们的压力．今天...
jquerylayui弹出层使用详解
这次给大家带来jquery layui弹出层使用详解，jquery layui弹出层使用的注意事项有哪些，下面就是实战案例，一起来看一下。Jquery必须大于1.83layui必须是all，否则不显示<script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script>html代码<input id="about" type="button" value="修改考勤" class="layui-btn layui-btn-normal" />主要js代码<script>$(input#about).on(click, function (...
layuiselect如何动态添加option
这次给大家带来layui select如何动态添加option，layui select动态添加option的注意事项有哪些，下面就是实战案例，一起来看一下。html<form class="layui-form" action=""><p class="layui-form-item proSelect"><label class="layui-form-label">产品类别</label><p class="layui-input-block editWidth"><select name="productList" lay-verify="required" id="zcySelect"><option value=""></option><option value="0">轻松融<...
用checkbox操作layui表格
这次给大家带来用checkbox操作layui表格，用checkbox操作layui表格的注意事项有哪些，下面就是实战案例，一起来看一下。在之前的版本，默认复选框是要有值得，默认为“勾选”两个字，在表格里用来做选择不适合，很难改，还好layui升级后，可以支持不写name值，来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)<span style="white-space:pre;"> </span><p class="layui-form"><table class="layui-table"><t...
layui弹窗内窗口之间怎样传参数
这次给大家带来layui弹窗内窗口之间怎样传参数，layui弹窗内窗口之间传参数的注意事项有哪些，下面就是实战案例，一起来看一下。本文介绍了layui弹窗父子窗口之间传参数的方法，分享给大家，具体如下：1、父页面打开子页面并向子页面传参数function setChooseValues(ret){ var oView = document.getElementById("userName"); var oValue = document.getElementById("userIds"); var i = 0; if( ret != null){ oValue.value=""...
layui中的树形关于取值传值详解【图】
这次给大家带来layui中的树形关于取值传值详解，layui中的树形取值传值的注意事项有哪些，下面就是实战案例，一起来看一下。本文介绍了layui中的树形关于取值传值问题，分享给大家，具体如下：这个是我们需要的效果，实际操作中会先执行渲染 然后在执行方法，然后我们发现树形的JSON是空，调试了N遍一直以为是优先级别的问题了。最后解决方案是<script type="text/javascript">////layui 的 form 模块var form = "";layui.use([for...
layui中select的option叠加问题
在使用layui，在select的地方遇到了坑，select里的值居然无法清空，select里的option还有叠加问题，为了解决这个问题，也达到我的功能，我研究了下，让有同样需求的小伙伴不踩坑，特贴上我的源码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>layui-下拉框联动测试</title><link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" > </head> <body> <p id="wrap"><p class="layui-f...
layui中select动态添加option
本文主要为大家分享一篇layui select动态添加option的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。html<form class="layui-form" action=""><p class="layui-form-item proSelect"><label class="layui-form-label">产品类别</label><p class="layui-input-block editWidth"><select name="productList" lay-verify="required" id="zcySelect"><option value=""></option><option v...
layui表格checkbox全选样式功能的实例代码
本文主要为大家分享一篇layui表格checkbox选择全选样式及功能的实例，希望能帮助到大家。在之前的版本，默认复选框是要有值得，默认为“勾选”两个字，在表格里用来做选择不适合，很难改，还好layui升级后，可以支持不写name值，来适应表格中的选择操作。1、layui版本号为 v1.0.9 rls版本(当前最新版本)<span style="white-space:pre;"> </span><p class="layui-form"><table class="layui-table"><thead><tr><th><input type="che...