Layui框架学习

最新推荐文章于 2023-07-12 20:03:56 发布
最新推荐文章于 2023-07-12 20:03:56 发布
阅读量2.7k 收藏 29
点赞数 3
分类专栏： 前端学习笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39759664/article/details/108327485
版权

本笔记只记比较难的

选项卡

在这里插入图片描述

layui的element对象有什么用？ 请点击查看

  • 常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果

lay-filter=“demo” 是用于事件标记，可用于标记

表单对象及相关事件

lay-verify=“type” layui内部进行验证

  • 监听提交事件
         form.on('submit(demo1)', function(data){
                 console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

         })
         这个demo1 是提交按钮的lay-verify的值 标识适配这个按钮 
         即不是所有的提交按钮

如果想用异步提交，需要用ajax提交数据

$.ajax()
$.post()
  • 监听下拉框表单事件
    //监听下拉框改变事件
         form.on('select(aihao)', function(data){
             console.log(data.elem); //得到select原始DOM对象
             console.log(data.value); //得到被选中的值
             console.log(data.othis); //得到美化后的DOM对象
         });
  • 监听复选框的选中事件
form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //是否被选中，true或者false
  console.log(data.value); //复选框value值，也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});        
注意：每个复选框都必须要加  lay-filter

  • 元素渲染

       //向select里面添加一个打球
   $("#btn1").click(function() {
       //得到select对象
      var aihao= $("#yyy");
       alert(aihao.html());
       aihao.append("<option value='打球'>打球</option>");
       alert(aihao.html());
       form.render();//渲染所有
       form.render("select");//渲染下拉框
   })

 //给整个表单加个初始值
         //1. 需要给form表单整个加个lay-filter
         //2. 进行传值
         $("#btn2").click(function(){
            form.val("dataFilter",{
                num:"塔吉克",
                phone:"11111111111",
                email:"415268163@qq.com",
                number:"怕是个啥子",
                password:"zzzzzzz",
                interest:"1",
                open:true
            });
             var hobby="读书,游戏";//数据库中的数据
             var hobbys=hobby.split(",");//分割开
             //得到页面上的dome对象
             hobbyElem=$("[name='likewrite']");
             $.each(hobbys,function (i,str) {
                 $.each(hobbyElem,function (j,item) {
                     var jdom=$(item);//把dom转成jdom
                     if(jdom.val()==str){
                         jdom.attr("checked","checked");

                     }
                 })
             })
           form.render();//重新进行渲染
  • 扩展自定义验证规则
    这种num是 表单上的lay-verify=”num“ 中的值
//自定验证规则
         form.verify({
             num: [
                 /^[\S]{6,12}$/,'去你妈的'
             ]
         });

弹出层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<legend>弹出层</legend>

<button type="button" class="layui-btn" id="btn1"> alert</button>
<button type="button" class="layui-btn" id="btn2"> confirm</button>
<button type="button" class="layui-btn" id="btn3"> prompt</button>
<button type="button" class="layui-btn" id="btn4"> tab</button>
<button type="button" class="layui-btn" id="btn5"> photos</button>
<button type="button" class="layui-btn" id="btn6"> msg</button>
<button type="button" class="layui-btn" id="btn7"> tips</button>

<script src="layui/layui.js"></script>
<script type="text/javascript">
     layui.use(["element","jquery",'form',"layer"],function () {
         var $ = layui.jquery;
         var element = layui.element;
         var form = layui.form;
         var layer=layui.layer;


         //监听btn1  alert
         $("#btn1").click(function () {
           /*       layer.alert("小声逼逼");
                  layer.alert("加了个图标",{icon:1});*/
             layer.alert('有了回调 ',function (index) {//调用后   返回的是它的索引   关闭只能根据索引进行关闭
                 alert("ok");
               layer.close(index);

             })
         })

         //监听btn2  confirm
         $("#btn2").click(function () {
             layer.confirm("弹出了个框啊",{icon:1,title:"提示"},function (index) {
                 alert("ok");
                 layer.close(index);
             })
         })
         //监听btn3
         $("#btn3").click(function () {
          /*   layer.prompt(function (value,index,elem) {                 
             })*/
             layer.prompt({
                 value:3,
                 title:"忽忽",
                 formType:2,
                 area:["800px","350px"]
             },function () {
                 alert("交接完毕")
             })
         })
         //监听btn4
         $("#btn4").click(function () {
                  layer.tab({
                      area:["400px","500px"],
                      tab:[{title:"第一个",content:"内容1"},{title:"第er个",content:"内容2"},{title:"第san个",content:"内容3"}],
                  })
         })
         //监听btn5
         $("#btn5").click(function () {
               $.get("/Practice/resource/image.json",function (json) {
                   layer.photos({
                       photos:json,
                       anim:4//图片切换的风格
                   })
               })
         })         
         //监听 btn6 msg
         $("#btn6").click(function () {
                  layer.msg("提示是见过的",{icon:6});
         })

         //监听 btn7 tips
         $("#btn7").focus(function () {
            // layer.alert("yyy");
                 layer.tips("点我干啥",'#btn7')
         })         
     });
</script>
</body>

</html>

弹出层2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<legend>弹出层</legend>

<button type="button" class="layui-btn" id="btn1"> layer.open.type=0</button>
<button type="button" class="layui-btn" id="btn2"> layer.open.type=1</button>
<button type="button" class="layui-btn" id="btn3"> layer.open.type=2</button>
<button type="button" class="layui-btn" id="btn4"> layer.open.type=3</button>


<script src="layui/layui.js"></script>
<script type="text/javascript">
     layui.use(["element","jquery",'form',"layer"],function () {
         var $ = layui.jquery;
         var element = layui.element;
         var form = layui.form;
         var layer=layui.layer;


         //监听btn1  alert
         $("#btn1").click(function () {
                    layer.open({
                        title:"提示",
                        content:"你好我是1",
                        type:1,
                        skin:"layui-layer-molv",//皮肤
                        offset:"t",//位置在哪
                        area:["500px","600px"],//大小
                        icon:1,//这里只对type=0  有效
                        btn:["按钮1","按钮2","按钮3"],
                        yes:function (index,layer) {
                            alert("按钮1");
                            return false;//开启后禁止点击该按钮弹框关闭
                        },
                        btn1:function (index,layer) {
                            alert("按钮2");
                            return false;//开启后禁止点击该按钮弹框关闭

                        },
                        btn2:function (index,layer) {
                            alert("按钮3");
                            return false;//开启后禁止点击该按钮弹框关闭
                        },
                        btn3:function (index,layer) {
                            alert("按钮4");
                            return false;//开启后禁止点击该按钮弹框关闭
                        },
                        cancel:function () {
                            return true;//开启后禁止点击该按钮弹框关闭
                        },
                        btnAlign:"c",//按钮的对齐方式
                        closeBtn:2,//关闭的样式   1  2  两种
                        shade:[0.8,"#393D49"],//遮罩层
                        shadeClose:true,//点击遮罩层是否关闭
                        anim:5,//设置动画
                        maxmin:true,//是否显示做大话或最小化的按钮   type=1  /2  有效
                        success:function (layero,index) {
                            alert(index);
                        }


                    });
         })

         //监听btn2  confirm
         $("#btn2").click(function () {

         })

         //监听btn3
         $("#btn3").click(function () {


         })

         
     });


</script>
</body>

</html>
field:和数据接口里面的data[{“id”:1}]的key映射
title:表头的内容
width:宽度
hide:true 是否隐藏
sort:true 是否开启列排序
edit:true 是否支持编辑
align:‘center’ 内容对齐方式 left center right
totalRowText:“合计” 合计行的文本 前提是表格开启合并行
totalRow:true 是否合计前提是表格开启合并行
toolbar:‘#userBar’ 引入行的工具栏
templet:function(d){
			    	  return d.sex=='男'?'汉子':'妹子';
			      }}
  • layer.tupe=1:
    页面层 把页面上的某一段HTML代码放在弹出层里面
    此时的content属性可以使用html代码
    也可以使用页面的选择器
  • layer.type=2：
    是一个ifream层
    此时的content就是一个页面的url

数据表格

  • 基本使用
  1. 准备json
{
  "code": 0

,"msg": ""

,"count": 3000000

,"data": [{

  "id": "10001"

,"username": "杜甫"

,"email": "xianxin@layui.com"

,"sex": "男"

,"city": "浙江杭州"

,"sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。"

,"experience": "116"

,"ip": "192.168.0.8"

,"logins": "108"

,"joinTime": "2016-10-14"

}, {

  "id": "10002"

,"username": "李白"

,"email": "xianxin@layui.com"

,"sex": "男"

,"city": "浙江杭州"

,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"

,"experience": "12"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

,"LAY_CHECKED": true

}, {

  "id": "10003"

,"username": "王勃"

,"email": "xianxin@layui.com"

,"sex": "男"

,"city": "浙江杭州"

,"sign": "人生恰似一场修行"

,"experience": "65"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

}, {

  "id": "10004"

,"username": "李清照"

,"email": "xianxin@layui.com"

,"sex": "女"

,"city": "浙江杭州"

,"sign": "人生恰似一场修行"

,"experience": "666"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

}, {

  "id": "10005"

,"username": "冰心"

,"email": "xianxin@layui.com"

,"sex": "女"

,"city": "浙江杭州"

,"sign": "人生恰似一场修行"

,"experience": "86"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

}, {

  "id": "10006"

,"username": "贤心"

,"email": "xianxin@layui.com"

,"sex": "男"

,"city": "浙江杭州"

,"sign": "人生恰似一场修行"

,"experience": "12"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

}, {

  "id": "10007"

,"username": "贤心"

,"email": "xianxin@layui.com"

,"sex": "男"

,"city": "浙江杭州"

,"sign": "人生恰似一场修行"

,"experience": "16"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

}, {

  "id": "10008"

,"username": "贤心"

,"email": "xianxin@layui.com"

,"sex": "男"

,"city": "浙江杭州"

,"sign": "人生恰似一场修行"

,"experience": "106"

,"ip": "192.168.0.8"

,"logins": "106"

,"joinTime": "2016-10-14"

}]

}

2.编写代码
a. 可以使用html实现

b.可以通过js进行实现
加上表头的工具条
toolbar: 如果是true 则表示开启工具条但是不加任何按钮
在这里插入图片描述

在这里插入图片描述

  • 相关事件

1.监听头部工具栏事件
在这里插入图片描述
在这里插入图片描述

   // 1.监听头部工具栏事件//属于点击事件
       table.on('toolbar(userTable)', function(obj){
           //var checkStatus = table.checkStatus(obj.config.id);
         //  alert(checkStatus);
           switch(obj.event){
               case 'add':
                   layer.msg('添加');
                   break;
               case 'alldelete':
                   layer.msg('删除');
                   break;

           };
       });

2.监听复选框事件
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述在这里插入图片描述
3.监听单元格编辑事件
在这里插入图片描述

   table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
           console.log(obj.value); //得到修改后的值
           console.log(obj.field); //当前编辑的字段名
           console.log(obj.data); //所在行的所有相关数据
       });

