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 ...
随机推荐
- python之类的组合
类的组合 学校与课程没有共同点,课程与老师没有共同点,但是学校与课程有关联,课程与老师有关联:学校.课程.老师是三个完全不同的类:课程是属于学校的,老师是教课程的,此时我们就用到类的组合来关联,学校- ...
- 51nod 1113 矩阵快速幂（ 矩阵快速幂经典模板 ）
1113 矩阵快速幂 链接:传送门 思路:经典矩阵快速幂,模板题,经典矩阵快速幂模板. /******************************************************* ...
- 浅谈 Qt 布局那些事
Qt 布局那些事是本文介绍的内容,直接进入主题.GridLayout是一个非常强大的布局管理器,它可以实现很多复杂的布局,名字中暗示它将所有控件放置在类似网格的布局中.^__^GridLayout有两 ...
- mycql 基本mysql语句(增删改查)
操作文件夹(库) 增 (增加一个库 db1 ) create database db1 charset utf8; 查 # 查看当前创建的数据库 show create database db1; # ...
- SpringBoot2.0中使用订阅redis的多个频道的消息
声明:参考文章:https://blog.csdn.net/myNameIssls/article/details/75471012?locationNum=2&fps=1 一·使用maven ...
- 【codeforces 505D】Mr. Kitayuta's Technology
[题目链接]:http://codeforces.com/problemset/problem/505/D [题意] 让你构造一张有向图; n个点; 以及所要求的m对联通关系(xi,yi) 即要求这张 ...
- [terry笔记]python购物程序
如下是一个购物程序: 先输入工资,显示商品列表,购买,quit退出,最后格式化输出所买的商品. count = 0 while True: #做一个循环判断,如果输入的不是数字,基于提示,三次后退出 ...
- POJ3624 Charm Bracelet 【01背包】
Charm Bracelet Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22621 Accepted: 10157 ...
- POI 导入excel数据自己主动封装成model对象--代码分析
上完代码后,对代码进行基本的分析: 1.主要使用反射api将数数据注入javabean对象 2.代码中的日志信息级别为debug级别 3.获取ExcelImport对象后须要调用init()方法初始化 ...
- linux下面增加磁盘空间
1.先看看情况 [root@localhost tmp]# fdisk -l Disk /dev/sda: 3221 MB, 3221225472 bytes 255 heads, 63 sector ...