layui总结

layui简介

layui是一种采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写组织形式,门槛极低,拿来即用.
    无需涉足各种前端工具的复杂配置，只需面对浏览器本身.

使用layui

1. 获取layui
2. 将其完整地部署到项目目录
3. 引用css文件和js文件

初始化模块

        //一般直接写在一个js文件中
        layui.use(['layer', 'form'], function(){
          var layer = layui.layer
          ,form = layui.form;
        });

layui表格动态操作

1. 页面语法

       <table id="demo" lay-filter="test"></table>
   

2. js语法

           table.render({
               elem: '#demo'
               ,url: '/demo/table/user/' //数据接口
               ,page: true //开启分页
               ,cols: [[ //表头
                 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                 ,{field: 'username', title: '用户名', width:80}
               ]]
             });
   

3. 接口返回数据

       {
       "code": 0,
       "msg": "",
       "count": 1000,
       "data": [
           {
           "id": 10000,
           "username": "user-0"
           }
       ]
       }
   

4. templet 自定义列模板
   2. 绑定模板选择器
   javascript table.render({ cols: [[ {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器 ,{field:'id', title:'ID', width:100} ]] });
   2. 对应的模板
   html <script type="text/html" id="titleTpl"> <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a> </script>
5. toolbar 绑定列工具条(和templet自定义列模板相似)
   js语法

           table.render({
             cols: [[
               {field:'id', title:'ID', width:100}
               ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
             ]]
           });
   

6. 工具条事件

           table.on('tool(test)', 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 === 'detail'){ //查看
               //do somehing
             } 
             //下面就是刷新更新对应值
             });
   

7. 表格重新加载

           table.reload('idTest', {
             url: '/api/table/search'
             ,where: {} //设定异步数据接口的额外参数
             //,height: 300
             //,page:{curr:,}//重新从第一页开始
           });
   

8. 表格事件监听

           //复选框监听
           table.on('checkbox(test)', function(obj){
             console.log(obj.checked); //当前是否选中状态
               console.log(obj.data); //选中行的相关数据
               console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
           });
           //工具栏监听
           table.on('toolbar(test)', function(obj){
             var checkStatus = table.checkStatus(obj.config.id);
           });
   

layui弹出层组件

1. 基本用法

           layui.use('layer', function(){
             var layer = layui.layer;
             layer.msg('hello');
           });  
   

2. 基础参数
   2. type - 基本层类型
   2. title - 标题
   2. content - 内容
   2. skin - 样式类名
   2. area - 宽高
   2. offset - 坐标
   2. icon - 图标
   2. btn - 按钮
   2. btnAlign - 按钮排列
   2. closeBtn - 关闭按钮
   2. shade - 遮罩
   2. time - 自动关闭所需毫秒
   2. id - 唯一标识
   2. anim - 弹出动画
   2. syccess - 层弹出后的成功回调方法
   2. yes - 确定按钮回调方法
   2. cancel - 右上角关闭按钮触发的回调
3. 基础方法
   2. layer.config(options) - 初始化全局配置
   2. layer.ready(callback) - 初始化就绪
   2. layer.open(options) - 原始核心方法
   2. layer.alert(content, options, yes) - 普通信息框
   2. layer.confirm(content, options, yes, cancel) - 询问框
   2. layer.msg(content, options, end) - 提示框
   2. layer.load(icon, options) - 加载层
   2. layer.tips(content, follow, options) - tips层
   2. layer.close(index) - 关闭特定层
   2. layer.closeAll(type) - 关闭所有层

layui 表单层

1. 基础语法
   2. 页面元素
   html <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 --> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="*">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form>
   3. js语法
   javascript layui.use('form', function(){ var form = layui.form; });
2. 基础方法
   • form.render() - 更新全部
   • form.on(‘event(过滤器值)’, callback) - 事件监听
   • form.on(‘select(filter)’,function(data){}) - 监听select选择
   • form.on(‘checkbox(filter)’, function(data){}) - 监听checkbox复选
   • form.on(‘switch(filter)’, function(data){}) - 监听switch开关
   • form.on(‘radio(filter)’, function(data){ }) - 监听radio单选
   • form.on(‘submit(*)’, function(data){}) - 监听submit提交