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 数 ...
随机推荐
- 一秒解决--------No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
在打war包时候遇到错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.6.0:compile (d ...
- doris: shell invoke .sql script for doris and passing values for parameters in sql script.
1. background in most cases, we want to execute sql script in doris routinely. using azkaban, to l ...
- k8s、jenkins集成
参考连接 http://www.uml.org.cn/jchgj/201804252.asp https://huanqiang.wang/2018/03/30/Jenkins-Gitlab-Kube ...
- 【pip升级导致错误】 多个pip导致明明已经安装了包但是报no module错误
原来一直用apt install 默认安装的pip 8.01版本,今天因为一些原因,将pip升级到了19.01.升级后就导致了错误. 直接pip installl --upgrade pip,发现报权 ...
- Linux脚本检测当前用户是否为root用户
#/bin/bash if [ $UID -ne 0 ]; then echo Non root user. Please run as root. else echo Root user fi
- git 操作说明
第一步:代码提交到本地仓库 第二步:更新远程服务器代码到本地,如果有冲突需要优先解决,解决冲突后执行第一步操作 第三步:推送本地代码到远程服务器,可以使用source Tree 或者工具自带的配置gi ...
- 我的Java之路
前言: 之前在学习python,刚开始的时候跟多数小白一样学习一些基础的知识,比如数据类型,用法,基本的语言结构,学了一段时间实在是学习不下去了,真是太TMD的无聊了,很多方法都记不住,也不知道学了这 ...
- xadmin自定义菜单、增加功能、富文本编辑器
xadmin功能:https://www.cnblogs.com/derek1184405959/p/8682250.html#blogTitle7
- Copy-On-Write技术
通俗的解释,假定多方需要使用同一个资源时,没有必要为每一方都创建该资源的一个完整的副本,反而令多方共享这个资源,当某方需要修改资源的某处时,利用引用计数,把该处复制一个副本,再把跟新的内容写入该副本中 ...
- ServiceStack.Redis 连接有密码的Redis问题解决
在ip:port前面加上@用来表示密码,比如password@ip:port <add key="RedisServer" value="123456@127.0. ...