layuiadmin监听提交，增加修改和查询
作者：互联网
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', {})
});
标签：function,layuiadmin,form,layui,查询,field,table,data,监听 来源： https://blog.csdn.net/weixin_50900104/article/details/110481172