layui 数据表格代码
生活随笔
收集整理的這篇文章主要介紹了
layui 数据表格代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一套增刪改查，打完收工。
layui版本：2.4.5 +
默認請求,分頁。
/rest_address?page=1&limit=1json數據格式要求. 參數說明文檔
https://www.layui.com/doc/modules/table.html#cols
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head><meta charset="utf-8"><title>用戶管理</title><link rel="icon" href="favicon.ico"><link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/><link rel="stylesheet" th:href="@{/css/public.css}" media="all"/> </head> <body class="childrenBody"><!-- 搜索條件開始 --><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>查詢條件</legend></fieldset><blockquote class="layui-elem-quote"><form class="layui-form" method="post" id="searchFrm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">用戶姓名:</label><div class="layui-input-inline"><input type="text" name="realname" 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="loginname" 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="address" 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="phone" 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="identity" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label"> </label><div class="layui-input-inline"><button type="button" class="layui-btn layui-btn-normal layui-icon layui-icon-search" id="doSearch">查詢</button><button type="reset" class="layui-btn layui-btn-warm layui-icon layui-icon-refresh">重置</button></div></div></div></form></blockquote><!-- 搜索條件結束 --><!-- 數據表格開始 --><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></div><div id="userBar" style="display: none;"><a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="resetUserPwd">重置密碼</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="selectUserRole">分配角色</a></div><!-- 數據表格結束 --><!-- 添加和修改的彈出層開始 --><div style="display: none;padding: 20px" id="saveOrUpdateDiv" ><form class="layui-form" 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="hidden" name="userid"><input type="text" name="realname" lay-verify="required" placeholder="請輸入用戶姓名" 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="loginname" lay-verify="required" placeholder="請輸入用戶登陸名稱" 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="number" name="identity" lay-verify="required|identity" placeholder="請輸入用戶身份證號" 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="address" placeholder="請輸入用戶地址" 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="number" name="phone" lay-verify="required|phone" placeholder="請輸入用戶電話" 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="position" placeholder="請輸入用戶描述" 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 class="layui-inline"><label class="layui-form-label">是否可用:</label><div class="layui-input-inline"><input type="radio" name="available" value="1" checked="checked" title="可用"><input type="radio" name="available" 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><!-- 添加和修改的彈出層結束 --><!-- 用戶分配角色的彈出層開始 --><div style="display: none;padding: 10px" id="selectUserRole"><table class="layui-hide" id="roleTable" lay-filter="roleTable"></table></div><!-- 用戶分配角色的彈出層結束 --><script th:src="@{/layui/layui.js}"></script><script type="text/javascript" th:inline="none">var tableIns;layui.use([ 'jquery', 'layer', 'form', 'table'], function() {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var table = layui.table;// layui dtree 整合的插件dtree//渲染數據表格tableIns=table.render({elem: '#userTable' //渲染的目標對象,url:'user/paging' //數據接口, where: {'status': '0'} // 查詢帶上的數據,title: '用戶數據表'//數據導出來的標題,toolbar:"#userToolBar" //表格的工具條,height:'full-230',cellMinWidth:200 //設置列的最小默認寬度,page: 1 //是否啟用分頁, limits: [10, 20, 30],limits: [10, 20, 30],limit: 10//默認采用3,cols: [[ //列表數據{field:'userid', title:'ID',align:'center',width:'50'},{field:'realname', title:'用戶姓名',align:'center'},{field:'loginname', title:'登陸名',align:'center'},{field:'identity', title:'身份證號',align:'center'},{field:'phone', title:'用戶電話',align:'center'},{field:'address', title:'用戶地址',align:'center'},{field:'position', title:'描述',align:'center'},{field:'sex', title:'性別',align:'center',templet:function(d){return d.sex=='1'?'<font color=blue>男</font>':'<font color=red>女</font>';}},{field:'pwd', title:'密碼',align:'center',templet:function(d){return "******";}},{field:'available', title:'是否可用',align:'center',templet:function(d){return d.available=='1'?'<font color=blue>可用</font>':'<font color=red>不可用</font>';}},{fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'260'}]]})//模糊查詢$("#doSearch").click(function(){var params=$("#searchFrm").serialize();tableIns.reload({url:"user/paging?"+params})});//監聽頭部工具欄事件table.on("toolbar(userTable)",function(obj){switch(obj.event){case 'add':openAddUser();break;};})//監聽行工具事件table.on('tool(userTable)', function(obj){var data = obj.data; //獲得當前行數據var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）if(layEvent === 'del'){ //刪除layer.confirm('真的刪除【'+data.realname+'】這個用戶嗎', function(index){var userId = data.userid;//向服務端發送刪除指令$.post("user/del/" + userId, {_method: "delete"},function(res){layer.msg(res);//刷新數據 表格tableIns.reload();})}); } else if(layEvent === 'edit'){ //編輯openUpdateUser(data);}else if(layEvent==='resetUserPwd'){layer.confirm('真的重置【'+data.realname+'】這個用戶的密碼嗎', function(index){//向服務端發送刪除指令$.post("user/resetPwd", {"userId": data.userid}, function(res){layer.msg(res);})}); }else if(layEvent==='selectUserRole'){openselectUserRole(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/add";}});}//打開修改頁面function openUpdateUser(data){mainIndex=layer.open({type:1,title:'修改用戶',content:$("#saveOrUpdateDiv"),area:['800px','400px'],success:function(index){form.val("dataFrm",data);url="user/update";}});}//保存form.on("submit(doSubmit)",function(obj){//序列化表單數據var params=$("#dataFrm").serialize();// alert(params);$.post(url,params,function(obj){// console.log('data---->', obj);layer.msg(obj);//關閉彈出層layer.close(mainIndex)//刷新數據 表格tableIns.reload();})});});</script> </body> </html> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的layui 数据表格代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 钉钉日志范文100篇_工作日志应该怎么写
- 下一篇： 阿里云DataV与百度Sugar使用比较