【layui】教程文章相关的互联网学习教程文章

Layui 总结(1) 弹出层【代码】

1.弹出小提示tips 默认吸附在自己地方控制弹出的位置 可以让其吸附在其他元素附近 ,在内容后面增加一个jq选择器 <input type="text"><span id="ss">asdasdasdasdweq</span><script>function tan() {layer.tips(‘我是另外一个tips,只‘,"#ss" ,{tips: [1, ‘#3c3c3c‘],time: 4000});}$("input:text").focusout(tan)</script> 原文:https://www.cnblogs.com/nice2018/p/10011306.html

datatable转layui表格【偏原理】

如题这个类负责把datatable转换为layui表格可以显示的内容。适合配合表格url字段的webapi服务端,为其返回响应字符串。代码如下:using System;using System.Web;using System.Text;using System.Data;using System.Net.Http;namespace MyClass{ public class Layui_helper { static string datatable2json(DataTable table) { StringBuilder jsonBuilder = new StringBuilder(); jsonB...

LayUi 触发事件

1、所有代码写在layui.use()里面。2、触发事件(util)。https://www.layui.com/doc/modules/util.html<button class="layui-btn layui-btn-radius layui-btn-primary layui-col-md-offset5" lay-active="eldownload" style="border-color:#1e9fff;width:200px;" id="download">下载</button>layui.use(["util","element"],function(){let util=layui.let;var element=layui.element; util.event(‘lay-active‘,{eldownload:functio...

使用jquery+layui 做一个输入搜索下拉 类似lay-search【图】

效 果: 因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西。 一开始使用lay-search 的控件去弄。 但是无法控制里面的内容。所以用了一些笨方法去弄 废话不说了,html部分: <div > <input type="text" name="HandoverCompany" id="HandoverCompany" onchange="checkInputValueLow(this)" class="layui-input" placeholder="请输入检查单位" style="position:absolute;z-index:2;width: 78...

layui 之监听 select 的变化【代码】

不废话直接上代码layui.use([‘form‘], function () {var form = layui.form;form.on(‘select(quiz1)‘, function (data) {//监听quiz1console.log(data)var url=iotIpport+"/ccpiot/api/assets/modules/"+ data.value+"/assets"$.ajax({url:url,contentType:"application/json;charset=UTF-8",type:‘GET‘,async:false,success: function (res) {let data=res.results,str1=`<option value="">请选择资产</option>`;data.map((...

adminlte+layui框架搭建2 - 动态菜单【代码】

动态菜单参考文章:https://cloud.tencent.com/developer/article/1342558主要修改两个地方:1.系统初始化加载一级菜单,在adminlte.js文件$(window).on(‘load‘, function () {$.ajax({url: "/Home/GetTree?id=0",type: "Post",timeout: 5000,async: true,dataType: "json",success: function (data) {if (data != null && data != undefined) {var leftTreeBox = $("#ModuleNav").empty();leftTreeBox.append("<li class=\"head...

layuimini父子菜单-python实现【代码】

现在项目使用了laymini的后台框架,非常不错,美中不足,没有构建菜单的python示例,遂自己写了一个,供大家参考:数据库表结构CREATETABLE `system_menu` (`id` int(11) unsigned NOTNULL AUTO_INCREMENT COMMENT ‘ID‘,`pid` int(11) unsigned NOTNULLDEFAULT‘0‘ COMMENT ‘父ID‘,`title` varchar(100) NOTNULLDEFAULT‘‘ COMMENT ‘名称‘,`icon` varchar(100) NOTNULLDEFAULT‘‘ COMMENT ‘菜单图标‘,`href` varchar(10...

layui开关switch显示不全问题【代码】【图】

先看效果:开关显示不全,高度也不对称。解决:在所用到的html/jsp中自己加css.layui-form-switch {width: 52px;height: 23px; } 再看效果: 原文:https://www.cnblogs.com/xiaostudy/p/11109465.html

12 图书管理系统(SSM+LayUi)【代码】

图书类型管理-添加图书类型在typeIndex.jsp中找到添加的相关代码进行修改修改监听add添加的监听事件,修改跳转路由 /*** toolbar事件监听*/table.on(‘toolbar(currentTableFilter)‘, function (obj) {if (obj.event === ‘add‘) { // 监听添加操作var content = miniPage.getHrefContent(‘<%=basePath%>typeAdd‘);var openWH = miniPage.getOpenWidthHeight();var index = layer.open({title: ‘添加图书类型‘,type: 1,sh...

layui常用的验证

var LayVerifyExtend = { notnullNonnegativeInteger: function (value, item) { //value:表单的值、item:表单的DOM对象 if (!/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\d+)?$/.test(value)) return ‘只能输入非负整数!‘; }, maxlength: function (value, item) { //value:表单的值、item:表单的DOM对象 if (GetLength(value) > item.maxLength) return ‘只能输入‘ + item.maxLen...

layui模块化----自定义模块定义和使用基础知识【代码】

layui基础知识1.layui模块化编程引入方法 只需要引入两个文件layui.css和layui.js<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>开始使用layui</title><link rel="stylesheet" href="layui/css/layui.css"> </head> <body><!-- 你的HTML代码 --><script src="layui/layui.js"></script> <script> //一般直接写在一个js文件...

00028-layui 表单有子列表,如何动态新增和保存(表格table行编辑)?【代码】

html: <div ><div ><div >资料清单</div><div ><table lay-filter="serviceMaterialListTable"></table><script type="text/html" ><div ><button data-type="addMaterial">添加</button></div></script><script type="text/html" ><%--<a lay-event="editMaterial">编辑</a>--%><a lay-event="delMaterial">删除</a></script><script type="text/html" ><select name="type" lay-filter="service_material_type" autocompl...

00032-layui 树形下拉选择 xmSelect(二):数据懒加载【代码】

<div ><label >证照名称<span >*</span></label><div ><div ></div><input type="hidden" name="licenceId"><input type="hidden" name="licenceName"></div> </div>layui.config({base: ‘${ctxLayui}/layuiadmin/‘ }).extend({index: ‘lib/index‘ }).use([‘index‘, ‘form‘,‘dict‘,‘laydate‘,‘util‘,‘xmSelect‘,‘upload‘], function(){var $ = layui.$ ,form = layui.form;var dict = layui.dict;var laydate =...

formSelects-v4.js 基于Layui的多选解决方案【图】

详情链接地址: https://hnzzmsf.github.io/example/example_v4.html#select_search_server1、闲谈杂趣v3传送门 v3文档其实思考了很久, 还是放弃了v3, 因为开发v3的时候很粗暴, 按照编程角度来看就是硬撸, 也怪自己实力有限, 所以反思了一下, 尝试着继续前行...2、交流学习QQ号: 707200833 QQ群: 769620939 重要的事情说三遍, 看文档, 看文档, 看文档, 文档中很多都已经标注了, 文档不清楚的话, 可以加群@群主 群主会在第一时...

Js控制css实现同一个按钮实现展示与隐藏内容(LayUI)

<button class="layui-btn layui-btn-primary layui-col-md-offset8" lay-active="dropDownContent"> <i class="layui-icon layui-icon-app layui-bg-white"></i> </button><div class="layui-row" style="display:none;" id="downCent">展示隐藏内容 </div>layui.use(["util", "dropdown"], function () {let util=layui.util; util.event(‘lay-active‘, { ...