在这里插入图片描述
单击事件和双击事件只能选择一个使用

4.监听行单机事件
在这里插入图片描述

table.on('row(userTable)', function(obj){
           console.log(obj.tr) //得到当前行元素对象
           console.log(obj.data) //得到当前行数据
           obj.del(); //删除当前行

       });

5.监听行双击事件

        table.on('rowDouble(userTable)', function(obj){
            //obj 同上
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
            obj.del(); //删除当前行
        });

6.监听工具条
在这里插入图片描述
在这里插入图片描述
7.表格重载

  • 第一种
    在这里插入图片描述
  • 第二种

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="mydiv1">
<legend>数据表格</legend>
<table class="layui-hide"  id="userTab" lay-filter="userTable">


</table>

    <div id="mydiv" style="display: none" >
        <button type="button" class="layui-btn layui-btn-warm" lay-event="add">添加</button>
        <button type="button" class="layui-btn layui-btn-danger"lay-event="alldelete">批量删除</button>
        <button type="button" class="layui-btn layui-btn-danger"lay-event="getSelect">得到选中行</button>
        <button type="button" class="layui-btn layui-btn-danger"lay-event="reloadTable">刷新数据表格</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-danger layui-btn-xs" lay-event="del">删除</a>
    </div>

</div>



<script src="layui/layui.js"></script>
<script type="text/javascript">
     layui.use(["jquery",'form',"layer",'table'],function () {
         var $ = layui.jquery;
         var element = layui.element;
         var form = layui.form;
         var layer=layui.layer;
         var table=layui.table;
         //渲染表格
      var tabRender=  table.render({
             elem: '#userTab'//渲染目标对象
             ,url:'http://localhost:63342/Practice/resource/my.json'//数据接口
             ,title: '用户数据表'//数据导出的标题
             ,page: true//是否启用分页
             ,toolbar:"#mydiv"//表头的按钮
             ,totalRow:true//开启合并行
             ,limit:20
             ,limits:[20,30,40,50]
             ,cols: [[//列表数据
                 {type: 'checkbox', fixed: 'left'}
                 ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                 ,{field:'username', title:'用户名', width:120, edit: 'text'}
                 ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                     return '<em>'+ res.email +'</em>'
                 }}
                 ,{field:'sex', title:'性别', width:80, edit: 'text'}
                 ,{field:'city', title:'城市', width:100}
                 ,{field:'sign', title:'签名'}
                 ,{field:'experience', title:'积分', width:80}
                 ,{field:'ip', title:'IP', width:120}
                 ,{field:'logins', title:'登入次数', width:100  }
                 ,{field:'joinTime', title:'加入时间', width:120}
                 ,{fixed: 'right', title:'操作', toolbar: '#userBar', width:150}
             ]]
             ,done:function (res,curr,count) {
                /* alert("res:"+res);//后台返回的json字符串
                 alert("curr:"+curr);//当前页
                 alert("count:"+count);//数据总条数*/
             }

         });


        // 1.监听头部工具栏事件//属于点击事件
         table.on('toolbar(userTable)', function(obj){
             var checkStatus = table.checkStatus(obj.config.id);
             alert(checkStatus);
             switch(obj.event){
                 case 'add':
                     layer.msg('添加');
                     break;
                 case 'alldelete':
                     layer.msg('删除');
                     break;
                 case "getSelect":
                     console.log(checkStatus.data); //获取选中行的数据
                     console.log(checkStatus.data.length) ;//获取选中行数量，可作为是否有选中行的条件
                     console.log(checkStatus.isAll ) ;//表格是否全选
                     break;
                 case "reloadTable":
                     tabRender.reload({url:'http://localhost:63342/Practice/resource/my1.json'});
                     break;


             };

         });

        // 2.监听复选框事件

         table.on('checkbox(userTable)', function(obj){
             console.log(obj.checked); //当前是否选中状态
             console.log(obj.data); //选中行的相关数据
             console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
         });

        // 3.监听单元格编辑事件

         table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
             console.log(obj.value); //得到修改后的值
             console.log(obj.field); //当前编辑的字段名
             console.log(obj.data); //所在行的所有相关数据
         });

        //4.监听行单机事件

  /*       table.on('row(userTable)', function(obj){
             console.log(obj.tr) //得到当前行元素对象
             console.log(obj.data) //得到当前行数据
             obj.del(); //删除当前行

         });*/
        //5.监听行双击事件
         table.on('rowDouble(userTable)', function(obj){
             //obj 同上
             console.log(obj.tr) //得到当前行元素对象
             console.log(obj.data) //得到当前行数据
             obj.del(); //删除当前行
         });

         //6.监听工具栏
         table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
             var data = obj.data; //获得当前行数据
             var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
             var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent == 'del'){ //删除
                 layer.confirm('真的删除行么', function(index){
                     obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                     layer.close(index);
                     //向服务端发送删除指令
                 });
             } else if(layEvent == 'edit'){ //编辑
                 //do something

                 //同步更新缓存对应的值
                 obj.update({
                     username: '123'
                     ,title: 'xxx'
                 });
             }
         });


         });

