layui 基本使用

1、模块的使用

     定义
        layui.define([mods],callback);
        mods:可选,该模块会依赖的模块
        callback: function(exports){
            var obj = {
		        name : "yang",
		        hello : function() {
		            console.log("helloworld");
		        }
           }
          exports('hell', obj);   //模块名为 hell
        }
       使用
         layui.use([mods],callback);
         mods: 模块名
         callback: 执行的逻辑
         layui.use('hell',function(){
                var name = hell.name;   // 可获取到模块中定义的属性 和 方法
         })

2.表格

   渲染
     table.render({
         el:'#qw',
         url: '/sda/dfdg',
         page:false(默认)  是否开启分页   / 对象()
         
   })    

3、 layer.open({}) 弹出层
{
title: ‘标题’,
content: my_content’
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LayUI 是一款轻量级的前端 UI 框架,提供了许多实用的组件,包括表格组件。使用 LayUI 的表格组件可以方便地实现数据的展示、排序、分页、筛选等功能。 以下是 LayUI 表格组件的使用步骤: 1. 引入 LayUI 的 CSS 和 JS 文件: ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script> ``` 2. 编写 HTML 代码,包含表格容器和表格结构: ```html <div class="layui-container"> <table class="layui-table" lay-data="{url: 'data.json'}" lay-filter="demo"> <thead> <tr> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'username', width:120}">用户名</th> <th lay-data="{field:'email', width:200}">邮箱</th> <th lay-data="{field:'sex', width:80, templet:'#sexTpl'}">性别</th> <th lay-data="{field:'city'}">城市</th> <th lay-data="{field:'sign', width:200}">签名</th> <th lay-data="{field:'experience', sort:true, width:120}">积分</th> <th lay-data="{field:'score', sort:true, width:120}">评分</th> <th lay-data="{fixed: 'right', width:150, toolbar: '#barDemo'}">操作</th> </tr> </thead> </table> </div> <!-- 表格数据模板 --> <script type="text/html" id="sexTpl"> {{# if(d.sex === 1){ }} 男 {{# } else if(d.sex === 2) { }} 女 {{# } else { }} 未知 {{# } }} </script> <!-- 表格操作模板 --> <script type="text/html" id="barDemo"> <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> </script> ``` 其中,`lay-data` 属性用来配置表格的数据源、列信息和事件监听器,`lay-filter` 属性用来标识表格实例的名称。 3. 初始化表格组件: ```javascript layui.use('table', function(){ var table = layui.table; // 监听表格操作事件 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'edit'){ // 编辑操作 } else if(obj.event === 'del'){ // 删除操作 } }); // 渲染表格 table.render({ elem: '.layui-table', height: 500, page: true, url: 'data.json', toolbar: '#toolbarDemo', cols: [[ {field:'id', width:80, title: 'ID'}, {field:'username', width:120, title: '用户名'}, {field:'email', width:200, title: '邮箱'}, {field:'sex', width:80, title: '性别', templet:'#sexTpl'}, {field:'city', title: '城市'}, {field:'sign', width:200, title: '签名'}, {field:'experience', width:120, title: '积分', sort:true}, {field:'score', width:120, title: '评分', sort:true}, {fixed: 'right', width:150, align:'center', toolbar: '#barDemo', title: '操作'} ]] }); }); ``` 其中,`table.render` 方法用来初始化表格实例,配置表格的相关属性,如数据源、列信息、分页、排序等。`table.on` 方法用来监听表格的操作事件,如编辑、删除等。 以上就是 LayUI 表格组件的基本使用方法。需要注意的是,表格组件还支持更多高级功能,如多级表头、自定义列、批量操作等,可以参考官方文档进行使用

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值