當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

数据表格+弹出层的综合案例

發(fā)布時間：2025/4/16 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了数据表格+弹出层的综合案例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

json準(zhǔn)備

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>數(shù)組表格</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">結(jié)束時間:</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'})//渲染數(shù)據(jù)表格var tableIns = table.render({elem: '#userTable' //渲染的目標(biāo)對象, url: 'resources/json/users.json' //數(shù)據(jù)接口, title: '用戶數(shù)據(jù)表'//數(shù)據(jù)導(dǎo)出來的標(biāo)題, toolbar: "#userToolBar" //表格的工具條, height: 'full-300', cellMinWidth: 100 //設(shè)置列的最小默認(rèn)寬度, done: function (res, curr, count) {}, page: true //是否啟用分頁, cols: [[ //列表數(shù)據(jù){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'}]]})//監(jiān)聽頭部工具欄事件table.on("toolbar(userTable)", function (obj) {switch (obj.event) {case 'add':openAddUser();break;case 'batchDelete':layer.msg('批量刪除');break;};})//監(jiān)聽行工具事件table.on('tool(userTable)', function (obj) {var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值（也可以是表頭的 event 參數(shù)對應(yīng)的值）if (layEvent === 'del') { //刪除layer.msg("刪除");layer.confirm('真的刪除行么', function (index) {layer.close(index);//向服務(wù)端發(fā)送刪除指令});} 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) {//清空表單數(shù)據(jù)$("#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) {//序列化表單數(shù)據(jù)var params = $("#dataFrm").serialize();$.post("index.jsp", params, function (obj) {layer.msg(obj);//關(guān)閉彈出層layer.close(mainIndex)//刷新數(shù)據(jù) 表格tableIns.reload();})});}); </script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的数据表格+弹出层的综合案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：弹出层
下一篇：文件上传——选择文件之后自动上传||文件