layui
little skill
{{# return layui.util.toDateString(d.newdate,'yyyy-MM-dd')}}
<button>按钮标签如果在action里边会自动提交改成<input>即可
user/list.jsp
<%--
Created by IntelliJ IDEA.
User: XCWYPF
Date: 2021/1/26
Time: 14:14
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form layui-form-pane" action="" style="margin-top: 15px;margin-left: 3px;">
<div class="layui-inline" >
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" id="username" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-inline" style="width: 100px">
<select name="sex" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
<div class="layui-inline">
<input type="button" class="layui-btn layui-btn-normal query_btn" id="query" value="检索" style="margin-left: 15px"/>
</div>
</form>
<table class="layui-hide" id="userInfo" lay-filter="userInfo"></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="addUserInfo">新增管理员</button>
<button class="layui-btn layui-btn-sm" lay-event="deleteUserInfos">批量删除</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 type="text/html" id="stateTemplet">
<input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="stateDemo" {{d.state == 1 ? 'checked' : ''}}>
</script>
<script type="text/html" id="newDateTemplet">
{{# return layui.util.toDateString(d.newdate,'yyyy-MM-dd')}}
</script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/images/jquery.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['table','util','form'], function(){
var table = layui.table,
util = layui.util
form = layui.form;
var tableIns = table.render({
elem: '#userInfo'
,url:'${pageContext.request.contextPath}/user/list.action'
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '管理员信息表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱', width:150, edit: 'text'}
,{field:'sex', title:'性别', width:80, edit: 'text'}
,{field:'phone', title:'电话号码', width:120}
,{field:'address', title:'地址',width: 120}
,{field:'newdate', title:'时间',width: 150,templet: "#newDateTemplet"}
,{field:'state', title:'状态', width:100,templet:"#stateTemplet"
}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
//头工具栏事件
table.on('toolbar(userInfo)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addUserInfo':// 新增管理员
// var data = checkStatus.data;
// layer.alert(JSON.stringify(data));
layer.open({
type: 2,
title:'新增管理员',
maxmin: true,
area:['800px','500px'],
content: '${pageContext.request.contextPath}/user/returnAddUserInfo.action' //这里content是一个普通的String
});
break;
case 'deleteUserInfos':// 批量删除用户
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(userInfo)', 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);
});
}
});
$("#query").click(function (){
tableIns.reload({
where: { //设定异步数据接口的额外参数，任意设
username:$("#username").val(),
sex:$("#sex").val()
}
,page: {
curr: 1 //重新从第 1 页开始
}
})
})
});
</script>
</body>
</html>
user/add.jsp
新增管理员：
用户名
密码
验证密码
性别
邮箱
电话号码
地址
图片
<%--
Created by IntelliJ IDEA.
User: XCWYPF
Date: 2021/1/27
Time: 12:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>添加管理员信息</title>
<style>
.layui-form-item{
margin-left: 50px;
margin-top: 10px;
}
</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="button" class="layui-btn layui-btn-normal" value="验证用户名" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="text" name="password" id="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证密码</label>
<div class="layui-input-inline">
<input type="text" name="password2" id="password2" lay-verify="required" placeholder="请输入验证的密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" id="email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</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="男" checked="">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话号码</label>
<div class="layui-input-inline">
<input type="text" name="phone" id="phone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系地址</label>
<div class="layui-input-inline">
<select name="province" id="province" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" id="city" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="area" id="area">
<option value="">请选择县/区</option>
</select>
</div>
</div>
<div class="layui-input-block" >
<textarea placeholder="请输入详细地址" class="layui-textarea" style="width: 590px;height: 100px;margin-left: 0px"></textarea>
</div>
<div class="layui-form-item">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend style="margin-top: 20px;">上传头像</legend>
</fieldset>
<div class="layui-upload-drag" id="test10">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center">
<button type="button" class="layui-btn layui-btn-warm">提交</button>
<input class="layui-btn layui-btn-warm" type="reset" value="重置"/>
</div>
</form>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/images/jquery.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
<script type="text/javascript">
layui.use(['form'], function(){
var form = layui.form;
//第一步把所有的省级信息的数据信息查询出来，然后填充到下拉框里去
$.ajax({
<%--url:'${pageContext.request.contextPath}/user/delete.action?ids='+data.id,--%>
url:'${pageContext.request.contextPath}/address/province.action',
type:'POST',
dataType:'json',
success:function (data){
for(var i = 0;i < data.length;i ++){
$("#province").append("<option value='"+data[i].code+"'>"+data[i].name+"</option>");
}
form.render();
}
});
//监听省级下拉框事件
form.on('select(province)', function(data){
console.log(data.value);
$.ajax({
<%--url:'${pageContext.request.contextPath}/user/delete.action?ids='+data.id,--%>
url:'${pageContext.request.contextPath}/address/city.action?code=' + data.value,
type:'POST',
dataType:'json',
success:function (data){
$("#city").empty();
for(var i = 0;i < data.length;i ++){
$("#city").append("<option value='"+data[i].code+"'>"+data[i].name+"</option>");
}
//可以获取到市级数据的第一个选项，然后在加载区县的下拉框。
var cityCode = $('#city option:first').val();//防止填写假数据--省不对应的县级单位
getArea(cityCode);
// form.render();
}
});
});
//监听市级下拉框事件
form.on('select(city)',function (data){
getArea(data.value);
});
function getArea(code){
alert("进入getArea");
$.ajax({
<%--url:'${pageContext.request.contextPath}/user/delete.action?ids='+data.id,--%>
url:'${pageContext.request.contextPath}/address/area.action?code=' + code,
type:'POST',
dataType:'json',
success:function (data){
$("#area").empty();
for(var i = 0;i < data.length;i ++){
$("#area").append("<option value='"+data[i].code+"'>"+data[i].name+"</option>");
}
form.render();
}
});
};
});
</script>
</body>
</html>