</script>
</body>

</html>
  • 综合案例
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表格综合案例</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="mydiv1">
<legend>综合案例</legend>
    <!--编辑框-->
    <div style="display: none" id="editShow">
        <form action="" 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="text" name="id" lay-verify="required" 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="username" 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="email" 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="city" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">性别：</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="sex" value="1" title="男">
                        <input type="radio" name="sex" value="0" title="女">
                    </div>
                </div>
            </div>
          <div class="layui-input-block">
                <button type="button" class="layui-btn " id="doSubmit" lay-submit="" lay-filter="dosubmit"><span class="layui-icon layui-icon-search" ></span>提交</button>
                <button type="reset" class="layui-btn layui-btn-normal"><span class="layui-icon layui-icon-refresh"></span> 重置</button>
            </div>

        </form>


    </div>

    <!--搜索条件开始-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>搜索条件</legend>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">编号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="id"  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="username" 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="email" 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="startTime" id="startTime" 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="endTime" id="endTime" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="1" title="男">
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
        </div>
         <!--第三行-->
     <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn " id="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
                <button type="reset" class="layui-btn layui-btn-normal"><span class="layui-icon layui-icon-refresh"></span> 重置</button>
            </div>


        </div>

    </form>
    <!--搜索条件结束-->
<table class="layui-hide"  id="userTab" lay-filter="userTable">


