layui 的使用

作者

可以通过 GitHub 或 码云 得到 layui 的完整开发包。目录结构如下：

  ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

第三方 CDN 方式引入（在 HTML 中的 <head> 部分添加如下代码）

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js">

一些底层的方法

引用自：Layui 底层方法 (dongyunit.com)

引用模块

//引用指定模块
layui.use(['layer', 'laydate'], function(){
  var layer = layui.layer
  ,laydate = layui.laydate;
  //do something
});
//引用所有模块（layui 2.6 开始支持）
layui.use(function(){
  var layer = layui.layer
  ,laydate = layui.laydate
  ,table = layui.table;
  //…
  //do something
});

通过回调函数得到模块对象，如

//通过回调的参数得到模块对象
layui.use(['layer', 'laydate', 'table'], function(layer, laydate, table){
  //使用 layer
  layer.msg('test');
  //使用 laydate
  laydate.render({});
  //使用 table
  table.render({})
});

页面元素样式

请看官方文档

使用功能

表格

格式：

var table = layui.table;
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});

上面为 方法渲染 的方式，还有 自动渲染、转换静态表格，详见：table 数据表格文档 – 基础参数一览表 ，文档中还包含参数介绍，在目录中 基础参数一览表 部分。几个标红点的都是重要的部分。

下面一个示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

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

<script src="/layui/layui.js"></script>
<script>
// 渲染表格
layui.use('table', function(){
  var table = layui.table;
  //第一个实例
  table.render({
    elem: '#demo'   // 上面的 table 中的 id 名
    ,height: 312
    ,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80}
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
});
</script>
</body>
</html>

上面代码中 table.render 开始渲染表格

layui.use('table', function(){
  var table = layui.table;
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80}
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });
});

除了加载数据还有各种事件：table 数据表格文档 – 事件

分页

layui.use('laypage', function(){
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render({
        elem: 'test1'//注意，这里的 test1 是 ID，不用加 # 号
        , count: 70 //数据总数，从服务端得到
        , jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            //首次不执行
            if(!first){
                //do something
            }
        }
    });
});

参考：

发表评论