layui框架下的摸索与学习
一、table表格内的查询
1.单个条件查询：
主要代码:
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/1/14
Time: 18:38
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layui1.css">
<link rel="stylesheet" href="css/modules/layer/default/layer1.css">
<link rel="stylesheet" href="css/view.css"/>
<title>用户管理</title>
</head>
<body class="layui-view-body">
<style>
.get_yzm_div {
width: 500px;
height: 200px;
border: 1px solid #e6e6e6;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-250px, -100px);
background-color: #fff;
padding-top: 20px;
display: none;
}
</style>
<div class="get_yzm_div" id="get_yzm_div" style="display: none;">
<div class="yzm">
<div style="width: 70px;border-right: 1px solid #eee" id="div_tel">手机号</div>
<input type="tel" style="border:none;padding: 10px;width: 329px" placeholder="请输入手机号" id="ipt_tel"/>
</div>
<div class="yzm">
<div style="width: 70px;border-right: 1px solid #eee" id="div_yzm">验证码</div>
<input type="tel" style="border:none;padding: 10px;width: 200px" readonly placeholder="请输入验证码" id="ipt_yzm"/> <div class="get_yzm">
<div id="yzm_shade" style="position:absolute;z-index:6666;display:none;width:120px;height:38px"></div>
<span id="time" style="color: #666;margin-right: 5px"></span> <span
id="re_get">获取验证码</span></div>
</div>
<button class="layui-btn layui-btn-normal layui-btn-radius" style="width: 420px;margin: 30px 40px" id="confirm">确定
</button>
</div>
<div class="layui-content">
<div class="layui-page-header">
<div class="pagewrap">
<span class="layui-breadcrumb">
<a href="bg_index.do">首页</a>
<a href="">用户管理</a>
<a><cite>用户信息</cite></a>
</span>
<h2 class="title">用户信息</h2>
</div>
</div>
<div class="layui-row">
<div class="layui-card">
<div class="layui-card-body">
<div class="form-box">
<div class="layui-form layui-form-item">
<div class="layui-inline">
<div class="layui-form-mid">用户名:</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" autocomplete="off" class="layui-input" name="username" id="username">
</div>
<%--<div class="layui-form-mid">手机号:</div>--%>
<%--<div class="layui-input-inline" style="width: 100px;">--%>
<%--<input type="text" autocomplete="off" class="layui-input" name="phoneNumber">--%>
<%--</div>--%>
<%--<div class="layui-form-mid">邮箱:</div>--%>
<%--<div class="layui-input-inline" style="width: 100px;">--%>
<%--<input type="text" name="email" autocomplete="off" class="layui-input">--%>
<%--</div>--%>
<button class="layui-btn layui-btn-blue" id="find">查询</button>
<%--<button class="layui-btn layui-btn-blue" id="reset">重置</button>--%>
<button class="layui-btn layui-btn-blue" id="add">添加用户</button>
</div>
</div>
<table id="userTable" lay-filter="user"></table>
</div>
</div>
</div>
</div>
</div>
<div id="formdemo" style="display: none">
<form class="layui-form" action="" lay-filter="example" style="height: 400px; width: 400px; margin-left: 100px;">
<div class="layui-form-item" style="margin-top: 20px;">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" autocomplete="off" placeholder="请输入商品名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号</label>
<div class="layui-input-block">
<input type="text" name="phoneNumber" id="number" autocomplete="off" placeholder="请输入数量" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-inline">
<input name="avatar" id="avatar" required lay-verify="required" placeholder="图片地址" class="layui-input">
</div>
<div class="layui-input-inline layui-btn-container" style="width: auto; margin: 14px 0 0 76px;">
<button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload" style="background-color: #009688;color: #fff;">
<img src="data:images/upload.png" style="margin: -3px 0 0 -6px;width: 28px;">
上传图片
</button>
<input class="layui-upload-file" type="file" accept="undefined" name="file">
<button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview" style="background-color: #009688;color: #fff;">查看图片</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" autocomplete="off" placeholder="请填写正确邮箱地址" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
<div class="layui-unselect layui-form-select">
<div class="layui-select-title">
<input name="role" type="text" placeholder="请选择角色" value readonly class="layui-input layui-unselect">
<i class="layui-edge"></i>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门</label>
<div class="layui-input-block">
<div class="layui-unselect layui-form-select">
<div class="layui-select-title">
<input name="role" type="text" placeholder="请选择部门" value readonly class="layui-input layui-unselect">
<i class="layui-edge"></i>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="note" autocomplete="off" class="layui-input">
</div>
</div>
</form>
</div>
<script src="js/layui.js"></script>
<script src="js/layui.js"></script>
<script type="text/html" id="bardemo">
<button class="layui-btn layui-btn-xs" lay-event="edit"> 编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
</script>
<script>
var element = layui.element;
var table = layui.table;
var form = layui.form; layui.use([ 'table'],function () {
var reqJson = {};
var table = layui.table;
var $ = layui.$;
var url = "getUserInfo";
var col = [[ //标题栏
{field: 'id', title: 'ID', width: '5%', sort: true}
,{field: 'bg_roleName', title: '用户姓名',width: '6%',align: 'center'}
,{field: 'bg_Create', title:'创建人',width: '7%',align: 'center'}
,{field: 'name', title: '用户名', minWidth: 120,align: 'center'}
,{field: 'phonenumber', title: '手机号', minWidth: 150,align: 'center'}
,{field: 'avatar', title: '头像', minWidth: 80,align: 'center'}
,{field: 'bg_email',title:'邮箱', mindWidth: 80,align: 'center'}
,{field: 'bg_branch',title: '部门',minWidth:80,align: 'center'}
,{field: 'bg_content',title: '备注',minWidth: 80,align: 'center'}
,{field: 'right',title: '操作',toolbar: '#bardemo', minWidth: 80,align: 'center'}
]];
table.render({
elem: '#userTable'
, url: 'getUserInfo'
, where: { }
, response: {
statusName: 'status' //数据状态的字段名称，默认：code
, statusCode: 200 //成功的状态码，默认：0
, msgName: 'msg' //状态信息的字段名称，默认：msg
}
, request: {
pageName: "page"
, limitName: "limit"
}
, skin: 'line' // 表格风格
, even: true
, page: true // 是否显示分页
, limits: [10, 20, 30]
, limit: 10 // 每页默认显示的数量
, cols: col
}); // 工具栏事件
table.on('tool(user)',function (obj) {
var data = obj.data;
var tr = obj.tr;
var layEvent = obj.event;
if (layEvent == 'edit'){
layer.open({
type:1,
area:['600px','520px'],
btn:["确定","取消"],
btnAlign:'c',
content: $("#formdemo").html(),
success : function (index,layero) {
$("input[name='username']").val(data.name);
$("input[name='phoneNumber']").val(data.phonenumber);
$("input[name='avatar']").val(data.avatar);
$("input[name='email']").val(data.bg_email);
$("input[name='role']").val(data.bg_roleName);
$("input[name='note']").val(data.bg_content);
}
})
} else if (layEvent == 'del'){
layer.confirm("确定删除该用户吗")
}
});
// function user_manage() {
// layer.msg('加载中', {
// icon: 16
// ,time:0
// ,shade: 0.01
//
// });
// $.post("getGoodsBtName", reqJson, function (data) {
// if (reqJson.username != "") {
// reqJson.username = null;
// }
// setLaypage(eval("(" + data + ")").total);
// var rows = eval("(" + data + ")").rows;
// console.dir(rows);
// rows = translate(rows, ceJson, language);
// var col = getTitle();
//
// var tb_data = getTableData("admin_h", col, rows);
//
// table.render(tb_data);
// layer.closeAll();
// });
//
// }
// $("#search").click(function () {
// reqJson.username = $("#username").val();
// user_manage();
// }); active = {
reload:function () {
//执行重载
table.reload('userTable',{
url: 'getUserInfoByName',
page:{
curr:1 //重新从第一页开始
}
,where:{
username: $("#username").val() //设定异步数据接口的额外参数，任意设
}
})
}
};
//查询按钮
$('#find').on('click',function () {
active["reload"] ? active["reload"].call(this) : '';
}); //重置搜索栏内容
$("#reset").on('click',function () {
$("#username").val();
$("#phoneNumber").val();
$("#email").val();
});
});
</script>
</body>
</html>
2.多个条件的查询:
layui框架下的摸索与学习的更多相关文章
- layui框架下如何给select的option选项赋值
后端返回数据格式 axios方法执行成功后返回的数据格式如下图 前端下拉框 <div class="layui-form-item"> <label class= ...
- 解析基于keras深度学习框架下yolov3的算法
一．前言 由于前一段时间以及实现了基于keras深度学习框架下yolov3的算法,本来想趁着余热将自己的心得体会进行总结,但由于前几天有点事就没有完成计划,现在趁午休时间整理一下. 二．Keras框架 ...
- keras框架下的深度学习（二）二分类和多分类问题
本文第一部分是对数据处理中one-hot编码的讲解,第二部分是对二分类模型的代码讲解,其模型的建立以及训练过程与上篇文章一样:在最后我们将训练好的模型保存下来,再用自己的数据放入保存下来的模型中进行分 ...
- 【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子
KnockOutJS学习系列----(一) 好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西. 也很抱歉,突然看到 ...
- 【工作笔记二】ASP.NET MVC框架下使用MVVM模式
ASP.NET MVC框架下使用MVVM模式 原文:http://www.cnblogs.com/n-pei/archive/2011/07/21/2113022.html 对于asp.net mvc ...
- 在Spring Boot框架下使用WebSocket实现消息推送
Spring Boot的学习持续进行中.前面两篇博客我们介绍了如何使用Spring Boot容器搭建Web项目(使用Spring Boot开发Web项目)以及怎样为我们的Project添加HTTPS的 ...
- layUI框架中文件上传前后端交互及遇到的相关问题
下面我将讲述一下我在使用layUI框架中文件上传所遇到的问题: 前端jsp页面: <div class="layui-form-item"> <label cla ...
- JEECG（二） JEECG框架下调用webservice java springmvc maven 调用 webservice
JEECG系列教程二 如何在JEECG框架下使用webservice 本文所使用的webservice是c#开发的 其实无论是什么语言开发的webservice用法都一样 java springmvc ...
- 在vue中使用 layui框架中的form.render()无效解决办法
下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法. 原文地址:小时刻个人技术博客 > http://small.aiweimeng.top/index.php ...
随机推荐
- Windows10 下安装 Mongodb
一.先登录Mongodb官网https://www.mongodb.com/download-center#community 下载 安装包.32.64位的都行.
- 小学生都能学会的python(运算符 和 while循环)
---恢复内容开始--- 小学生都能学会的python(运算符和编码) 一.格式化输出 #占位:"%s"占位,占得是字符串,"%d"占位,占的是数字. # 让用 ...
- 洛谷 P1338 末日的传说 （字典序 + 逆序对）
这道题需要对排列有深刻的理解和认识 给出逆序对的个数,求改逆序对个数的字典序最小的排列 那么既然是最小,那么一开始一段肯定是升序,一直到某个数后才开始改变 即1 2 3-- n-1 n a b c d ...
- Unity 摄像头竖屏预览显示的问题
Unity可以通过WebCamTexture打开摄像头,通过 cameraRawImage.texture = camTexture; 将贴图给RawImage,但是WebCamTexture只能设置 ...
- keil5下载程序时出现“internal command error”解决方法
今天下载的时候,插入下载器,查看Debug可用看到“internal command error”,一直找不到原因,后来查看上一个工程才发现,上一个程序禁用了Seral Wire 引脚,导致的. 解决 ...
- 【henuacm2016级暑期训练-动态规划专题 C】Little Girl and Maximum XOR
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑r最后的二进制形式为 1xxxxx 那么我们肯定想让第一个最高位的1保留. 因此我们选取的另外一个数字 一定是 0xxxxx的形 ...
- 解析如何利用ElasticSearch和Redis检索和存储十亿信息
如果从企业应用的生存率来看,选择企业团队信息作为主要业务,HipChat的起点绝非主流:但是如果从赚钱的角度上看,企业市场的高收益确实值得任何公司追逐,这也正是像JIRA和Confluence这样的智 ...
- cocos2d-x ios游戏开发初认识(九) 音效、粒子系统与存储
我们知道.一个游戏少不了声音.一些好听的声音会提起你对游戏的兴趣,当然做好听的声音不是我们要学的,我们的目的是把声音在适当的时候放出来.顺便在这节中会说下简单的粒子系统和文件存储. 一.声音的播放: ...
- Git-删除本地文件夹的repository（本地仓库）
安装git软件后.有些文件夹里会出现带有?的图标,右键菜单上会有"Git-Sync"或者"Git-Commit"等命令:正常的应该是"Git-Clon ...
- Java虚拟机的类载入机制
Java虚拟机类载入过程是把Class类文件载入到内存.并对Class文件里的数据进行校验.转换解析和初始化,终于形成能够被虚拟机直接使用的java类型的过程. 在载入阶段,java虚拟机须要完毕下面 ...