</table>



    <!--数据表格开始-->
    <div id="mydiv" style="display: none" >
        <button type="button" class="layui-btn layui-btn-warm" lay-event="add" >添加</button>
        <button type="button" class="layui-btn layui-btn-danger"lay-event="alldelete">批量删除</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-danger layui-btn-xs" lay-event="del">删除</a>
    </div>

</div>
<!--数据表格结束-->

<!--添加和修改的弹出层开始-->

<!--添加和修改的弹出层结束-->


<script src="layui/layui.js"></script>
<script type="text/javascript">
     layui.use(["jquery",'form',"layer",'table','laydate'],function () {
         var $ = layui.jquery;
         var element = layui.element;
         var form = layui.form;
         var layer=layui.layer;
         var table=layui.table;
         //时间选择器
         var laydate=layui.laydate;

         //绑定并初始化
         laydate.render({
             elem:"#startTime"
         });
         laydate.render({
             elem:"#endTime"
         });
         //渲染表格
      var tabRender=  table.render({
             elem: '#userTab'//渲染目标对象
             ,url:'http://localhost:63342/Practice/resource/my.json'//数据接口
             ,title: '用户数据表'//数据导出的标题
             ,page: true//是否启用分页
             ,toolbar:"#mydiv"//表头的按钮
             ,totalRow:true//开启合并行
             ,limit:20
             ,limits:[20,30,40,50]
             ,cols: [[//列表数据
                 {type: 'checkbox', fixed: 'left'}
                 ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
                 ,{field:'username', title:'用户名'}
                 ,{field:'email', title:'邮箱',  templet: function(res){
                     return '<em>'+ res.email +'</em>'
                 }}
                 ,{field:'sex', title:'性别',align:'center',templet:function (d) {
                                             return d.sex=='1'?'男':'女';
              }}
                 ,{field:'city', title:'城市'}
                 ,{fixed: 'right', title:'操作', toolbar: '#userBar'}
             ]]
             ,done:function (res,curr,count) {
                /* alert("res:"+res);//后台返回的json字符串
                 alert("curr:"+curr);//当前页
                 alert("count:"+count);//数据总条数*/
             }

         });

        // 1.监听头部工具栏事件//属于点击事件
         table.on('toolbar(userTable)', function(obj){
             var checkStatus = table.checkStatus(obj.config.id);
           //  alert(checkStatus);
             switch(obj.event){
                 case 'add':
                     openAddUser();
                     break;
                 case 'alldelete':
                     layer.msg('批量删除');
                     break;

             };

         });

         //打开添加框
         function openAddUser() {
             layer.open({
                 type:1,
                 title:"添加用户",
                 content:$("#editShow"),
                 area:["800px","600px"],
                 success:function (index) {
                     $("#dataFrm")[0].reset();//清空里面的数据
                 }


             })
         }
         //6.监听工具栏
         table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
             var data = obj.data; //获得当前行数据
             var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
             var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent == 'del'){ //删除
                 layer.confirm('真的删除行么', function(index){
                     obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                     layer.close(index);
                     //向服务端发送删除指令
                 });
             } else if(layEvent == 'edit'){ //编辑
                 //do something

                 //同步更新缓存对应的值
                /* obj.update({
                     username: '123'
                     ,title: 'xxx'
                 });*/

                openeditShow(data);
             }
         });
      function openeditShow(data) {
          layer.open({
              type:1,
              title:"修改界面",
              content:$("#editShow"),
              area:["800px",'600px'],
              success:function (index) {
                  form.val("dataFrm",data);
                  //url="user/updateYser.action";
              }
          })
      };
         //保存
         form.on("submit(dosubmit)",function (obj) {
             alert("ok");
             var params=$("#dataFrm").serialize();
             alert(params);
             $.post("bd.html",params,function () {
                 layer.msg("成功");
             })
         })
         });
