Layui框架使用入门

前言

对于后端开发人员而言,Layui框架的确是一个非常友好的前端页面脚手架,用于开发一些管理后台系统类的项目非常便捷。只需要掌握了传统的Web静态页面开发的三要素:HTMLCSSJavaScript,就可以轻松掌握对Layui框架的使用。
但是在项目实践中,通常也无需直接基于Layui框架进行开发,大多数情况下可以直接使用Layuimini模板,更加高效和便捷。

使用Layui框架常遇到的问题

对弹窗表单赋值

html代码:

<body>
  <div class="layui-form" lay-filter="useradmin" id="useradmin">
    <div class="layui-form-item">
      <label class="layui-form-label">用 &nbsp;户&nbsp;名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
</body>

JavaScript代码:

layer.open({
    type: 2
    ,title: '编辑用户'
    ,content: 'xx.html'
    ,maxmin: true
    ,area: ['500px', '450px']
    ,btn: ['确定', '取消']
    ,yes: function(index, layero){
        
    省略...
    }
    ,success: function(layero, index){
        // 方式一  其实就是获取的 子页面的 div 	 
        var div = layero.find('iframe').contents().find('#useradmin');  // div.html() div里面的内容,不包含当前这个div
            
        // 方式二  
        var body = layer.getChildFrame('body', index);  // body.html() body里面的内容 
    
        /* ---- 附加内容 看看就好  Begin ---- */
        var iframeWindow = window['layui-layer-iframe'+ index]   // 方式一: 得到iframe页的窗口对象
        var iframeWindow = window[layero.find('iframe')[0]['name']];   // 方式二: 得到iframe页的窗口对象
        /* ---- 附加内容 看看就好  End ---- */

        // 测试 :
        body.find("#username").val("admin");  // 方式一
            
        div.find("#username").val("admin");   // 方式二  
    }
});

下拉框不显示

html代码:

<div class="layui-form-item">
    <label class="layui-form-label">卡片类型</label>
    <div class="layui-input-inline">
        <select name="type" id="type" lay-filter="type">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
</div>

JavaScript代码:

layui.use('form', function(){
    var form = layui.form; 
    form.render();
}); 

发送Ajax请求

JavaScript代码:

layui.use(['form'], function () {
    var $ = layui.jquery,
        form = layui.form;
    $.ajax({
        url: "http://localhost:8080/add",
        cache: "false",    //  设置为false将不会从浏览器中加载请求信息
        async: "false",    // true所有请求均为异步请求
        dataType: "json",  // 请求返回数据的格式
        type: "GET",       // 请求方式
        success: function(data) {
            //请求成功后的回调方法
            console.log(data);
        },
        error:function () {
            //请求失败后的回调方法
            console.log("error: " + data);
        }
    });
}

【参考】
layui 对弹窗 form表单赋值
layui 下拉框不显示解决方法
JavaScript | 文本复制工具clipboard.js的使用详解
使用 $.ajax 发送json数据示例代码(GET、POST区别)

posted @ 2025-10-18 14:40  nuccch  阅读(4)  评论(0)    收藏  举报