layui表单
{include file="Public:inner_header" /}
<link rel="stylesheet" href="__STATIC__/add/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<!-- 表单搜索 -->
<div class="layui-input-inline" style="margin-top:1em;margin-bottom: 1em; width: 100%">
<form class="layui-form" lay-filter="component-form-group" id="search_submits" onsubmit="return false">
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-useradmin-formlist">
<div class="layui-inline">
<label class="layui-form-label">名称：</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="name" name="name" placeholder="用户名称" width="80px">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">处理状态</label>
<div class="layui-input-block">
<select name="statusFeed" id="statusFeed" lay-filter="" lay-search>
<option value="">选择状态</option>
<option value="0">未处理</option>
<option value="1">已处理</option>
</select>
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit="search_submits" lay-filter="reloadlst_submit">查询</button>
</div>
</div>
</form>
</div>
<div class="layui-btn-group demoTable">
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
<button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>
<table class="layui-table" lay-data="{height:'', url:'{:url('Achievementactivity/fenye')}', page:true, id:'demo', skin: 'row', even: true}" lay-filter="demo" id="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox'}">ID</th>
<th lay-data="{field:'id', sort: true}">ID</th>
<th lay-data="{field:'title'}">标题</th>
<th lay-data="{field:'start_time'}">开始时间</th>
<th lay-data="{field:'end_time'}">结束时间</th>
<th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
</tr>
</thead>
</table>
<!-- 日志弹出层 -->
<div id="tanchu" style="display: none">
<table class="layui-hide" id="rizhi" lay-filter="rizhi"></table>
</div>
<!-- 编辑弹出层 -->
<form class="layui-form" id="testbj" style="display:none" name="testbj" >
<div class="layui-form-item" style="padding-top: 1em;">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input" id="username" style="width:200px">
</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="on" 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="quiz" lay-search>
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</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="写作" lay-skin="primary">
<input type="checkbox" name="like[read]" title="阅读" checked lay-skin="primary">
<input type="checkbox" name="like[dai]" title="发呆" lay-skin="primary">
</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" lay-text="开启|关闭">
</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" style="padding-right:1em;">
<label class="layui-form-label" >文本域</label>
<div class="layui-input-block">
<textarea lay-verify="required" name="wenben" id="wenben" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
</form>
<!-- 切换卡 -->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" id="docDemoTabBrief" style="display: none">
<ul class="layui-tab-title" id="xuanbiaoti">
</ul>
<div class="layui-tab-content" style="height: 100px;" id="xuanxiang"> </div>
</div>
<!-- <table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script type="text/html" id="barDemo">
<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 src="__STATIC__/js/jquery.min.js" charset="utf-8"></script>
<script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="usernameTpl">
<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.title }}</a>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" href='{:url("Achievementactivity/layuiadd")}'>添加</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="rizhi">日志</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="qiehuan">切换</a>
</script>
<script>
//使用from搜索，可以使用 form.on监听表单搜索动作，但必须在下面定义
layui.use(['table', 'form','element'], function(){
var $ = layui.jquery;
var table = layui.table;
//layui.use中加入form后使用form监听提交表单事件，此处必须进行定义否则报错
var form = layui.form;
var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块,只需要把这个放到这里效果就有
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
//console.log(obj)
});
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
// 自动获取id
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
alert(data.id);
layer.confirm('真的删除'+data.id+'行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
// layer.alert('编辑行：<br>'+ JSON.stringify(data))
var tebj = $("#testbj").serialize() + '&id='+data.id;
console.log(tebj);
var id = data.id;
alert(id);
$.ajax({
url:'{:url("Achievementactivity/edits")}',
type:'get',
async:true,
data:"id=" + id,
dataType: 'json',
success:function(data){
console.log(data.msg);
$('#wenben').val(data.msg.aa);
}
});
layer.open({
type:1,
area:['500px','600px'],
title: 'tianxie'
,content: $("#testbj"),
shade: 0,
btn: ['提交', '重置']
,btn1: function(index, layero){
var kk=$("#username").val();
//ajax
$.ajax({
//请求方式
type : "POST",
//请求地址
url : "",
//数据，json字符串
data : $("#testbj").serialize(),
//请求成功
success : function(result) {
//JSON.stringify($("#testbj").serialize())
console.log($("#testbj").serialize());
layer.close(index);
// console.log(result);
},
//请求失败，包含具体的错误信息
error : function(e){alert(7777);
//console.log(e.status);
}
});
},
btn2: function(index, layero){
return false;
},
cancel: function(layero,index){
layer.closeAll();
}
});
} else if(obj.event === 'rizhi') {
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['95%', '500px'], //宽高
title:'日志详情',
content:$("#tanchu"),
// 日志弹框列表 js 实现代码
success: function(layero, index){
layui.use('table', function(){
var table = layui.table;
var cols = [[ //标题栏
{field:'id', title: 'ID', sort: true}
,{field:'title', title: '标题'}
,{field:'status', title: '状态', sort: true},
{field:'start_time', title: '开始时间', sort: true}
]]
//展示已知数据
table.render({
elem: '#rizhi'
, url: '{:url("Achievementactivity/fenye")}'
,size:'sm'
,cols:cols
,even: true
, height: '420'
,page: true //是否显示分页
});
});
}
});
//layer.msg('日志ID：'+ data.id + ' 的日志操作');
} else if(obj.event === 'qiehuan') {
//iframe层-父子操作,弹出ifram层并传递id给他，后端只需要接受即可
layer.open({
type: 2,
area: ['700px', '550px'],
title:'切换卡'+data.id,
fixed: false, //不固定
maxmin: true,
content: '{:url("Achievementactivity/qiehuan")}?id='+data.id,
});
//页面层,此处考虑单独写一个选项卡表单提交页面，然后这里弹窗调用它
/* layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['65%', '500px'], //宽高
title:'切换卡'+data.id,
content:$("#docDemoTabBrief"),
//弹框列表 js 实现代码，显示该id下的几个内容
success: function(layero, index){
var urlList=[];
var titlelist = [];
$.ajax({
url:'{:url("Achievementactivity/qiehuan")}',
type:'get',
async:true,
data:"id=" + data.id,
dataType: 'json',
success:function(res){
titlelist.push('<li class="layui-this">网站设置</li>');
titlelist.push('<li >用户管理</li>');
titlelist.push('<li >权限分配</li>');
titlelist.push('<li >商品管理</li>');
titlelist.push('<li >订单管理</li>');
urlList.push('<div class="layui-tab-item layui-show">'+res.data.detail_img+'</div>');
urlList.push('<div class="layui-tab-item">'+res.data.title+'</div>');
urlList.push('<div class="layui-tab-item">'+res.data.add_time+'</div>');
urlList.push('<div class="layui-tab-item">'+res.data.reference_money+'</div>');
urlList.push('<div class="layui-tab-item">'+res.data.id+'</div>');
$('#xuanbiaoti').html(titlelist);
$('#xuanxiang').html(urlList);
}
});
}
});*/
}
});
var $ = layui.$, active = {
getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('idTest'),
data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //获取选中数目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//列表搜索
form.on('submit(reloadlst_submit)', function (data) {
var name = data.field.name;
var statusFeed = data.field.statusFeed;
console.log(name);console.log(statusFeed);
table.render({
elem: '#demo' // 此处id为table的id
, url: "{:url('Achievementactivity/formsousuo')}?name="+name+"&status="+statusFeed
, cols: [[
{field: 'id', title: '问题编号'}
, {field: 'id', title: 'ID编号'}
, {field: 'title', title: '标题'}
, {field: 'status', title: '状态'}
// , {field: 'start_time', title: '开始时间'}
, {
field: 'start_time',
title: '开始时间',
templet: '<div>{{ layui.util.toDateString(d.开始时间*1000) }}</div>'
}
, {
field: 'end_time',
title: '创建时间',
templet: '<div>{{ layui.util.toDateString(d.end_time*1000) }}</div>'
}
, {field: 'is_check', title: '核算'}
, {title: '操作', align: 'center', toolbar: '#sousuocaozuo', minWidth: 150}
]]
,page: true
});
return false;
});
//列表搜索jieshu
});
</script>
<script type="text/html" id="sexTpl">
{{# if(d.status === '0'){ }}
<span style="color: #ff0023;">未上架</span>
{{# } else if(d.status === '1'){ }}
<span >已上架</span>
{{# } else if(d.status === '2'){ }}
<span style="color: #009688;" >已下架</span>
{{# } }}
</script>
<script type="text/html" id="sousuocaozuo">
<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="barDemo1">
<a class="layui-btn layui-btn-xs" lay-event="edit">工具性按钮</a>
</script>
<!-- <script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'{:url("Achievementactivity/fenye")}'
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: true //不显示首页
,last: true //不显示尾页
}
,cols: [[
{type:'checkbox'}
,{field:'id', title: 'ID', sort: true}
,{field:'title', title: '标题'}
,{field:'status', title: '状态', sort: true}
,{field:'start_time', title: '开始时间'}
,{field:'end_time', title: '结束时间', minWidth: 150}
,{field:'is_check', title: '核算', sort: true}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(test)', 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>
-->
</body>
</html>
layui表单的更多相关文章
- layui表单验证
layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...
- layui 表单遇到的小问题
select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*opt ...
- layui表单提交
关于layui表单提交 只是简单用一个文本框记录一下提交过程 其他的如下拉框选择框样式可以参考官网 下面直接开始.首 一:前台页面 <!DOCTYPE html><html& ...
- 组件 layui 表单抓取数据四步走
注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...
- .net core使用Ku.Core.Extensions.Layui实现layui表单渲染
演示网站地址:http://layui.kulend.com/项目地址:https://github.com/kulend/Ku.Core.Extensions/tree/master/Ku.Core ...
- 使用layer弹窗和layui表单做新增功能
注释:代码参考http://blog.51cto.com/825272560/1891158,在其修改之上而来,在此感谢! 1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,li ...
- 解决layui表单ajax提交回调函数不起作用问题的两种方式
最近想用layui开发一个论坛模板用的是fly-ui,才接触layui对其还不太熟悉.一个简单的登录就困扰了我很久.登录的form通过ajax提交回调函数老是不起作用.经过浪费了N多时间的调试,发现l ...
- 00008 - layui 表单验证，需要验证，但非必输
当使用layui的验证规则,比如 手机, <input type="text" name="userName" lay-verify="phon ...
- layui 表单验证汇总
1 表单自带校验 lay-verify:是表单验证的关键字有以下值供选择: required 必填项phone 手机号email 邮箱date 日期url 链接identity 身份证number 数 ...
随机推荐
- linux本地检测tomcat是否启动成功
@参考文章 原文如下: linux本地检测如何tomcat是否启动成功? 解决方法: 1.curl 127.0.0.1:8080 第一可以知道本地是否可以访问tomcat,返回页面代码 2.tail ...
- Spring MVC 验证表单
在实际工作中,得到数据后的第一步就是检验数据的正确性,如果存在录入上的问题,一般会通过注解校验,发现错误后返回给用户,但是对于一些逻辑上的错误,比如购买金额=购买数量×单价,这样的规则就很难使用注 ...
- Python - Django - ORM QuerySet 方法补充
models.py: from django.db import models class Employee2(models.Model): name = models.CharField(max_l ...
- linux如何查看mysql是否启动
linux下有很多服务,今天就写一下如何查看服务是否启动,以mysql为例子 使用命令 # service mysqld status 或者 # service mysql status 命令来查看m ...
- Configuration system failed to initialize
引用:https://cloud.tencent.com/developer/article/1336954 重装.net Framework
- 使用 LVS 实现负载均衡原理及安装配置详解（课堂随笔）
一.负载均衡LVS基本介绍 LB集群的架构和原理很简单,就是当用户的请求过来时,会直接分发到Director Server上,然后它把用户的请求根据设置好的调度算法,智能均衡地分发到后端真正服务器(r ...
- [转帖]微软击败亚马逊 赢得五角大楼的100亿美元JEDI云合同
微软击败亚马逊 赢得五角大楼的100亿美元JEDI云合同 https://www.cnbeta.com/articles/tech/903507.htm 微软Azure的胜利 国防部证实,美国政府已向 ...
- [Visual Studio] - Unable to launch the IIS Express Web server 问题之解决
背景 Visual Studio 2015 在 Debug 模式下调试失败. 错误 解决 删除解决方案下 .vs/config 文件夹,重新运行解决方案可进行调试. 参考资料 https://stac ...
- Visual Studio 设置为 UTF-8 保存格式
1. 步骤 Visual Studio 提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符. 在 VS 中,该命令没有默认显示在「文件」菜单中.用户需要手工设置,才能显示该命令. ...
- Python Threading 线程/互斥锁/死锁/GIL锁
导入线程包 import threading 准备函数线程,传参数 t1 = threading.Thread(target=func,args=(args,)) 类继承线程,创建线程对象 class ...