</script>
</body>
</html>

文件上传

在这里插入图片描述

         var upload = layui.upload;

         //普通图片上传
         var uploadInst = upload.render({
             elem: '#test1'
             ,url: 'https://httpbin.org/post' //改成您自己的上传接口
             ,before: function(obj){
                 //预读本地文件示例，不支持ie8
                 obj.preview(function(index, file, result){
                     $('#demo1').attr('src', result); //图片链接（base64）
                 });
             }
             ,done: function(res){
                 //如果上传失败
                 if(res.code > 0){
                     return layer.msg('上传失败');
                 }
                 //上传成功
             }
             ,error: function(){
                 //演示失败状态，并实现重传
                 var demoText = $('#demoText');
                 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                 demoText.find('.demo-reload').on('click', function(){
                     uploadInst.upload();
                 });
             }
         });

树形组件Dtree

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形组件的使用</title>
    <link rel="stylesheet" href="resource/layui/css/layui.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>

    <legend>树形组件的使用</legend>

    <div style="height: 350px;overflow: auto;" id="toolbarDiv">
        <ul id="demoTree" class="dtree" data-id="0"></ul>
    </div>

    <script src="resource/layui/layui.js"></script>
    <script src="resource/layui_ext/dist/dtree.js"></script>
    <script type="text/javascript">
     layui.extend({
         dtree:'resource/layui_ext/dist/dtree'
                 }).use(["jquery",'form',"layer","dtree"],function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer=layui.layer;
            var dtree = layui.dtree;// 树形结构的初始化
            //渲染
         dtree.render({
           elem: "#demoTree",
             url: "resource/layui_ext/json/asyncTree1.json" //json的路径
         });
        });

    </script>

</body>

</html>
  • 数据类型

  1. 标准数据格式
    与基本使用的里面是一样的，节点与节点之间有层级关系，通过chuldren来确定关系
    在这里插入图片描述

  2. layui风格数据格式（dataStyle）
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形组件的使用</title>
    <link rel="stylesheet" href="resource/layui/css/layui.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>

    <legend>树形组件的使用</legend>

    <div style="height: 350px;overflow: auto;" id="toolbarDiv">
        <ul id="demoTree" class="dtree" data-id="0"></ul>
    </div>

    <script src="resource/layui/layui.js"></script>
    <script src="resource/layui_ext/dist/dtree.js"></script>
    <script type="text/javascript">
     layui.extend({
         dtree:'resource/layui_ext/dist/dtree'
                 }).use(["jquery",'form',"layer","dtree"],function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer=layui.layer;
            var dtree = layui.dtree;// 树形结构的初始化
            //时间选择器
         dtree.render({
           elem: "#demoTree",
             dataStyle:"layuiStyle",
             url: "resource/layui_ext/json/dataTree.json"  //json的路径
             response:{message:"msg",statusCode:0}  //修改response中返回数据的定义
         });
        });

    </script>
