数据表格+弹出层的综合案例
2024-04-08 08:38:55
json准备
persons.json
{"code": 0,"msg": "","count": 101,"data": [{"id": "10001","username": "杜甫","email": "xianxin@layui.com","sex": "1","city": "浙江杭州","LAY_CHECKED":true},{"id": "10002","username": "李白","email": "xianxin@layui.com","sex": "1","city": "浙江杭州","LAY_CHECKED": true},{"id": "10003","username": "王勃","email": "xianxin@layui.com","sex": "1","city": "浙江杭州"},{"id": "10004","username": "李清照","email": "xianxin@layui.com","sex": "0","city": "浙江杭州"},{"id": "10005","username": "冰心","email": "xianxin@layui.com","sex": "0","city": "浙江杭州"},{"id": "10006","username": "贤心","email": "xianxin@layui.com","sex": "1","city": "浙江杭州"},{"id": "10007","username": "贤心","email": "xianxin@layui.com","sex": "1","city": "浙江杭州"},{"id": "10008","username": "贤心","email": "xianxin@layui.com","sex": "1","city": "浙江杭州"}]
} index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%out.write("success");
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>数组表格</title><link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>查询条件</legend>
</fieldset>
<form action="" class="layui-form" method="post"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">编号:</label><div class="layui-input-inline"><input type="text" name="id" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">用户名:</label><div class="layui-input-inline"><input type="text" name="username" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">邮箱:</label><div class="layui-input-inline"><input type="text" name="email" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">开始时间:</label><div class="layui-input-inline"><input type="text" name="startTime" id="startTime" readonly="readonly" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">结束时间:</label><div class="layui-input-inline"><input type="text" name="endTime" id="endTime" readonly="readonly" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">性别:</label><div class="layui-input-inline"><input type="radio" name="sex" value="1" title="男"><input type="radio" name="sex" value="0" title="女"></div></div></div><div class="layui-form-item" style="text-align: center;"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSearch">查询</button><button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button></div></div>
</form><!-- 搜索条件结束 --><!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar"><button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button><button type="button" class="layui-btn layui-btn-sm" lay-event="batchDelete">批量删除</button>
</div>
<div id="userBar" style="display: none;"><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>
</div>
<!-- 数据表格结束 --><!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv"><form class="layui-form " action="" lay-filter="dataFrm" id="dataFrm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">编号:</label><div class="layui-input-inline"><input type="text" name="id" lay-verify="required" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">用户名:</label><div class="layui-input-inline"><input type="text" name="username" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">邮箱:</label><div class="layui-input-inline"><input type="text" name="email" lay-verify="required|email" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">城市:</label><div class="layui-input-inline"><input type="text" name="city" lay-verify="required" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">性别:</label><div class="layui-input-inline"><input type="radio" name="sex" value="1" checked="checked" title="男"><input type="radio" name="sex" value="0" title="女"></div></div></div><div class="layui-form-item" style="text-align: center;"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"lay-filter="doSubmit" lay-submit="">提交</button><button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button></div></div></form></div>
<!-- 添加和修改的弹出层结束 --><script src="resources/layui/layui.js"></script>
<script type="text/javascript">layui.use(['jquery', 'layer', 'form', 'table', 'laydate'], function () {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var table = layui.table;var laydate = layui.laydate;//绑定时间选择器laydate.render({elem: '#startTime'});laydate.render({elem: '#endTime'})//渲染数据表格var tableIns = table.render({elem: '#userTable' //渲染的目标对象, url: 'resources/json/users.json' //数据接口, title: '用户数据表'//数据导出来的标题, toolbar: "#userToolBar" //表格的工具条, height: 'full-300', cellMinWidth: 100 //设置列的最小默认宽度, done: function (res, curr, count) {}, page: true //是否启用分页, cols: [[ //列表数据{type: 'checkbox', fixed: 'left'}, {field: 'id', title: 'ID', sort: true}, {field: 'username', title: '用户名', sort: true, align: 'center'}, {field: 'email', title: '邮箱', align: 'center', templet: function (res) {return '<em>' + res.email + '</em>'}}, {field: 'sex', title: '性别', align: 'center', templet: function (d) {return d.sex == '1' ? '男' : '女';}}, {field: 'city', title: '城市', align: 'center'}, {fixed: 'right', title: '操作', toolbar: '#userBar', width: 220, align: 'center'}]]})//监听头部工具栏事件table.on("toolbar(userTable)", function (obj) {switch (obj.event) {case 'add':openAddUser();break;case 'batchDelete':layer.msg('批量删除');break;};})//监听行工具事件table.on('tool(userTable)', function (obj) {var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if (layEvent === 'del') { //删除layer.msg("删除");layer.confirm('真的删除行么', function (index) {layer.close(index);//向服务端发送删除指令});} else if (layEvent === 'edit') { //编辑openUpdateUser(data);}});var url;var mainIndex;//打开添加页面function openAddUser() {mainIndex = layer.open({type: 1,title: '添加用户',content: $("#saveOrUpdateDiv"),area: ['800px', '400px'],success: function (index) {//清空表单数据$("#dataFrm")[0].reset();url = "user/addUser.action";}});}//打开修改页面function openUpdateUser(data) {mainIndex = layer.open({type: 1,title: '修改用户',content: $("#saveOrUpdateDiv"),area: ['800px', '400px'],success: function (index) {form.val("dataFrm", data);url = "user/updateUser.action";}});}//保存form.on("submit(doSubmit)", function (obj) {//序列化表单数据var params = $("#dataFrm").serialize();$.post("index.jsp", params, function (obj) {layer.msg(obj);//关闭弹出层layer.close(mainIndex)//刷新数据 表格tableIns.reload();})});});
</script>
</body>
</html>
数据表格+弹出层的综合案例相关推荐
- html弹出层获取填充数据,layui 弹出层回调获取弹出层数据的例子
如下所示: // 弹出楼栋负责人信息页面 layer.open({ type: 2, title:'请选择楼栋负责人', maxmin: false, area: ['60%', '80%'], of ...
- 前端框架Layui学习五：弹出层和数据表格
Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用. 一.弹出层 在 layui 中使用 layer l ...
- layui 弹出层里面添加表格数据
好文章需要耐心阅读-茶凡-Matrix 这里点击添加按钮会弹出一个弹出层,里面可以添加数据并提交. type - 基本层类型,类型:Number,默认:0 layer官方提供了5种层类型.可传入的值有 ...
- layui table 弹出层刷新_layui 关闭open弹出框 刷新table表格页面的方法
layui 关闭open弹出框 刷新table表格页面的方法 如下所示: 保存后刷新table表格 源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...
- Layui 弹出层选择数据实现
实际Web项目中,下拉框仅能实现数据量少的场景,当我们添加一个商品时,我们总希望在添加选择前能看到产品的规格.图片.参数信息,那么用下拉框就显得力不从心了. 本次需求如下: 实现过程 父层JS < ...
- layui弹出层：倒计时后自动关闭（含代码、案例）
layui弹出层:倒计时后自动关闭(含代码.案例) 问题描述: 如何设定倒计时? 如何在自动倒计时结束后关闭弹框: 如何自定义"按钮文字"文案: 如何在关闭后,执行函数事件: 如何 ...
- MUI组件：弹出层组件 - 案例篇
MUI组件:弹出层组件 - 案例篇 官方组件 · 演示地址:http://dcloud.io/hellomui/examples/actionsheet.html 动画演示 · 效果图:(按" ...
- layui怎样将响应数据展示在页面_layui怎么对弹出层显示数据
layui怎么对弹出层显示数据?下面给大家举个例子:点击查看 function func11() { console.log($.cookie("id")); //iframe窗 ...
- layui 弹出层回调获取弹出层数据
// 弹出楼栋负责人信息页面 layer.open({ type: 2, ...
最新文章
- 10.VMware View 4.6安装与部署-view clint和view for ipad连接测试
- 你的AI模型有哪些安全问题，在这份AI攻防”词典”里都能查到
- 历届试题_历届国际物理奥林匹克竞赛试题与解答，解锁竞赛难题，高效提分
- 《剑指offer》--二维数组中的查找、从头到尾打印链表、重建二叉树、旋转数组的最小数字
- ORACLE--PMON SMON MMNL MMAN MMON
- zone-evergreen.js里的sendNative方法的target参数
- 【BZOJ3781】小B的询问 莫队
- 开发人员需要了解的渐进式Web应用程序
- Linux下Zend Framework的“Invalid Controller Specified”问题
- 敏捷开发“松结对编程”实践之四：日常工作篇（大型研发团队，学习型团队，139团队，师徒制度，检查点，代码审查，每日立会）...
- mongo性能测试demo 代码正确运行
- 读《产品经理的第一本书》有感
- 耗费两小时整理电子入行学习资源
- python人脸检测与微信小程序_微信小程序人脸识别功能
- 蜗居中折射的三类男人
- 三星手机如何通过Exchange账户同步联系人到手机中?
- 如何将视频轻松转换为 GIF
- java的基本概念：进制、单位、编码、数据类型、变量声明、ASCII码
- swagger初体验
- python做爬虫选课_Python2爬虫：以爬取大学本学期绩点为例（实战）