<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
<script src="__STATIC__/layui/layui.js"></script>
<form class="layui-form" action="" method="post" >
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required 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[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" 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>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>

安装步骤

1:下载(https://www.layui.com)

2.下载到桌面

3.打开(解压)安装包

.

4.引入

5、进行引入

layui使用

1. 点击实例,找到layui适合模板

2. 新建html将代码复制到对应模板,修改对应样式路径。(例:回收站--> admin/admin/recycle)

3. 修改对应参数。

4. 定义路由

5. controller处理参数,并调用模型。

模型对应处理

以上实现列表展示数据。

6. 实现删除

7. 后端删除代码的实现。

路由:

controller处理

模型处理:

8. 批量删除

路由:

controller处理

模型处理:

9. 数据恢复功能。

路由:

controller处理

模型处理:

10. 搜索功能实现。

根据截图查找对应代码。

copy 复制对应代码

修改代码。

controller处理:

模型处理:

表头参数 templet 使用:

1. 状态选型。

2. 时间戳转化。

3. 图片展示功能。

layui 的使用 表单的使用的更多相关文章

  1. layui渲染form表单

    有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的内容,如果要局部刷新表单,则加上如下代码: layui.use('form', function() { var form = ...

  2. layui中form表单渲染的问题

    layui 官网的这部分文档介绍:http://www.layui.com/doc/modules/form.html#render 注意:针对的是表单元素,input select  textare ...

  3. 【layui】提交表单

    1 <script type="text/javascript"> layui.use(['form', 'layer', 'jquery'], function () ...

  4. layui模板注册表单

    今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...

  5. layui弹出表单提交后,界面model验证部分起作用

    情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...

  6. layui 常见的表单元素

    第一步:引用文件 效果图(日期.文件上传在下面): <form class="layui-form" action=""> <div clas ...

  7. layui的form表单的checkbox全选与全不选问题

    <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <m ...

  8. Layui我提交表单时,table.reload(),表格会请求2次,是为什么?

    重载两次是因为搜索按钮用的是button 改成<a class="layui-btn" data-type="reload">搜索</a> ...

  9. .net core使用Ku.Core.Extensions.Layui实现layui表单渲染

    演示网站地址:http://layui.kulend.com/项目地址:https://github.com/kulend/Ku.Core.Extensions/tree/master/Ku.Core ...

随机推荐

  1. NSMutableString常用方法

    1.NSMutableString常用方法 - (void)appendString:(NSString *)aString; 拼接aString到最后面 NSMutableString *strM ...

  2. typora与picgo搭配gitee的图床使用

    关于基础配置,参考下面4篇文章 https://segmentfault.com/a/1190000039358062 https://blog.csdn.net/qq_42827680/articl ...

  3. 如何在 Xamarin 中快速集成 Android 版认证服务 - 邮箱地址篇

    Xamarin 作为微软提供的移动服务多系统开发平台,成为很多开发者首选的应用开发平台.AppGallery Connect(以下简称 AGC)也在逐步的支持 Xamarin 的 SDK.认证服务也是 ...

  4. VMware15.5虚拟机安装及LInux系统安装前 准备工作

    VMware15.5虚拟机安装及Linux系统安装前 准备工作 一.vmware15.5安装 1.安装环境准备 1.vmware15.5版本和秘钥(版本资源和密钥小白已经上传到资源文档里面,要想下载可 ...

  5. Solution Set -「ARC 107」

    「ARC 107A」Simple Math   Link.   答案为: \[\frac{a(a+1)\cdot b(b+1)\cdot c(c+1)}{8} \] 「ARC 107B」Quadrup ...

  6. OpenHarmony移植案例与原理:startup子系统之syspara_lite系统属性部件

    摘要:本文介绍下移植开发板时如何适配系统属性部件syspara_lite,并介绍下相关的运行机制原理. 本文分享自华为云社区<openharmony移植案例与原理 - startup子系统之sy ...

  7. c++ 子类与父类之间的类型转换

    子类与父类之间的类型转换 先给一段代码 class Base { public: int a = 10; }; class pub_Derv : public Base { Base *getBase ...

  8. JMM之Java中锁概念的分类总结

    在Java的并发编程中不可避免的涉及到锁.从不同维护可以将锁进行不同的分类,如下: 1.乐观锁和悲观锁(根据读写操作的比例划分) 乐观锁是一种乐观思想,即认为读多写少,遇到并发写的可能性低,每次去拿数 ...

  9. IDEA配置scala

    IDEA中配置scala 准备:先下好IDEA和scala安装包,配置好jdk环境 scala不想去官网下载的可以直接去百度网盘下载 链接: 链接:https://pan.baidu.com/s/17 ...

  10. [旧][Android] View 工作原理(二)

    备注 原发表于2016.05.27,资料已过时,仅作备份,谨慎参考 前言 本文大量参照<Android 开发艺术探索>及参考资料的内容整合,主要帮助自己理清 View 的工作原理.深入学习 ...