laui使用总结
1、数据表格
数据表格是在 layui 2.0 的版本中全新推出,基本配置文档中都有提出,基本注意配置项如下图,个人在使用中总结一下需要注意的几点:
1)数据来源
数据使用来源有两个,一个直接使用data配置项;而是使用url配置项表格封装的接口请求功能,注意使用url时,根据请求方式有两种情况,如果用get请求就需要配置parseData来解析原始返回的数据供table使用,数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式;但如果用post请求就需要配置response项来重新规定接口返回的数据格式供table使用,借助 response 参数来重新设定返回的数据格式
2)关于表格分页
实现方式有两种,一个是使用独立的laypage分页组件,这种情况需要手动绑定分页的请求,并附带一些额外的请求参数(例如搜索条件),此时的分页的limit和limits配置需要配置在laypage中才能生效,如果配置在表格的初始化中是不生效的,优先级低于 page 参数中的 limits 参数,并且需要在数据表格中配置limit值必须大于laypage中的limits里的最大值,否则分页切换功能无法生效;
另外一个是使用数据表格自带的分页功能,配置项page:true,此种情况必须使用url的配置方式获取数据,在点击分页时,也会自动发送分页切换请求,页面信息会一并带上,并且分页的配置完全在数据表格中正常配置就ok了,个人感觉使用第二种方案比较方便快捷。
3) 关于templet - 自定义列模板
注意:想要传递整条数据d,需要将字符串拼接时注意单引号和双引号的交替使用,否则会报错,总结一下,
1、单双引号不能连用,包括onclick属性。
2、html标签渲染转义用实体";js转义是反斜杠
3、onclick默认识别为双引号,导致参数里不能用直接双引号,js写时默认转为";
templet:function (d) { return "<a class='checkBtn' onclick='editItem("+JSON.stringify(d)+")'>修改</a>" }
2、表单元素
1)表单元素取值
一是直接取表单lay-filter="example" 的数据var data = form.val('example');
二是可以通过监听提交按钮获取数据
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
form.on('submit(demo1)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) return false; });
2)表单元素的事件监听
可以对提交按钮、单选按钮、下拉框等进行事件监听,并获取选择的value,例如
//监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis) });
3)表单下拉框元素的动态渲染
例如使用vue的循环指令循环option时,需要在每次数据更新后重新渲染一下select,即在vue的updated里面更新渲染,radio单选按钮同理
//表单 <form class="layui-form" action="" lay-filter="versionForm"> //js form.render('select','versionForm');
3、文件上传
layui的文件上传,不知何种原因,使用layui的文件上传,后台返回提交文件为空,但是改成使用element完美解决,具体原因后期探究//拖拽上传 upload.render({
elem: '#test10' ,url: 'https://httpbin.org/post' //改成您自己的上传接口
,accept:'file' //允许上传的文件类型
,size:50 //上传文件大小
,data:{ //额外参数
id:'123'
}
,method:‘post’
,done: function(res){ layer.msg('上传成功'); layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file); console.log(res) } });
注意:该上传接口返回的相应信息(response)必须是一个标准的 JSON 格式
4、日期插件
1)调起日期面板闪现问题
//传入符合format格式的字符给初始值 laydate.render({ elem: '#test' ,value: '2018-08-18' //必须遵循format参数设定的格式 ,min: '2017-1-1' ,max: '2017-12-31' ,trigger: 'click' //采用click弹出 });
其中配置项trigger是自定义弹出事件,默认是focus事件,但是由于遮盖输入框等某些原因会导致弹出框闪现问题,给成click即可解决
5、layui实现下拉多选
第一步: 下载 第二步: 引入 xm-select.js 第三步: 写一个`<div id="demo1"></div>` 第四步: 渲染 var demo1 = xmSelect.render({ el: '#demo1', language: 'zn', data: [ {name: '张三', value: 1}, {name: '李四', value: 2}, {name: '王五', value: 3}, ] })
xm-select配合非常好用,附上文档https://maplemei.gitee.io/xm-select/#/component/install
相关文章
- javaWeb学习总结(1)- Tomcat服务器学习和使用(3)
- 华为 ES使用总结
- NET5 AOP 5个Filter 使用总结
- 总结01分数规划
- ajax和jsonp使用总结
- [转] Java关键字final、static使用总结
- handlebar的一些用法——个人使用总结
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
- BAT测开工程师工作总结,这些都看懂了,数据库SQL就没问题了
- 一句话清晰总结C#的协变和逆变
- C#中各种泛型集合的使用方法总结
- Qt中多线程同步总结示例
- 总结以下三种方法,实现c#每隔一段时间执行代码:
- Git总结笔记1-搭建和使用30条简明笔记
- Memcached 笔记与总结(9)Memcached 与 Session
- PHP 错误与异常 笔记与总结(15 )使用观察者模式处理异常信息
- Redis 笔记与总结5 Redis 常用命令之 键值命令 和 服务器命令 && 高级应用之 安全性 和 主从复制
- PHP 错误与异常 笔记与总结(10)错误处理器测试
- ADS1299开发调试总结之寄存器使用说明简析
- 《数据科学:R语言实战》一1.5 总结
- Vue知识点总结(24)——使用VueCli创建一个项目(超级详细)
- 字符流字节流实用总结
- iOS开发之GCD使用总结
- c++容器vector使用方法总结
- Flink技术灵活使用总结(二)广播变量、广播流的使用
- Flink技术灵活使用总结(一)状态与状态后端
- Flink技术灵活使用总结(四)常见案例代码
- iOS UIApplication的代理方法总结
- 数据库质疑修复(SUSPECT)总结,DBCC报错
- 【转】3年PHPer的面试总结