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 数 ...
随机推荐
- fa-list-alt
你可以用 <i> 标签把 Font Awesome 图标放在任意位置. <i class="fa fa-list-alt" aria-hidden="t ...
- ajax页面刷新小错误（提交按钮type必须为button，而不能是submit）
背景: 使用ajax提交form表单时,提交按钮的type值写为了submit,导致ajax中回调函数中的提示信息toastr.success('提交数据成功');没有执行,只执行了alert语句 , ...
- 【深度学习与神经网络】深度学习的下一个热点——GANs将改变世界
本文作者 Nikolai Yakovenko 毕业于哥伦比亚大学,目前是 Google 的工程师,致力于构建人工智能系统,专注于语言处理.文本分类.解析与生成. 生成式对抗网络-简称GANs-将成为深 ...
- 最新 蓝鲸人java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 蓝鲸人等10家互联网公司的校招Offer,因为某些自身原因最终选择了 蓝鲸人.6.7月主要是做系统复习.项目复盘.Leet ...
- redis 主从 哨兵
数据库为什么要读写分离 写代码好多年了,大家先抛弃在代码框架里面各种花哨的设计之外,写的代码到最后无非就是为了增删查改数据库.一般项目数据库刚开始只是但一个库,随着数据量的增大,就开始优化数据库(抛开 ...
- todo---git 生成密钥 原理分析
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDRJkDZ2z7syFC2QDCaORKF41ecwbL/kyFwkycOVE3MavTRBliAhoAhOaZQTr4j ...
- IntelliJ IDEA - 查找代码提交人
转载. https://blog.csdn.net/abcyyjjkk/article/details/88995503 如果Annocation不可用
- （十七）springMvc 对表单提交的日期以及JSON中的日期的参数绑定
文章目录 前言 `Ajax`提交表单数据 `Ajax`提交`JSON` 格式数据 解决输出JSON乱码的问题 控制JSON输出日期格式 小记 前言 springMVC 提供强大的参数绑定功能,使得我们 ...
- 20191125：Python中的上下文管理机制with
20191125:with上下文管理 with是一个上下文管理器,用于执行代码块所需要的运行的时候的上下文入口和出口.上下文管理器的典型用法包括保存和还原各种全局状态,锁定和解锁资源,关闭打开的文件等 ...
- Scratch编程：躲开鲨鱼（五）
“ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍 这是一款简单的小游戏,实现了用鼠标控制一条小海星在水里游 ...