一、开始前准备

到官网下载layui需要的文件
在html文件里面导入：

    <script src="../layui/layui.js"></script><link rel="stylesheet" href="../layui/css/layui.css"><link rel="stylesheet" href="../layui/css/layui.mobile.css"><!--顺便引入jquery在线文件--><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

二：表单的使用

全部html的代码：

    <form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">账户</label><div class="layui-input-block"><input type="text" name="title" required id="eMail" value="123@qq.com"  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码框</label><div class="layui-input-inline"><input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"></div><div class="layui-form-mid layui-word-aux">辅助文字</div></div><div class="layui-form-item"><label class="layui-form-label">选择框</label><div class="layui-input-block"><select name="city" lay-verify="required"><option value=""></option><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option><option value="4">杭州</option></select></div></div><div class="layui-form-item"><label class="layui-form-label">复选框</label><div class="layui-input-block"><input type="checkbox" name="like" value="1" title="写作"><input type="checkbox" name="like" value="2" title="阅读" checked><input type="checkbox" name="like" value="3" title="发呆"></div></div><div class="layui-form-item"><label class="layui-form-label">开关</label><div class="layui-input-block"><input type="checkbox" name="switch" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">单选框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form>

代码说明：

通过给元素的class赋值使用layui给定的官方样式

还有其他元素的样式通过查看文档给它赋值就行了。

效果图如下：

