当前位置: 首页 > news >正文

Layui框架使用入门

前言

对于后端开发人员而言,Layui框架的确是一个非常友好的前端页面脚手架,用于开发一些管理后台系统类的项目非常便捷。只需要掌握了传统的Web静态页面开发的三要素:HTML,CSS和JavaScript,就可以轻松掌握对Layui框架的使用。
但是在项目实践中,通常也无需直接基于Layui框架进行开发,大多数情况下可以直接使用Layuimini模板,更加高效和便捷。

使用Layui框架常遇到的问题

对弹窗表单赋值

html代码:

<body><div class="layui-form" lay-filter="useradmin" id="useradmin"><div class="layui-form-item"><label class="layui-form-label">用 &nbsp;户&nbsp;名</label><div class="layui-input-inline"><input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"></div></div></div>
</body>

JavaScript代码:

layer.open({type: 2,title: '编辑用户',content: 'xx.html',maxmin: true,area: ['500px', '450px'],btn: ['确定', '取消'],yes: function(index, layero){省略...},success: function(layero, index){// 方式一  其实就是获取的 子页面的 div 	 var div = layero.find('iframe').contents().find('#useradmin');  // div.html() div里面的内容,不包含当前这个div// 方式二  var body = layer.getChildFrame('body', index);  // body.html() body里面的内容 /* ---- 附加内容 看看就好  Begin ---- */var iframeWindow = window['layui-layer-iframe'+ index]   // 方式一: 得到iframe页的窗口对象var iframeWindow = window[layero.find('iframe')[0]['name']];   // 方式二: 得到iframe页的窗口对象/* ---- 附加内容 看看就好  End ---- */// 测试 :body.find("#username").val("admin");  // 方式一div.find("#username").val("admin");   // 方式二  }
});

下拉框不显示

html代码:

<div class="layui-form-item"><label class="layui-form-label">卡片类型</label><div class="layui-input-inline"><select name="type" id="type" lay-filter="type"><option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div>
</div>

JavaScript代码:

layui.use('form', function(){var form = layui.form; form.render();
}); 

发送Ajax请求

JavaScript代码:

layui.use(['form'], function () {var $ = layui.jquery,form = layui.form;$.ajax({url: "http://localhost:8080/add",cache: "false",    //  设置为false将不会从浏览器中加载请求信息async: "false",    // true所有请求均为异步请求dataType: "json",  // 请求返回数据的格式type: "GET",       // 请求方式success: function(data) {//请求成功后的回调方法console.log(data);},error:function () {//请求失败后的回调方法console.log("error: " + data);}});
}

【参考】
layui 对弹窗 form表单赋值
layui 下拉框不显示解决方法
JavaScript | 文本复制工具clipboard.js的使用详解
使用 $.ajax 发送json数据示例代码(GET、POST区别)

http://www.hskmm.com/?act=detail&tid=33722

相关文章:

  • The 2024 ICPC Asia Hangzhou Regional Contest
  • 手机也能用的在线p图网站,大图轻松处理
  • Spring Boot框架常见问题
  • C# - Socket 基础指南
  • XSS检测绕过(UTF-7编码绕过)
  • Java平台的SQL监控组件
  • 2025 年东莞网络公司推荐,东莞市正度网络科技有限公司提供企业网络营销全流程适宜落地方案
  • 2025 年无锡短视频拍摄公司推荐:宜兴企拓网络,提供新媒体营销与短视频全流程解决方案
  • 2025 年中心供氧系统厂家推荐:山东恒大医用设备工程有限公司,提供医疗工程一体化解决方案
  • CF2135 C. By the Assignment
  • 2025 年防爆冰箱厂家推荐:浙江其春电气技术解析,防爆冰箱 / 冷柜 / 空调专业解决方案与应用实践
  • 2025 年互联网推广公司推荐:北京蓝海引擎科技,为中小企业提供智能化数字营销解决方案
  • Android 网络请求:多功能网络请求库
  • 触想参与国家标准起草,助力行业规范化发展
  • 349. 两个数组的交集
  • F5 BIG-IP 16.1.6.1 - 多云安全和应用交付
  • 2025 年最新推荐!污水处理设备优质厂家排行榜,帮企业避开劣质产品选到高效靠谱设备
  • Burp Suite Professional 2025.10 发布 - Web 应用安全、测试和扫描
  • 2025 年最新推荐真空炉制造厂家榜单:覆盖高温烧结 / 真空退火 / 智能铍铜炉,助力企业精准选型
  • 数论——CF757B Bashs Big Day
  • F5 安全事件:BIG-IP 源代码被窃取
  • F5 BIG-IP 15.1.10.8 - 领先的应用交付与安全服务
  • 2025 测量仪器厂家最新推荐榜单:国产新锐与领军品牌深度解析,精准匹配工业科研需求
  • Ant Design:企业级 UI 设计语言与 React 组件库
  • 2025 年最新推荐钢套钢保温钢管源头厂家榜:聚焦品质与实力,精选优质厂家助力采购决策
  • 2025年10月市场地位认证机构推荐榜:尚普与华信人深度对比评测
  • 2025年10月智能体公司推荐榜单:五强对比与中立评测助您精准选型
  • XPath索引定位深度解析://X[n]与(//X)[n]的本质区别
  • 2025年10月波形护栏厂家推荐榜单:基于公开数据的中立对比与选购参考
  • 优化电商包装的机器学习模型解析