layui ajax提交表单_layui 使用总结

最新推荐文章于 2025-07-23 22:55:23 发布

最新推荐文章于 2025-07-23 22:55:23 发布 · 3.4k 阅读

文章标签：

#layui ajax提交表单 #layui js 跳转页面 #layui laydate 时间非空验证 #layui select动态赋值 #layui table 复选框数据 #layui table 小数点前面的0不显示

本文介绍了layui在后台管理系统中的应用，包括layui的js、css引入，表格生成与分页，form表单验证，以及layui组件的render方法。在表格生成部分，作者提到自动生成方式在需求变更时调整不便。另外，文章还提到了form表单验证的便捷性，并给出了相关代码示例。

最近开发中在做项目的后台管理系统。用的guns框架，框架自带的js是layui。自己写页面也不好换模板。就简单的使用layui进行开发了。

1、layui的js、css引入跳过。

2、layui的js开头定义：

首先统一的js语法开头layui.use();要用到什么组件自己添加，下面的示例是用到了jquery、ajax、form表单等组件；但ajax的写法有很多种可以自己写熟悉的语法格式，不强制使用它封装的ax。

layui.use(['form', 'admin', 'ax'], function () {var $ = layui.jquery;    var $ax = layui.ax;    var form = layui.form;

var admin = layui.admin;

});

3、layui的表格生成，包括分页：

我使用的表格是在html页面，先定义表格，然后再js 初始化各个行

html代码：

class="layui-table" id="channelListTable"

lay-filter="channelListTable">

js代码：

1)、首先定义表格的全局变量：

var ChannelList = {tableId: "channelListTable"};

2)、访问后台路径，渲染表格(这里可以定义表格的大小，注意有个initColumn方法)

var tableResult = table.render({elem: '#' + ChannelList.tableId,    url: Feng.ctxPath + '/ChannelList/list',    page: true,    height: "full-158",    cellMinWidth: 100,    cols: ChannelList.initColumn()
});

3)、通过刚刚定义的表格的全局变量初始化行，也就是ChannelList.initColumn方法

ChannelList.initColumn = function () {    return [[
        {type: 'checkbox'},        {field: 'cId', sort: true, title: '设备id'},        {field: 'cName', sort: true, title: '设备名称'},

{field: 'gdName', sort: true, title: '设备昵称'}

]]

这里对应的就是表格里的各个字段，field与后台的实体类命名相同即可。

总结：这种表格生成方法蠢得一批。完全用的html与js。框架自动生成表格。分页在后台用的LayuiPageInfo类封装，页面的分页也是和表格一起生成，这种自动生成方式在后面的开发中给我带来了很大的痛苦。如果需求变更，在页面中的样式有变更。表格的样式调整起来会非常麻烦，想到了以前jsp的好。现在虽然jsp的使用率正在降低但是其他的模板引擎正在兴起。最近也正好在学习thymeleaf。过几天再写一个thymeleaf的学习笔记。

4、layui的特色，render方法：

在没有学过layui的情况下，来使用它遇到好多坑，最坑的应该就是render方法了，layui的组件，无论什么组件写完后都需要render一下，举个例子：

在页面加载完成后需要在form表单里动态生成一个select组件。生成代码后就需要render下表单，生成的数据才会显示。否则。具体方法看截图

form.render('select');渲染select框

同样的意思form.render('checkbox');渲染多选框

5、form表单的验证，这个用起来还是挺方便的：

话不多说，直接举例

html代码：

class="layui-input-block">

id="username" name="username" type="text" class="layui-input"

lay-verify="required|username" required/>

注意lay-verify。

js代码：

form.verify({username:function(value){var flag;        $.ajax({url:Feng.ctxPath +'/subUserList/checkUsername',            data:{"username":value},            dataType:"json",            async:false,            success:function (data) {if(data.flag == false || data.flag == 'false'){
                    flag =data.flag;                }
            },error:function (data) {alert("用户名效验失败"+data);            }
        });        if(flag==false){return "用户名已存在";        }
    },
});

其中required代表必填项。

OK，暂时写那么多，以后遇到坑继续填上，其实作为一个外行前端，对前端这些框架不太懂，也不太想把时间花在页面上，前端的各种框架，jquery最基础的，又有各种如bootstrap,layui,easyui,还有我没接触过的vue。术业有专攻，我选择java