layuiadmin監聽提交，增加修改和查詢

前后端分離

軟件 VS2019，數據庫mysql

因為最近開發的項目用的是layuiadmin單頁版本，找了很久都沒有找到，自己只打了新增，修改和查詢的layuiadmin的代碼，上傳給自己留個備份吧，也給大家參考一下。有什么問題，可以指出來哦~

html頁面，加新增

<div class="layui-fluid"><div class="layui-card"><div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-userfront-formlist"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">類型名稱:</label><div class="layui-input-block"><input type="text" name="categroyName" placeholder="請輸入" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">分組名稱:</label><div class="layui-input-block"><input type="text" name="groupName" placeholder="請輸入" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i></button></div></div></div><div class="layui-card-body"><div style="padding-bottom: 10px;"><button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">刪除</button><button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button></div><table id="LAY-materials-manage" lay-filter="LAY-materials-manage"></table><script type="text/html" id="imgTpl"> <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}></script> <script type="text/html" id="table-useradmin-admin"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>編輯</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>刪除</a></script></div></div> </div><script>var $ = layui.$,admin = layui.admin,view = layui.view,table = layui.table,form = layui.form;form.render(null, 'layadmin-userfront-formlist');//監聽搜索form.on('submit(LAY-user-front-search)', function(data){var field = data.field;//執行重載table.reload('LAY-materials-manage', {where: field});});//事件var active = {batchdel: function(){var checkStatus = table.checkStatus('LAY-materials-manage'),checkData = checkStatus.data; //得到選中的數據if(checkData.length === 0){return layer.msg('請選擇數據');}layer.prompt({formType: 1,title: '敏感操作，請驗證口令'}, function(value, index){layer.close(index);layer.confirm('確定刪除嗎？', function(index) {//執行 Ajax 后重載/*admin.req({url: 'xxx'//,……});*/table.reload('LAY-materials-manage');layer.msg('已刪除');});});}/**新增**/,add: function(){admin.popup({title: '添加材料',area: ['20%', '30%'],id: 'LAY-popup-user-add',success: function(layero, index){view(this.id).render('manage/materials/materialform').done(function(){form.render(null, 'layuiadmin-form-materials');//監聽提交form.on('submit(LAY-materials-front-submit)', function(data){var field = data.field; //獲取提交的字段 // console.log('field',field) //序列化，看自己需不要吧var datas={ 'CategroyName':field.CategroyName,'GroupName':field.GroupName, 'Remark':field.Remark};//新增ajax$.ajax({url:"http://localhost:8080自己的后端路徑",data:datas,dataType:'json',type:'POST',success: function (data) {if (data.code == '0') {layer.msg('新增成功')}else {layer.msg('新增失敗')}}});layui.table.reload('LAY-materials-manage'); //重載表格layer.close(index); //執行關閉 });});}});}};$('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';}); }); </script>

新增和修改的通用html頁面

<div class="layui-form" lay-filter="layuiadmin-form-materials" style="padding: 20px 0 0 0;"><div class="layui-form-item"><label class="layui-form-label">類型名稱</label><div class="layui-input-inline"><script type="text/html" template><input type="text" name="CategroyName" value="{{ d.params.categroyName || '' }}" placeholder="請輸入類型名稱" autocomplete="off" class="layui-input layui-form"></script></div></div><div class="layui-form-item"><label class="layui-form-label">分組名稱</label><div class="layui-input-inline"><script type="text/html" template><input type="text" name="GroupName" value="{{ d.params.groupName || '' }}" placeholder="請輸入分組名稱" autocomplete="off" class="layui-input layui-form"></script></div></div><div class="layui-form-item"><label class="layui-form-label">具體描述</label><div class="layui-input-inline"><script type="text/html" template><input type="text" name="Remark" value="{{ d.params.remark || '' }}" placeholder="請輸入具體描述" autocomplete="off" class="layui-input layui-form"></script></div></div><div class="layui-form-item"><label class="layui-form-label"></label><div class="layui-input-inline"><input type="button" lay-submit lay-filter="LAY-materials-front-submit" value="確認" class="layui-btn layui-btn-fluid"></div></div> </div>

修改和查詢的js

ayui.define(['table', 'form'], function(exports){var $ = layui.$,admin = layui.admin,view = layui.view,table = layui.table,form = layui.form;//材料管理table.render({elem: '#LAY-materials-manage',url: 'http://localhost:8080自己的后端查詢接口' //模擬接口,toolbar: true,cols: [[{type: 'checkbox', fixed: 'left'},{field: 'id', width: 80, title: 'ID', sort: true},{field: 'categroyName', title: '類型名稱'},{field: 'groupName', title: '分組名稱'},{field: 'remark', title: '具體描述'},{title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}]],page: true ,text: '對不起，加載出現異常！',height: 'full-320',response: {statusCode: 0 //重新規定成功的狀態碼為 200，table 組件默認為 0},parseData: function(res){ //將原始數據解析成 table 組件所規定的數據return {"code": res.code, //解析接口狀態"msg": res.msg, //解析提示文本"count": res.data.totalCount, //解析數據長度"data":res.data.data //解析數據列表};}});//監聽工具條table.on('tool(LAY-materials-manage)', function(obj){var data = obj.data;if(obj.event === 'del'){layer.confirm('確定刪除此材料？', function(index){obj.del();layer.close(index);});}else if(obj.event === 'edit'){admin.popup({title: '編輯材料',area: ['20%', '30%'],success: function(layero, index){//獲取當前選中行的id 重點var thisId = data['id'];view(this.id).render('manage/materials/materialform', data).done(function(){form.render(null, 'layuiadmin-form-materials');form.on('submit(LAY-materials-front-submit)', function(data){var field = data.field; //獲取提交的字段console.log("field",field)//序列化var datas={ 'Id':thisId,'CategroyName':field.CategroyName,'GroupName':field.GroupName, 'Remark':field.Remark};//修改ajax$.ajax({url:"http://localhost:8080自己的后端修改接口",data:datas,dataType:'json',type:'POST',success: function (data) {if (data.code == '0') {layer.msg('修改成功')//提交 Ajax 成功后，關閉當前彈層并重載表格layui.table.reload('LAY-materials-manage'); //重載表格layer.close(index); //執行關閉 }else {layer.msg('修改失敗')}}});});});}});}});exports('materials', {}) });

總結

以上是生活随笔為你收集整理的layuiadmin监听提交，增加修改和查询的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。