layui 的使用 表单的使用
<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 的使用 表单的使用的更多相关文章
- layui渲染form表单
有时ajax请求的数据返回时,页面已经加载了,此时就无法展示ajax加载的内容,如果要局部刷新表单,则加上如下代码: layui.use('form', function() { var form = ...
- layui中form表单渲染的问题
layui 官网的这部分文档介绍:http://www.layui.com/doc/modules/form.html#render 注意:针对的是表单元素,input select textare ...
- 【layui】提交表单
1 <script type="text/javascript"> layui.use(['form', 'layer', 'jquery'], function () ...
- layui模板注册表单
今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...
- layui弹出表单提交后,界面model验证部分起作用
情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...
- layui 常见的表单元素
第一步:引用文件 效果图(日期.文件上传在下面): <form class="layui-form" action=""> <div clas ...
- layui的form表单的checkbox全选与全不选问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Layui我提交表单时,table.reload(),表格会请求2次,是为什么?
重载两次是因为搜索按钮用的是button 改成<a class="layui-btn" data-type="reload">搜索</a> ...
- .net core使用Ku.Core.Extensions.Layui实现layui表单渲染
演示网站地址:http://layui.kulend.com/项目地址:https://github.com/kulend/Ku.Core.Extensions/tree/master/Ku.Core ...
随机推荐
- Spring service本类中方法互相调用事物失效问题
简介 Spring事物利用的是AOP,动态代理采用CGLIB代理(默认,也可以用Proxy代理,但是Proxy代理效率低于CGLIB代理).故只要弄懂Spring的AOP实现,就知道为什么servic ...
- Ajax创建对象的方法
ajax涉及的技术包括Html.css.dom.xml.javascript等. 主流创建ajax对象的方法: IE6以下版本浏览器创建ajax对象方法是: 定义一个方法创建ajax对象:
- Guava学习之EventBus
一.EventBus的使用案例 EventBus是Guava的事件处理机制,是设计模式中的观察者模式(生产/消费者编程模型)的优雅实现.对于事件监听和发布订阅模式,EventBus是一个非常优雅和简单 ...
- 定制博客CSS样式
首先你需要添加页面CSS代码
- Maven多环境配置实战 filter
目前在开发一个wap项目,主要有开发.测试和最终部署上线几个阶段,每个阶段对配置(数据库.日志)都有不同的设置.以前都是以开发环境为主,在测试和部署上线时由部署工程师负责修改配置并上线.但是公司并非都 ...
- go基础——if语法
package main import "fmt" /* 条件语句:if 注意点: 1.if后的{,要与if条件写在同一行: 2.else要跟在}之后,不能另起一行: 3.if和e ...
- 基于C6678+XC7V690T的6U VPX信号处理卡
一.概述 本板卡基于标准6U VPX 架构,为通用高性能信号处理平台,系我公司自主研发.板卡采用一片TI DSP TMS320C6678和一片Xilinx公司Virtex 7系列的FPGA XC7V6 ...
- Solution -「ZJOI2012」「洛谷 P2597」灾难
\(\mathcal{Description}\) link. 给定一个捕食网络,对于每个物种,求其灭绝后有多少消费者失去所有食物来源.(一些名词与生物学的定义相同 w.) 原图结点数 \ ...
- suse 12 二进制部署 Kubernetets 1.19.7 - 第05章 - 部署kube-nginx
文章目录 1.5.部署kube-nginx 1.5.0.下载nginx二进制文件 1.5.1.编译部署nginx 1.5.2.配置nginx.conf 1.5.3.配置nginx为systemctl管 ...
- c++ 文本处理
c++ 文本处理 1.使用sstream版本 (1)功能:截取第一列为1以后的数据,如下图,截取第5行(包括第5行)以后的数据,前面4行数据丢弃. (2)代码:textProc.cc #include ...