</body>
</html>
  1. list集合数据格式（dataFormart）
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形组件的使用</title>
    <link rel="stylesheet" href="resource/layui/css/layui.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>

    <legend>树形组件的使用</legend>

    <div style="height: 350px;overflow: auto;" id="toolbarDiv">
        <ul id="demoTree" class="dtree" data-id="0"></ul>
    </div>

    <script src="resource/layui/layui.js"></script>
    <script src="resource/layui_ext/dist/dtree.js"></script>
    <script type="text/javascript">
     layui.extend({
         dtree:'resource/layui_ext/dist/dtree'
                 }).use(["jquery",'form',"layer","dtree"],function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer=layui.layer;
            var dtree = layui.dtree;// 树形结构的初始化
            //时间选择器
         dtree.render({
           elem: "#demoTree",
             url: "resource/layui_ext/json/dataTree1.json", //json的路径
             dataFormat: "list",  //配置data的风格为list
         

         });


        });

    </script>

</body>

</html>
  1. layui+list集合数据格式（dataStyle+dataFormat）
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形组件的使用</title>
    <link rel="stylesheet" href="resource/layui/css/layui.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="resource/layui_ext/dtree/font/dtreefont.css">
</head>
<body>

    <legend>树形组件的使用</legend>

    <div style="height: 350px;overflow: auto;" id="toolbarDiv">
        <ul id="demoTree" class="dtree" data-id="0"></ul>
    </div>

    <script src="resource/layui/layui.js"></script>
    <script src="resource/layui_ext/dist/dtree.js"></script>
    <script type="text/javascript">
     layui.extend({
         dtree:'resource/layui_ext/dist/dtree'
                 }).use(["jquery",'form',"layer","dtree"],function () {
            var $ = layui.jquery;
            var form = layui.form;
            var layer=layui.layer;
            var dtree = layui.dtree;// 树形结构的初始化
            //时间选择器
         dtree.render({
           elem: "#demoTree",
             url: "resource/layui_ext/json/dataTree2.json", //json的路径
             dataStyle: "layuiStyle",  //使用layui风格的数据格式
             dataFormat: "list",  //配置data的风格为list
            response:{message:"msg",statusCode:0},  //修改response中返回数据的定义

         });


        });

    </script>

</body>

</html>
  • 事件监听
  1. 图标点击