重点在于JS代码的编写，此处的JS代码直接放在表格html文件下的

   layui.use('form', function(){$("#eMail").blur(function(){$.ajax({type: "get",url: "/checkAdmin"+$("#eMail").val(),success:function(data){if(data.code!=0){layer.msg(data.msg);$("#eMail").val("");$("#eMail").focus();}}});});var form = layui.form;//监听提交form.on('submit(formDemo)', function(data){var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});var arr = new Array();//将复选框选中的内容用，拼接成字符串var inputs = document.getElementsByName("like")for(var i = 0; i < inputs.length;i++){if (inputs[i].checked)arr.push(inputs[i].value);}data.field.like = arr.join(",")//ajax请求的参数直接用data.field获取表单里含有name属性的元素的值$.ajax({type: "post",url: "/layui/formSubmit",data:data.field,dataType:"json",success:function(d){if(d.code==200){layer.msg("请求成功");}else{layer.msg("错误码为200");}}});return false;//false表示不重新加载页面，true表示重新加载});});

通过调用layui.use使用你需要用的layui模块，比如这里就是form模块，

匿名函数function是回调函数，当form模块加载完毕后，就会调用这个回调函数，一般所有的代码都放在回调函数里面

        $("#eMail").blur(function(){$.ajax({type: "get",url: "/checkAdmin"+$("#eMail").val(),success:function(data){if(data.code!=0){layer.msg(data.msg);$("#eMail").val("");$("#eMail").focus();}}});});

这个代码部分的作用：比如这是个注册表单，当用户输入账号、跳出账号框时，将账号信息发送到后台，让后台返回当前账户是否已经被注册过的信息，提供更好的反馈性。

当用户点击按钮提交时的js代码：

        var form = layui.form;//监听提交form.on('submit(formDemo)', function(data){var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});var arr = new Array();//将复选框选中的内容用','拼接成字符串var inputs = document.getElementsByName("like")for(var i = 0; i < inputs.length;i++){if (inputs[i].checked)arr.push(inputs[i].value);}//ajax请求的参数直接用data.field获取表单里含有name属性的元素的值data.field.like = arr.join(",")$.ajax({type: "post",url: "/layui/formSubmit",data:data.field,dataType:"json",success:function(d){if(d.code==200){layer.msg("请求成功");}else{layer.msg("错误码为200");}}});return false;//false表示不重新加载页面，true表示重新加载});

form.on(‘submit(formDemo)’, function(data) 里的’submit(formDemo)'与html里的提交按钮是相对应的。

<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

三、数据表格的使用

效果图：

html的代码部分很简单：

<body>
<!--搜索栏-->
<div class="layui-inline"><input class="layui-input" name="id"  id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="search" data-type="reload">全称搜索</button>
<!--layui的数据表格-->
<table id="demo" lay-filter="demo"></table>
</body>

JS的全部代码：


<script>layui.use(['table'],function () {var table = layui.table;table.render({id:'demo',//elem对应于html里table的idelem: '#demo',url: "/layui/data" //数据接口//where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值,where:{searchable:false,search:"something"}//解析返回的数据//     response: {//     statusName: 'status' //规定数据状态的字段名称，默认：code//         ,statusCode: 200 //规定成功的状态码，默认：0//         ,msgName: 'hint' //规定状态信息的字段名称，默认：msg//         ,countName: 'total' //规定数据总数的字段名称，默认：count//         ,dataName: 'rows' //规定数据列表的字段名称，默认：data// } ,//   ,cellMinWidth: 80,limit:10//每页默认数,limits:[10,20,30,40] //分页的下拉框（即选择每页有多少条数据),page: true //开启分页,toolbar: '#toolbarDemo'//头部工具栏，这里引用的是id为toolbardemo的script标签，下文给出//表格属性,cols: [[ //第一列的复选框{type:'checkbox'}// field用来指定该列对应的是json数据的哪一个属性//          title表示列头的名称，sort表示该列是否开启排序,{field:'id', title: 'ID', sort: true},{field:'username', title: '登陆名'},{field:'fullname', title: '全称'},{field:'email', title: '邮箱'}//templet用来在做一些html的渲染，这里是id为sexTpl的script标签,{field:'sex', title: '性别',templet: '#sexTpl'},{field:'phone', title: '联系方式'},{field:'roleName', title: '角色'}//toolbar表示这一列是一个行内工具栏,{title: '操作',toolbar: '#barEdit'}]]// ,where: {timestamp: (new Date()).valueOf()}});//监听头部工具条事件$("#selected").click(function () {var checkStatus = table.checkStatus('demo'),data = checkStatus.data;var datastr = "";for(var i = 0; i < data.length;i++){datastr += data[i].id + ",";}layer.alert(datastr)})//监听单元格编辑table.on('edit(demo)', function(obj){var value = obj.value //得到修改后的值,data = obj.data //得到所在行所有键值,field = obj.field; //得到字段layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);});//监听搜索$("#search").click(function () {var str = $("#demoReload").val();console.log(str)//执行重载table.reload('demo', {page: {curr: 1 //重新从第 1 页开始},where: {key: str}});})//监听行工具事件table.on('tool(demo)', 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 === 'edit'){layer.prompt({formType: 2,value: data.email}, function(value, index){obj.update({email: value,});layer.close(index);});}});})
</script>

这是头部工具栏的script标签

<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" id="selected" lay-event="selected">获取选中的用户id</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div>
</script>

行内工具栏（即效果图里的操作与删除）

<script type="text/html" id="barEdit"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

后端传来的性别一般是0和1表示，这是将0和1转换成汉字的script标签：

<script type="text/html" id="sexTpl">{{#  if(d.sex === '0'){ }}<span style="color: #F581B1;font-weight: bolder;">女</span>{{#  } else if(d.sex === '1'){ }}<span style="color: #FF5722;font-weight: bolder;">男</span>{{#  } else{ }}<span style="color: #c1e2b3;font-weight: bolder;">保密</span>{{#  } }}
</script>

代码说明：

        //监听头部工具条事件$("#selected").click(function () {var checkStatus = table.checkStatus('demo'),data = checkStatus.data;var datastr = "";for(var i = 0; i < data.length;i++){datastr += data[i].id + ",";}layer.alert(datastr)})

获取选中的用户id按钮是方便以后的一些批量操作，效果如图：

搜索的处理

        //监听搜索$("#search").click(function () {var str = $("#demoReload").val();console.log(str)//执行重载table.reload('demo', {page: {curr: 1 //重新从第 1 页开始},where: {key: str}});})

通过jquery获取到输入框的搜索值，然后调用table.reload函数重载数据表格，page指定layui以第几页开始，where里放入我们的搜索值传递给后台。

四、其他

可以利用layer.msg()，layer.alert(datastr)显示一些简单的弹出层

datatable的全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据表格</title><script src="../layui/layui.js"></script><link rel="stylesheet" href="../layui/css/layui.css"><!--<link rel="stylesheet" href="../layui/css/layui.mobile.css">--><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--搜索栏-->
<div class="layui-inline"><input class="layui-input" name="id"  id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="search" data-type="reload">全称搜索</button>
<!--layui的数据表格-->
<table id="demo" lay-filter="demo"></table>
</body>
<script>layui.use(['table'],function () {var table = layui.table;table.render({id:'demo',elem: '#demo',url: "/layui/data" //数据接口//where用来传递额外的参数，searchable表示是否启动搜索，search表示搜索的值,where:{searchable:false,search:"something"}//解析返回的数据//     response: {//     statusName: 'status' //规定数据状态的字段名称，默认：code//         ,statusCode: 200 //规定成功的状态码，默认：0//         ,msgName: 'hint' //规定状态信息的字段名称，默认：msg//         ,countName: 'total' //规定数据总数的字段名称，默认：count//         ,dataName: 'rows' //规定数据列表的字段名称，默认：data// } ,//   ,cellMinWidth: 80,limit:10//每页默认数,limits:[10,20,30,40] //分页的下拉框（即选择每页有多少条数据),page: true //开启分页,toolbar: '#toolbarDemo'//头部工具栏，这里引用的是id为toolbardemo的script标签//表格属性,cols: [[ //第一列的复选框{type:'checkbox'}// field用来指定该列对应的是json数据的哪一个属性//          title表示列头的名称，sort表示该列是否开启排序,{field:'id', title: 'ID', sort: true},{field:'username', title: '登陆名'},{field:'fullname', title: '全称'},{field:'email', title: '邮箱'}//templet用来在做一些html的渲染，这里是id为sexTpl的script标签,{field:'sex', title: '性别',templet: '#sexTpl'},{field:'phone', title: '联系方式'},{field:'roleName', title: '角色'}//toolbar表示这一列是一个行内工具栏,{title: '操作',toolbar: '#barEdit'}]]// ,where: {timestamp: (new Date()).valueOf()}});//监听头部工具条事件$("#selected").click(function () {var checkStatus = table.checkStatus('demo'),data = checkStatus.data;var datastr = "";for(var i = 0; i < data.length;i++){datastr += data[i].id + ",";}layer.alert(datastr)})//监听单元格编辑table.on('edit(demo)', function(obj){var value = obj.value //得到修改后的值,data = obj.data //得到所在行所有键值,field = obj.field; //得到字段layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);});//监听搜索$("#search").click(function () {var str = $("#demoReload").val();console.log(str)//执行重载table.reload('demo', {page: {curr: 1 //重新从第 1 页开始},where: {key: str}});})//监听行工具事件table.on('tool(demo)', 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 === 'edit'){layer.prompt({formType: 2,value: data.email}, function(value, index){obj.update({email: value,});layer.close(index);});}});})
</script>
<script type="text/html" id="barEdit"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="sexTpl">{{#  if(d.sex === '0'){ }}<span style="color: #F581B1;font-weight: bolder;">女</span>{{#  } else if(d.sex === '1'){ }}<span style="color: #FF5722;font-weight: bolder;">男</span>{{#  } else{ }}<span style="color: #c1e2b3;font-weight: bolder;">保密</span>{{#  } }}
</script>
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" id="selected" lay-event="selected">获取选中的用户id</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button></div>
</script>
</html>

六、后端返回数据格式说明

{
"code":0,//请求状态码，0代表请求成功
"msg":"",//请求出错时后端返回的反馈信息
"data":[{"id":5,"username":"fg","fullname":"fgsfg","email":"666@qq.com","sex":1,"phone":"2222","rolename":"888"},{"id":6,"username":"fgfg","fullname":"hhh","email":"666@qq.com","sex":2,"phone":"99999","rolename":"dfsdf"},{"id":7,"username":"jklkl","fullname":"jfg","email":"666@qq.com","sex":0,"phone":"999","rolename":"999"},{"id":10,"username":"用户+i","fullname":"人0","email":"5555@qq.com","sex":0,"phone":"100686","rolename":"管理员"},{"id":11,"username":"用户+i","fullname":"人1","email":"5555@qq.com","sex":1,"phone":"100686","rolename":"管理员"},{"id":12,"username":"用户+i","fullname":"人2","email":"5555@qq.com","sex":2,"phone":"100686","rolename":"管理员"},{"id":13,"username":"用户+i","fullname":"人3","email":"5555@qq.com","sex":0,"phone":"100686","rolename":"管理员"},{"id":14,"username":"用户+i","fullname":"人4","email":"5555@qq.com","sex":1,"phone":"100686","rolename":"管理员"},{"id":15,"username":"用户+i","fullname":"人5","email":"5555@qq.com","sex":2,"phone":"100686","rolename":"管理员"},{"id":16,"username":"用户+i","fullname":"人6","email":"5555@qq.com","sex":0,"phone":"100686","rolename":"管理员"}],"count":603 //数据的长度
}

layui的表单与表格使用详解相关推荐

layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...
ONLYOFFICE的表单复杂字段开发详解
上一回图文讲到了表单文件的入门使用,展示了使用正则表达式来设计开发逻辑复杂的填表域空格的功能,但是,正则表达式是一种非常难学的晦涩难懂的语言,虽然掌握后是屠龙宝刀,正则表达式不是谁都可以学得会的-- ...
HTML表单的enctype属性详解{转}
用Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对.这是标准的编码格式 ...
Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
php ci框架自动验证,CodeIgniter表单验证方法实例详解
本文实例讲述了CodeIgniter表单验证方法.分享给大家供大家参考,具体如下: 1.在D:\CodeIgniter\system\application\views目录下写一个视图文件myform ...
表单提交enctype参数详解之：application/x-www-form-urlencode和multipart/form-data
application/x-www-form-urlencode 我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 默 ...
createform用法_vue自定义表单生成器form-create使用详解
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...

layui的表单与表格使用详解

一、开始前准备

二：表单的使用

代码说明：

三、数据表格的使用

代码说明：

四、其他

datatable的全部代码

六、后端返回数据格式说明

layui的表单与表格使用详解相关推荐

最新文章

热门文章