layui学习笔记
2.17、表单对象form
-
通过下面的一个form表单说明一下layui关于表单的一些属性与方法
<!docutype html> <html> <head> <!--引入相关layui资源文件--> </head> <body> <form class="layui-form" action="" lay-filter="myForm"> <div class="layui-form-item"> <label class="layui-form-label">用户名：</label> <div class="layui-input-block"> <input type="text" name="uname" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码：</label> <div class="layui-input-block"> <input type="password" name="upwd" lay-verify="title" autocomplete="off" placeholder="请输入密码" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">手机：</label> <div class="layui-input-inline"> <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">邮箱：</label> <div class="layui-input-inline"> <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">爱好：</label> <div class="layui-input-block"> <select name="aihao" lay-filter="aihao" lay-search="" id="aihao"> <option value="写作">写作</option> <option value="阅读">阅读</option> <option value="游戏">游戏</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别：</label> <div class="layui-input-block"> <input type="radio" lay-filter="man" name="sex" value="男" title="男" checked=""> <input type="radio" lay-filter="man" name="sex" value="女" title="女"> <input type="radio" name="sex" value="禁" title="禁用" disabled=""> </div> </div> <div class="layui-form-item" pane=""> <label class="layui-form-label">兴趣：</label> <div class="layui-input-block"> <input type="checkbox" value="写作" lay-filter="like" name="like" lay-skin="primary" title="写作" checked=""> <input type="checkbox" value="阅读" lay-filter="like" name="like" lay-skin="primary" title="阅读"> <input type="checkbox" value="游戏" lay-filter="like" name="like" lay-skin="primary" title="游戏"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">是否在职：</label> <div class="layui-input-block"> <input type="checkbox" lay-filter="switchFilter" name="switch" lay-skin="switch" lay-text="是|否"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="button" class="layui-btn layui-btn-primary" id="myButton">新增一个下拉框选项</button> <button type="button" class="layui-btn layui-btn-primary" id="valueButton">获取表单值</button> </div> </div> </form> <script src="js资源路径"></script> </body> </html> -
监听提交事件
lay-submit触发提交校验
触发校验条件
1）需要校验的form标签要具备校验属性lay-verify ，例如lay-verify=“required|phone” 表示不能为空且必须为手机号格式
2）提交按钮要有lay-submit属性
表单提交事件
<script> form.on('submit(demo1)', function(data){ // demo1为要监听的提交按钮的lay-filter值 console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 }); </script> -
监听下拉框改变事件
<script> form.on('select(aihao)', function(data){ // man为select标签lay-filter属性值 console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 }); </script> -
监听复选框选中事件
<script> form.on('checkbox(like)', function(data){ // like为checkbox每一个子项的lay-filter属性值 console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中，true或者false console.log(data.value); //复选框value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 }); </script> -
监听开关事件
form.on('switch(switchFilter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //开关是否开启，true或者false console.log(data.value); //开关value值，也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 }); -
关于表单元素渲染问题
元素渲染问题（通过给下拉框添加一个选项案例说明）
1、layui表单的下拉框、复选框、单选框是经过layui渲染之后展示给我们的，并且该过程是在页面加载时完成的，那么当我们再页面加载完成以后再向该页面加入以上三个组件时，若我们不刷新页面效果是不出来的，必须要将这些改变渲染出来，使用form.render(filter属性值) 方法就可以实现不刷新页面而使改变生效。如下图所示，通过一个按钮动态的给select添加子项option
js代码如下：
$("#myButton").click(function() { // 得到select var $ah = $("#aihao"); // alert($ah.html()); $ah.append("<option value=运动>运动</option>"); // alert($ah.html()); // 渲染添加元素，此步骤必须 form.render("select"); }); -
表单初始化（元素赋值，注意复选框不适合该种方式，需要单独赋值）
// 表单赋值 form.val("myForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值 "uname": "马目沙" // "name": "value" ,"upwd": "333" ,"phone": "18899532311" ,"email": "18899532311@163.com" ,"aihao": "游戏" ,"sex": "男" ,"switch": "是" }); -
表单复选框赋值
// 特例，给复选框赋值 var hobby = "篮球,唱歌,阅读"; // 后台查到的值 var hobbies = hobby.split(","); // 逗号分割取出值 // 得到复选框的所有值 var $like = $("[name='like']"); // 比较数据库数据与复选框数据 $.each(hobbies,function(i,item) { // alert("item="+item); $.each($like,function(j,jtem) { var $jtem = $(jtem); // $like使jquery对象，但是它的每一个元素是dom对象，将其转为jquery对象 if(item == $jtem.val()) { $jtem.attr("checked","checked"); }; }); }); /* $.each(hobbies,function(i,item) { // alert("item="+item); $.each($like,function(j,jtem) { // alert(jtem.getAttribute("value")); if(item == jtem.getAttribute("value")) { // 使用dom对象方法 jtem.setAttribute("checked","checked"); }; }); }); */ form.render(); // 重新渲染
2.18、弹出层【重点】
-
什么是弹出层？
其实之前js中我们就一直在使用弹出层（alert()语句就是弹出层），只是显示不太美观而已。需要注意的是弹出层优先级是大于它的背景层的，比如我们不关闭alert()提示时我们是点不了页面其他元素的。
-
弹出层分类
1、首先创建一些按钮，通过按钮的单击事件来触发弹出层效果
<button type="button" class="layui-btn" id="btn1">layer.alert</button> <button type="button" class="layui-btn" id="btn2">layer.confirm</button> <button type="button" class="layui-btn" id="btn3">layer.msg</button> <div class="layui-btn-container" style="margin-top:100px; margin-left:100px"> <button type="button" class="layui-btn" id="btn4">layer.tips</button> </div> <div class="layui-btn-container" style="margin-top:100px; margin-left:100px"> <button type="button" class="layui-btn" id="btn5">layer弹出一段h5</button> <button type="button" class="layui-btn" id="btn6">layer弹出iframe</button> </div> <div id="myDiv" style="display: none"> <div class="site-title"> <fieldset><legend><a name="theme">主题</a></legend></fieldset> </div> <button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮</button> <button type="button" type="button" class="layui-btn">默认按钮</button> <button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮</button> <button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮</button> <button type="button" type="button" class="layui-btn layui-btn-danger">警告按钮</button> <button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按钮</button> <a class="layui-btn">AAAA</a> </div>2、引入弹出层模块
layui.use(["element","jquery","form","layer"],function() { var element = layui.element; var $ = layui.jquery; var form = layui.form; var layer = layui.layer; }3、提示框
$("#btn1").click(function() { // layer.alert('加了个图标', {icon: 1}); // 该方式点击确定会自动关闭弹层不需要调用close(index) layer.alert("操作成功",{icon: 1},function(index) { layer.close(index); }); });效果：
确认框
$("#btn2").click(function() { layer.confirm("确认提交吗？",{icon: 3,title:"提示"},function(index) { layer.close(index); }); });效果：
提示框：类似于我们第一次打开一个应用时的引导
$("#btn4").click(function() { layer.tips("在上面", "#btn4", { tips: 2 // 1、2、3、4分别代表上右下左方向 }); });效果：
open()方法，最重要的方法，使用该方法可以打开一个table、一个页面，是前后端交互的直接入口
// 弹出层open方法：弹出一段h5页面 $("#btn5").click(function() { layer.open({ /* 1、open方法默认的type是0，打开的弹层效果类似与layer.alert()弹层 且只有type为0时可以加图标icon，参照与layer.alert()弹层图标，且 将content当作字符串处理 2、open的type为1时若content是一个h5格式的字符串，会将该字符串渲染 为对应的h5显示； 3、open的type为2时表示iframe，content传递一个url，将该url对应的页面显示为iframe */ type: 1, title: "提示", content: $("#myDiv"), area: ["500px","300px"], // 宽高 move: false, // 是否可以拖动该弹出层 // 给窗口设置按钮并设置回调函数 btn: ['确认', '取消'], yes: function(index, layero){ //按钮【按钮一】的回调 layer.close(index); }, btn2: function(index, layero){ // return false 开启该代码可禁止点击该按钮关闭 }, }); });打开一个iframe：
// 弹出层open方法：iframe $("#btn6").click(function() { layer.open({ type: 2, title: "提示", content: "form2.html", // 页面地址 area: ["1000px","500px"], btn: ['确认', '取消'], yes: function(index, layero){ //按钮【按钮一】的回调 layer.close(index); }, btn2: function(index, layero){ // return false 开启该代码可禁止点击该按钮关闭 }, move: false, }); });
2.19、数据表格【重点】
数据表格是我们在各种管理系统中必用到的组件，来看看layui的数据表格吧
-
初始化数据表格
1、准备好数据源，这里准备一个json文件，实际开发中只要是json格式的数据都可以
{ "code": 0 ,"msg": "" ,"count": 8 ,"data": [{ "id": "10001" ,"username": "杜甫" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。" ,"experience": "116" ,"ip": "192.168.0.8" ,"logins": "108" ,"joinTime": "2016-10-14" ,"LAY_CHECKED": true }, { "id": "10002" ,"username": "李白" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。" ,"experience": "12" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" ,"LAY_CHECKED": true }, { "id": "10003" ,"username": "王勃" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "65" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10004" ,"username": "李清照" ,"email": "xianxin@layui.com" ,"sex": "女" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "666" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10005" ,"username": "冰心" ,"email": "xianxin@layui.com" ,"sex": "女" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "86" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }, { "id": "10006" ,"username": "贤心" ,"email": "xianxin@layui.com" ,"sex": "男" ,"city": "浙江杭州" ,"sign": "人生恰似一场修行" ,"experience": "12" ,"ip": "192.168.0.8" ,"logins": "106" ,"joinTime": "2016-10-14" }] }2、准备表格容器与相关按钮
<table class="layui-hide" id="userTable" lay-filter="userTable"></table> <!-- 左侧工具栏 --> <div class="layui-btn-group layui-hide" id="btnGroup" > <button class="layui-btn layui-btn-xs" id="add" lay-event="add">新增</button> <button class="layui-btn layui-btn-xs" id="delete" lay-event="delete">删</button> <button class="layui-btn layui-btn-xs" lay-event="getRow">获取已选中行</button> <button class="layui-btn layui-btn-xs" lay-event="refresh">刷新</button> </div> <!-- 右侧列工具条 --> <div class="layui-btn-group layui-hide" id="btnGroupRight" > <button class="layui-btn layui-btn-xs" lay-event="update">编辑</button> <button class="layui-btn layui-btn-xs" lay-event="del">删除</button> </div>3、初始化表格，注释中给出了表格相关属性解释
layui.use(["jquery","form","layer","table"], function() { var $ = layui.jquery; var form = layui.form; var layer = layui.layer; var table = layui.table; // 初始化表格 table.render({ elem: "#userTable", // 绑定的table标签的id属性选择器 url: "resources/json/userdata.json", // 数据接口，开发中推荐 title: "用户数据表", // 导出数据时文件名 page: true, // 是否开启分页，默认分页大小10 /* toolbar:是否开启根据栏，支持四种类型参数 1、toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器，一般写一个按钮组，将外层div的id选择器作为toolbar的值 2、toolbar: '<div>xxx</div>' //直接传入工具栏模板字符 3、toolbar: true //仅开启工具栏，不显示左侧模板 4、toolbar: 'default' //让工具栏左侧显示默认的内置模板，添加、修改、删除 注意：若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数 */ toolbar: "#btnGroup", // width: 300, 设置容器宽度（类型Number），table容器默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。 // height: 300, 设置table容器高度（类型number） // cellMinWidth: 300, 设置表格全局单元格最小宽度，默认60，其优先级低于表头参数中的 minWidth /* done: function () { alert("hello"); }, 表格渲染完毕后的回调函数*/ /* limit: 5, // 分页大小，值务必对应 limits 参数的选项。 limits: [5,10,15,20], */ cols: [[ /* type：设定列类型，可选值如下： 1、normal：常规列，无需设定 2、checkbox：复选框 3、radio：单选框 fixed：固定列，可选值如下： 1、left：固定在最左边且定义在clos第一个，不随着滚动条滚动 2、right：固定在最右边且定义在clos最后一个，不随着滚动条滚动 */ {type: 'checkbox', fixed: 'left'} /* 1、filed属性分别与json数据的key一一对应 2、titlt为表格的列名 3、width为表格该列的宽度 */ /* field：设置字段名，一般与数据库字段名相同 title：表格列名 width: 列宽 LAY_CHECKED：打开表格是否选中该列（默认false），必须开启复选框才生效且数据库中也要有该字段且值为true */ ,{field:'id', title:'ID', width:80} ,{field:'username', title:'用户名', width:120, edit: true, event: "edit"} ,{field:'email', title:'邮箱', width:150} ,{field:'sex', title:'性别', width:80} ,{field:'city', title:'城市', width:100} ,{field:'sign', title:'签名'} ,{field:'experience', title:'积分', width:80} ,{field:'ip', title:'IP', width:120} // sort：是否可以排序 // unresize：是否禁用拖拽列宽（默认：false） // edit：单元格是否可编辑（默认false，只支持text） // event：自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理 // align：单元格排列样式（默认align，居中），left、right // templet：模板语法，实现单元格显示自定义 ,{field:'logins', title:'登入次数', width:100, sort: true} ,{field:'joinTime', title:'加入时间', width:120} // toolbar：单元格绑定工具条模板 ,{fixed: "right", title: "操作", toolbar: "#btnGroupRight", width: 150} ]] }); }4、事件监听
// 监听复选框事件 table.on("checkbox(userTable)", function(obj) { alert("已选中!"); }); // 单元格编辑事件 table.on("edit(userTable)", function(obj) { alert("已编辑！"); }); //触发行单击事件 /* table.on('row(userTable)', function(obj){ alert("已单击！"); }); */ //触发行双击事件 table.on('rowDouble(userTable)', function(obj){ alert("已双击！"); });5、工具栏事件监听
//头工具栏事件 table.on('toolbar(userTable)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'add': alert("add!"); break; case 'delete': alert("delete!"); break; case 'refresh': tableIns.reload({url: "resources/json/userdata.json"}) break; case 'getRow': var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值 console.log(checkStatus.data) //获取选中行的数据 console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件 console.log(checkStatus.isAll ) //表格是否全选 break; } }); //监听行工具事件 table.on('tool(userTable)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'add'){ layer.prompt({ formType: 2 ,value: data.email }, function(value, index){ obj.update({ email: value }); layer.close(index); }); } });
2.22、树形组件dtree
-
树型组件在开发中使用还是很多的，例如权限管理等由层级关系的数据。比较常见的由ztree、dtree等
-
使用：
下载：访问dtree官网进行下载
引入相关文件：layui-ext
准备数据源，json格式即可
{
"code":0,
"msg":"操作成功",
"data":[
{"id":"001","title": "湖南省","last": false,"parentId": "0","checkArr": "0","spread": true},
{"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": "0"},
{"id":"001001","title": "长沙市","last":true,"parentId": "001","checkArr": "0"},
{"id":"001002","title": "株洲市","last":true,"parentId": "001","checkArr": "0"},
{"id":"001003","title": "湘潭市","last":true,"parentId": "001","checkArr": "0"},
{"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": "0"},
{"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": "0"},
{"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": "0"},
{"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": "0"},
{"id":"002003","title": "潜江市","last":true,"parentId": "002","checkArr": "0"},
{"id":"002004","title": "荆州市","last":true,"parentId": "002","checkArr": "0"},
{"id":"002005","title": "襄阳市","last":true,"parentId": "002","checkArr": "0"}
]
}
准备树容器承接树
<!--
data-id: 树的加载数据中，根节点对于的parentId的值，如设置了dataFormat:"list"，则此属性必输
-->
<ul id="demoTree" class="dtree" data-id="0"></ul> <!-- 通过dtree的render()方法渲染为树 -->
初始化树，部分重要属性已在注释做了解释与示例
// 级联调用
layui.extend({
dtree: 'resources/layui_ext/dist/dtree' // {/}的意思即代表采用自有路径，即不跟随 base 路径
}).use(['dtree','layer','jquery',"form"], function(){
var dtree = layui.dtree;
var layer = layui.layer;
var $ = layui.jquery;
var form = layui.form;
// 初始化树
/* var DemoTree = dtree.render({
elem: "#demoTree", // ul的id值
// 使用list风格数据格式参数设置如下
url: "resources/json/asyncTree2.json",
// 注意code的状态值，若为list风格，必须为200，原因尚不清楚
dataFormat: "list", //配置data的风格为list
}); */
var DemoTree = dtree.render({
elem: "#demoTree", // ul的id值
// 使用layui+list风格数据格式参数设置如下
url: "resources/json/asyncTree1.json", // 使用url加载（可与data加载同时存在）
dataStyle: "layuiStyle", //使用layui风格的数据格式
dataFormat: "list", //配置data的风格为list
response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
checkbar:true, //开启复选框
// edit: true, 是否开启节点编辑图标，默认为false
// 若想指定哪个节点默认展开则在json文件中使用"spread": true,并且指定下列属性
initLevel: "1" , //默认展开层级为1
// ficon: ["2","4"], // 一级图标非叶子、叶子节点图标
// icon: ["2","4"] // 二级图标非叶子、叶子节点图标
// line: true 开启树线
// skin: "layui" 树主题，默认为"theme"
// menubar: true 开启菜单栏，默认false
// toolbar: true, // 开启工具栏（可编辑模式），默认右键节点呼出
// toolbarWay: "fixed" // 修改工具栏跟在节点右侧
});
}
layui学习心得就分享这么多，自己学的也很浅，希望能够帮助到各位，觉得还可以的话就点个关注、点个赞、来个评论来个全套，谢谢各位大佬。代码和笔记已上传至gitee仓库，有兴趣的小伙伴可以下载到本地运行看一下效果。
2119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