//图标点击
         dtree.on("changeTree('demoTree')" ,function(obj){
             console.log(obj.param); // 点击当前节点传递的参数
             console.log(obj.dom); // 当前节点的jquery对象
             console.log(obj.show); // 节点展开为true，关闭为false
         });
  1. 节点点击

         //节点点击
         dtree.on("node('demoTree')" ,function(obj){
             console.log(obj.param); // 点击当前节点传递的参数
             console.log(obj.dom); // 当前节点的jquery对象
             console.log(obj.childParams); // 当前节点的所有子节点参数
             console.log(obj.parentParam); // 当前节点的父节点参数
         });
  1. 节点双击
  //节点双击事件
         dtree.on("nodedblclick('demoTree')" ,function(obj){
             layer.alert(JSON.stringify(obj.param),{
                 title:"最终提交的信息",
             });
             console.log(obj.param); // 点击当前节点传递的参数
             console.log(obj.dom); // 当前节点的jquery对象
             console.log(obj.childParams); // 当前节点的所有子节点参数
             console.log(obj.parentParam); // 当前节点的父节点参数
         });
  1. 复选框点击
  1. 多选树的处理
{
    "code":0,
	"msg":"操作成功",
	"data":[
	       {"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": [{"type": "0", "checked": "0"}]},
	       
	       {"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": [{"type": "0", "checked": "0"}]},
	       
	       {"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "1"}]},
	       {"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "2"}]},
	       {"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]},
	       {"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": [{"type": "0", "checked": "0"}]}
	       ]
	}
{
    "code":0,
	"msg":"操作成功",
	"data":[
	       {"id":"001","title": "湖南省", "last": false, "parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002","title": "湖北省","last": false,"parentId": "0","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       
	       {"id":"001001", "title": "长沙市", "last":true, "parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001002", "title": "株洲市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001003", "title": "湘潭市", "last":true, "parentId": "001" ,"checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001004","title": "衡阳市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"001005","title": "郴州市","last":true,"parentId": "001","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       
	       {"id":"002001","title": "武汉市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002002","title": "黄冈市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002003","title": "荆州市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002004","title": "天门市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"},
	       {"id":"002005","title": "孝感市","last":true,"parentId": "002","checkArr": "{\"type\": \"0\", \"checked\": \"0\"}"}
	       ]
	}


代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dtree</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<link rel="stylesheet" href="resources/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="resources/layui_ext/dtree/font/dtreefont.css">

</head>
<body>
 <button type="button" class="layui-btn" id="btn1">选中武汉市</button>
 <button type="button" class="layui-btn" id="btn2">得到选中值</button>
 
 
 <ul id="demoTree" class="dtree" data-id="0"></ul>
	
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.extend({
			dtree:'resources/layui_ext/dist/dtree'
		}).use([ 'jquery', 'layer', 'form','dtree' ], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var dtree=layui.dtree;

			 // 初始化树
		    var DemoTree = dtree.render({
		      elem: "#demoTree",
 		      dataStyle: "layuiStyle",  //使用layui风格的数据格式
		      response:{message:"msg",statusCode:0},  //修改response中返回数据的定义
              dataFormat: "list",  //配置data的风格为list
              checkbar: true,  
              checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only\
              checkbarData: "choose" ,
              url: "resources/layui_ext/json/case/asyncTreeCheckBox2.json" // 使用url加载（可与data加载同时存在）
		    });
			 
		   //选中武汉
		   $("#btn1").click(function(){
			    var params = dtree.dataInit("demoTree", "002001");
		   });
		    	
		   $("#btn2").click(function(){
			   var param = dtree.getNowParam(DemoTree);
			   layer.alert(JSON.stringify(param), {
		    	      title: '最终的提交信息'
		    	    })
		   });
		    	
		});
	</script>
</body>
</html>
  1. 初始化选中
 //初始化选中
         $("#btn1").click(function () {
             var params=dtree.dataInit("demoTree",'001001');
         });
         //得到选中值
         $("#btn2").click(function () {
             var param=dtree.getNowParam("demoTree");
             layer.alert(JSON.stringify(param),{
                 title:"最终结果"
             })
         })

在这里插入图片描述
在这里插入图片描述

小玩偶啊
关注
  • 3
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Layui弹框中设置输入框自动获取焦点无效/Layui设置Input框自动获取焦点无效,怎么办？
雾林小妖的博客
06-10 484
Layui弹框中设置输入框自动获取焦点无效/Layui设置Input框自动获取焦点无效,怎么办？
LayUI中的内置模块之 常用元素操作 - layui.element
daimeijin的博客
08-14 3270
前言 最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。 常用元素操作 页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为
Layui事件监听（表单和数据表格）
深蓝旭的博客
03-11 8917
一、表单的事件监听 先介绍一下几个属性的用法 1、lay-filter 事件过滤器 相当于选择器，layui的专属选择器 2、lay-verify 验证属性 属性值可以是 ：required必填项， phone手机号，email邮箱，url网址，number数字，date日期，identity身份证。这个相当于正则判断，当然你也可以定义自己的正则，做一些复杂的判断，例如： <input type="text" lay-verify="required"> //这里写requir.
layui中，lay-filter的使用，一个form表单中两个单选框，form.on()事件
我是一只蘑菇17的博客
10-20 819
需求：需要按照类型和专业查询信息。所以需要两个单选框，进行选择。在单选框中，每一个都要加lay-filter用于区别两个单选框。如果你只有一个单选框，那就不用区分，直接可以写。lay-filter是用于区分的，相当于。
layui——element模块
热门推荐
lxw1005192401的博客
10-12 1万+
介绍 对页面中一部分元素（tab、progress、nav、breadcrumb、collapse）的操作需要处理接口，layui统一放到element模块处理； 1 预设元素属性 我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层；element模块支持的元素如下表： 属性名 可选值 说明 lay-filter 任意字符 事件过滤器（公用属性），主要用于事件的精确...
layui.element--前端 UI 框架
刘荣丹的日志
08-06 2845
layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。 安装 1、npm install layui-src 2、https://www.layui.com download 放在应用中 使用 引入以下两文件 ./layui/css/layui.css ./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可...
layui内置模块（element常用元素操作）
ITSM/ITIL/网络安全/IT运维
04-29 2263
常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果,看下图： 当然不仅仅包含这些，还有其他的一些比如tab的切换、折叠面板的展开与合并、二级导航的的展开与合并等等。 默认效果当然不用多说，只要我们能实现element元素的加载，也就是一步搞定的事情，重点还是看看element中一些常用...
LayUI框架——选项卡等element组件使用
让优秀成为一种习惯！
07-12 1529
在项目中我们需要编写许多页面，在页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作。他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以在Layui框架中统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。element。
LayUI框架示例整合
06-21
总的来说，这个“LayUI框架示例整合”是学习LayUI的一个好起点，它覆盖了LayUI的基本使用和常见功能，通过实际操作，初学者可以迅速理解和掌握这个强大的前端框架。记得在实践中多尝试，结合官方文档深入学习，相信...
最新版本的layui前端框架学习文档.zip
09-15
通过这个"最新版本的layui前端框架学习文档.zip"，开发者不仅可以了解layui的基本用法，还能深入研究其内部机制，提升Web开发能力。无论你是初学者还是经验丰富的开发者，这个文档都将是你探索layui世界的宝贵财富。
LayUI学习资料.zip
08-21
本人在b站学习LayUi的代码+笔记
基于layui内置模块(element常用元素的操作)
01-21
常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果,看下图： 当然不仅仅包含这些，还有其他的一些比如tab的切换、折叠面板的展开与合并、二级导航的的展开与合并等等。 默认效果当然不用多说，只要我们能实现element元素的加载，也就是一步搞定的事情，重点还是看看element中一些常用的方法和简单的使用，方法总结如下： 下面是对监听事件的简单使用，效果图如下（注意console控制台的输出变化
Layui前端框架2.6.6
01-13
Layui是一款优秀的开源前端框架，它以简洁、高效的特性深受开发者喜爱。Layui 2.6.6是该框架的一个稳定版本，提供了一系列完善的功能模块，旨在帮助开发者快速构建高质量的Web应用。 首先，Layui的核心特点是模块化...
基于layui框架响应式布局的一些使用详解
10-16
**基于layui框架响应式布局详解** layui是一款轻量级的前端UI框架，它提供了丰富的组件和优雅的样式，尤其在响应式布局方面表现突出。本文将深入探讨如何使用layui实现响应式布局，帮助开发者快速构建适应不同设备...
layui源码详细分析系列之element模块以及自定义事件机制
玉案轩窗的博客
07-27 1万+
element内置模块时layui框架中页面元素的交互功能的实现，主要是选项卡、面板、导航等的交互的实现。下面先分析element模块的组织结构，具体如下图所示： 从上图中可以看出，element模块使用该框架自己的模块加载机制来加载该模块。该框架内置的模块都是采用面向对象的编程，该模块也是，定义了Element构造函数，对外的API接口都定义在Element的原型对象上，使用JQuery来绑定一
实现动态加载layui折叠画板element组件，并支持checkbox勾选功能（最详细版）
小栋哟
11-12 2337
最近一直有个需要，需要实现一个选表选字段的功能，具体点说就是，列出一些表，可以选择，包括其字段（属性），并且还要有表信息和字段的具体信息；所以调研了好多组件发现没有什么合适的，正好看到layui的这款画板组件，感觉还行，就实现了一下。具体也看以下效果吧。 官网示例图，展开后点击内容文字 我修改后实现的示例图，我的展开是新加了一个表格； 如果跟你的需要一致，那就跟着往下看，废话没有，...
使用layui组件的小问题1.0，
Faded_u的博客
04-18 3807
今天使用layui搭建一个后台管理过程中，遇到了点小问题，很简单，但是想写下来，如果有一些初学的朋友要学可以看看。 1.使用预加载和layui.config配置全局的时候，方法和其他的差不多。 预加载： var laypage; var layer; var form; var element; var laydate; var basePath = ''; layui.use(['la
layui select lay-filter就不渲染和全局渲染用法和校验
weixin_30888413的博客
07-17 4149
下拉客户名称改变配合负责人以及协助人动态获取 layui.use(['layer', 'jquery', 'form'], function () { var layer = layui.layer, $ = layui.jquery, form = layui.form; form.on('select(cust_id)', functi...
layui框架 在线样例
最新发布
09-17
Layui框架是一款轻量级、易于使用的前端UI框架，被广泛应用于Web开发中。它提供了丰富的UI组件和强大的功能，使得开发人员能够快速、高效地构建出美观、易用的界面。同时，Layui框架还具备响应式布局的特性，适配不同的设备和屏幕尺寸。 Layui框架的在线样例主要提供了官方示例和文档，方便开发者学习和使用该框架。在官方示例中，我们可以找到各种常见的UI组件，如按钮、表单、表格等，并且可以查看它们在各种场景下的应用效果。通过这些在线样例，开发者可以快速了解和学习Layui框架的使用方法，从而节省开发时间。 除了官方示例外，Layui框架的在线样例还提供了丰富的文档内容，包括框架的基本介绍、使用教程、API文档等。这些文档详细地描述了每个组件的属性和方法，以及如何使用这些组件构建出不同的页面效果。通过在线样例配合文档的学习，开发者可以快速掌握Layui框架的核心概念和使用技巧。 Layui框架的在线样例不仅仅是一种演示和学习工具，它还是一个实用的开发辅助工具。在使用Layui框架开发项目时，开发者可以通过在线样例查找到适合自己需求的代码片段，并直接应用到自己的项目中。这样可以加快开发速度，同时保证代码的质量和可靠性。 总而言之，Layui框架的在线样例提供了一个方便快捷的学习和使用平台，帮助开发者快速掌握Layui框架的各种功能和技巧，并且可以在实际项目中高效地使用该框架。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值