Start

LayUI入门

点此下载Layuiadmin

点此跳转Layui官方文档

点此跳转Layui第三方文档

直接开始！

目录说明

下载后可以这样部署文件到自己的开发环境

  • src/

    layuiAdmin 源代码，通常用于开发环境（如本地），推荐你在本地开发时，将 ./start/index.html 中的 layui.css 和 layui.js 的引入路径由 dist 改为 src 目录。

    • src/controller/：存放 JS 业务模块，即对视图进行事件等交互性处理
    • src/lib/：layuiAdmin 的核心模块，一般不推荐修改
    • src/style/：存放样式，其中 admin.css是核心样式
    • src/views/：存放视图文件。其中 layout.html 是整个框架结构的承载，一般不推荐做大量改动。
    • src/config.js：layuiAdmin 的全局配置文件，可随意修改。
    • src/index.js：layuiAdmin 的入口模块，一般不推荐修改

  • dist/
    通过 gulp 将 layuiAdmin src 目录的源代码进行构建后生成的目录（即：将 JS 和 CSS 文件进行了压缩等处理），通常用于线上环境。关于 gulp 的使用，下文也有介绍。

  • start/
    存放 layuiAdmin 的入口页面、模拟接口数据、layui

    index.html所有页面基于这个显示

菜单栏

  • 在 start/json/menu.js 文件中，我们放置了默认的侧边菜单数据，你可以去随意改动它。

    JSON数据:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    {
      "code": 0 //状态码，key 名可以通过 config.js 去重新配置
      ,"msg": "" //提示信息
      ,"data": [{ //菜单数据，key名可以通过 config.js 去重新配置
        "name": "component" //一级菜单名称（与视图的文件夹名称和路由路径对应）
        ,"title": "组件" //一级菜单标题
        ,"icon": "layui-icon-component" //一级菜单图标样式
        ,"jump": '' //自定义一级菜单路由地址，默认按照 name 解析。一旦设置，将优先按照 jump 设定的路由跳转
        ,"spread": true //是否默认展子菜单（1.0.0-beta9 新增）
        ,"list": [{ //二级菜单
          "name": "grid" //二级菜单名称（与视图的文件夹名称和路由路径对应）
          ,"title": "栅格" //二级菜单标题
          ,"jump": ''  //自定义二级菜单路由地址
          ,"spread": true //是否默认展子菜单（1.0.0-beta9 新增）
          ,"list": [{ //三级菜单
            "name": "list" //三级菜单名（与视图中最终的文件名和路由对应），如：component/grid/list
            ,"title": "等比例列表排列" //三级菜单标题
          },{
            "name": "mobile"
            ,"title": "按移动端排列"
          }
        }]
    }

    修改index.html文件的layui-side-menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
  <!--  一级标题   -->
  <li data-name="home" class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;" lay-tips="主页" lay-direction="2">
                  <i class="layui-icon layui-icon-home"></i>
                  <cite>主页</cite>
                </a>
                <dl class="layui-nav-child">
                  <dd data-name="console" class="layui-this">
                    <a lay-href="home/console.html">控制台</a>
                  </dd>
                </dl>
  </li>
  

  <li data-name="component" class="layui-nav-item">
                <a href="javascript:;" lay-tips="组件" lay-direction="2">
                  <i class="layui-icon layui-icon-component"></i>
                  <cite>组件</cite>
                </a>
      			<!--  二级级标题   -->
                <dl class="layui-nav-child">
                  <dd data-name="grid">
                    <a href="javascript:;">栅格</a>
                    <dl class="layui-nav-child">
                        <!--  三级标题   -->
                      <dd data-name="list"><a lay-href="component/grid/list.html">等比例列表排列</a></dd>
                      <dd data-name="mobile"><a lay-href="component/grid/mobile.html">按移动端排列</a></dd>
                    </dl>
                  </dd>
                  <dd data-name="button">
                    <a lay-href="component/button/index.html">按钮</a>
                  </dd>
                  <dd data-name="form">
                    <a href="javascript:;">表单</a>
                    <dl class="layui-nav-child">
                      <dd><a lay-href="component/form/element.html">表单元素</a></dd>
                      <dd><a lay-href="component/form/group.html">表单组合</a></dd>
                    </dl>
                  </dd>
                  <dd data-name="nav">
                    <a lay-href="component/nav/index.html">导航</a>
                  </dd>
                </dl>
     </li>
  </ul>

主体内容

控制台/主页

略

数据表格

需要使用ajax接受异步数据：使用@RestController

配合接受JSON封装一个json类：

public class resultJson<T> {
    private int code;
    private String msg;
    private int count;
    private T data;public resultJson() {
}

public resultJson(int code, String msg) {
    this.code = code;
    this.msg = msg;
}

public resultJson(int code,int count, T data) {
    this.code = code;
    this.count = count;
    this.data = data;
}
//AUTO Generate Getter and Setter
}

从数据库查询到数据封装到JSON类后返回即可；

前端调用JSON数据：

绑定容器、设置数据接口、在表头设定对应的字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html
<table id="demo" lay-filter="test"></table>



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

自动渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign'}">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财富</th>
    </tr>
  </thead>
</table>
全部参数一览表

下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

参数 类型 说明 示例值
elem String/DOM 指定原始 table 容器的选择器或 DOM，方法渲染方式必填 “#demo”
cols Array 设置表头。值是一个二维数组。方法渲染方式必填 详见表头参数
url（等） - 异步数据接口相关参数。其中 url 参数为必填项 详见异步接口
toolbar String/DOM/Boolean 开启表格头部工具栏区域，该参数支持四种类型值：toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器toolbar: ‘
xxx
‘ //直接传入工具栏模板字符toolbar: true //仅开启工具栏，不显示左侧模板toolbar: ‘default’ //让工具栏左侧显示默认的内置模板注意： 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数		 false
defaultToolbar Array 该参数可自由配置头部工具栏右侧的图标按钮 详见头工具栏图标
width Number 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。 1000
height Number/String 设定容器高度 详见height
cellMinWidth Number （layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth 100
done Function 数据渲染完的回调。你可以借此做一些其它的操作 详见done回调
data Array 直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。 [{}, {}, {}, {}, …]
totalRow Boolean 是否开启合计行区域。layui 2.4.0 新增 false
page Boolean/Object 开启分页（默认：false） 注：从 layui 2.2.0 开始，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外） {theme: ‘#c00’}
limit Number 每页显示的条数（默认：10）。值务必对应 limits 参数的选项。 注意：优先级低于 page 参数中的 limit 参数 30
limits Array 每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。 注意：优先级低于 page 参数中的 limits 参数 [30,60,90]
loading Boolean 是否显示加载条（默认：true）。如果设置 false，则在切换分页时，不会出现加载条。该参数只适用于 url 参数开启的方式 false
title String 定义 table 的大标题（在文件导出等地方会用到）layui 2.4.0 新增 “用户表”
text Object 自定义文本，如空数据时的异常提示等。注：layui 2.2.5 开始新增。 详见自定义文本
autoSort Boolean 默认 true，即直接由 table 组件在前端自动处理排序。 若为 false，则需自主排序，通常由服务端直接返回排序好的数据。 注意：该参数为 layui 2.4.4 新增 详见监听排序
initSort Object 初始排序状态。用于在数据表格渲染完毕时，默认按某个字段排序。 详见初始排序
id String 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引，你在下文诸多地方都将会见识它的存在。 值得注意的是：从 layui 2.2.0 开始，该参数也可以自动从
中的 id 参数中获取。		 test
skin（等） - 设定表格各种外观、尺寸等 详见表格风格
cols - 表头参数一览表

相信我，在你还尚无法驾驭 layui table 的时候，你的所有焦点都应放在这里，它带引领你完成许多可见和不可见甚至你无法想象的工作。如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在 标签上

参数 类型 说明 示例值
field String 设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识 username
title String 设定标题名称 用户名
width Number/String 设定列宽，若不填写，则自动分配；若填写，则支持值为：数字、百分比 请结合实际情况，对不同列做不同设定。 200 30%
minWidth Number 局部定义当前常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth 100
type String 设定列类型。可选值有：normal（常规列，无需设定）checkbox（复选框列）radio（单选框列，layui 2.4.0 新增）numbers（序号列）space（空列） 任意一个可选值
LAY_CHECKED Boolean 是否全选状态（默认：false）。必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 true
fixed String 固定列。可选值有：left（固定在左）、right（固定在右）。一旦设定，对应的列将会被固定在左或右，不随滚动条而滚动。 注意：如果是固定在左，该列必须放在表头最前面；如果是固定在右，该列必须放在表头最后面。 left（同 true） right
hide Boolean 是否初始隐藏列，默认：false。layui 2.4.0 新增 true
totalRow Boolean/Object 是否开启该列的自动合计功能，默认：false。当开启时，则默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据，格式如下：codelayui.code{ "code": 0, "msg": "", "count": 1000, "data": [{}, {}] "totalRow": { "score": "666" ,"experience": "999" }} 如上，在 totalRow 中返回所需统计的列字段名和值即可。 另外，totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。 true
totalRowText String 用于显示自定义的合计文本。layui 2.4.0 新增 “合计：”
sort Boolean 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序比对。比如：*’贤心’ > ‘2’ > ‘100’*，这可能并不是你想要的结果，但字典序排列算法（ASCII码比对）就是如此。 true
unresize Boolean 是否禁用拖拽列宽（默认：false）。默认情况下会根据列类型（type）来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。 false
edit String 单元格编辑类型（默认不开启）目前只支持：text（输入框） text
event String 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理 任意字符
style String 自定义单元格样式。即传入 CSS 样式 background-color: #5FB878; color: #fff;
align String 单元格排列方式。可选值有：left（默认）、center（居中）、right（居右） center
colspan Number 单元格所占列数（默认：1）。一般用于多级表头 3
rowspan Number 单元格所占行数（默认：1）。一般用于多级表头 2
templet String 自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等 详见自定义模板
toolbar String 绑定工具条模板。可在每行对应的列中出现一些自定义的操作性按钮 详见行工具事件
templet - 自定义列模板

类型：String，默认值：无

在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助该参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：

  • 如果自定义模版的字符量太大，我们推荐你采用【方式一】；
  • 如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用【方式二】；
  • 如果自定义模板的字符量很小，我们推荐你采用【方式三】

方式一：绑定模版选择器。

1
2
3
4
5
6
7
8
9
10
 table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
    ,{field:'id', title:'ID', width:100}
  ]]
});
 
等价于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>

下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/html" id="titleTpl">
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>
 
注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：
     序号：{{ d.LAY_INDEX }} （该额外字段为 layui 2.2.0 新增）
 
由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）：
<script type="text/html" id="titleTpl">
  {{#  if(d.id < 100){ }}
    <a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
  {{#  } else { }}
    {{d.title}}(普通用户)
  {{#  } }}
</script>

方式二：函数转义。自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示：

1
2
3
4
5
6
7
8
9
10
11
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});

方式三：直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：

1
2
3
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
 
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板
toolbar - 绑定工具条模板

类型：String，默认值：无

通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。

1
2
3
4
5
6
7
8
9
10
table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});
 
等价于：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>

下述是 toolbar 对应的模板，它可以存放在页面的任意位置：

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <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>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
  {{#  } }}
</script>
 
注意：属性 lay-event="" 是模板的关键所在，值可随意定义

Echart

这是一个图表的模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
layui.use(["carousel","echarts"],function(){
    var e=layui.$
    ,a=(layui.carousel,layui.echarts)
    ,t=[]
    , i=[{
        <!-- 主体部分 -->
        title:{text:"未来一周气温变化",subtext:"纯属虚构"}
        , tooltip:{trigger:"axis"}
        ,legend:{data:["最高气温","最低气温"]}
        , calculable:!0
        ,xAxis:[{type:"category"
                 ,boundaryGap:!1
                 , data:["周一","周二","周三","周四","周五","周六","周日"]}]
        , yAxis:[{type:"value"
                  ,axisLabel:{formatter:"{value} °C"}}]
        , series:[{name:"最高气温"
                   ,type:"line"
                   ,data:[11,11,15,13,12,13,10]
                   , markPoint:{data:[{type:"max",name:"最大值"}
                                      ,{type:"min",name:"最小值"}]}
                   , markLine:{data:[{type:"average",name:"平均值"}]}}
                  , {name:"最低气温"
                     ,type:"line"
                     ,data:[1,-2,2,5,3,2,0]
                     , markPoint:{data:[{name:"周最低"
                                         ,value:-2
                                         ,xAxis:1
                                         ,yAxis:-1.5}]}
                     , markLine:{data:[{type:"average"
                                        ,name:"平均值"}]}}]}]
    , n=e("#LAY-index-normline").children("div")
    , l=function(e){t[e]=a.init(n[e],layui.echartsTheme)
        , t[e].setOption(i[e])
        ,window.onresize=t[e].resize};
	<!-- 结尾部分 -->
    n[0]&&l(0)}),
页面加载JS所用的语法：

文档示例

1
2
3
4
5
6
7
8
9
10
11
//定义模块
;layui.define(function(e){e("sample",{})});
//加载使用模块
layui.use(['mymod', 'mod1'], function(){
  var mymod = layui.mymod
  ,mod1 = layui.mod1
  ,mod2 = layui.mod2;
  mymod.hello('World!'); //弹出 Hello World!
});
//定义模块可以加载模块

Laytpl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script id="sensorList" type="text/html">
   <div class="layui-col-xs12 layui-col-sm4">
     {{#  layui.each(d.list, function(index, item){ }}
     <div class="layuiadmin-card-text">
       <div class="layui-text-top"><i class="layui-icon layui-icon-engine"></i><a lay-href="http://www.layui.com/doc/modules/flow.html">{{ item.sensorName }}</a></div>
       <p class="layui-text-center">{{ item.sensorDetail }}</p>
       <p class="layui-text-bottom"><a lay-href="http://www.layui.com/doc/modules/flow.html">流加载</a><span>7 天前</span></p>
     </div>
     {{#  }); }}
   </div>
 </script>
 
 
  layui.use("laytpl",function () {
   var laytpl = layui.laytpl;
   var data = { //数据
     "title":"aaa"
     ,"list":[{"sensorName":"传感器1","sensorDetail":"描述一般十多年"},{"sensorName":"传感器2","sensorDetail":"描述一发般十多年"},{"sensorName":"传感器3","sensorDetail":"描述而般十多年"}]
   };
   var getTpl = sensorList.innerHTML
           ,view = document.getElementById('sensorView');
   laytpl(getTpl).render(data, function(html){
     view.innerHTML = html;
   });

 });

前台请求后台JSON数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 $.post("/aaa",{id:id,datatablename:datatablename,dname:dname}, function(data){
		    title=data;
		 });
		 
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});


//获取JSON数据后渲染页面
$.get("/database/sensorList",{}, function(sensordata){

      layui.use("laytpl",function (sensordata) {

        var laytpl = layui.laytpl
        ,getTpl = sensorList.innerHTML
        ,view = document.getElementById('sensorView');
        laytpl(getTpl).render(sensordata, function(html){
          view.innerHTML = html;
        });
      });
    });

**坑：返回json数据时dao层必须有Setter和Getter否则不能生成JSON数据

监听Select选择

1
2
3
4
5
6
7
对于From表单的自动渲染，需要在父标签中添加class="lay-form"

form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//获取JSON数据后渲染页面
$.get("/database/acid?sensorId=1",{}, function(data){

      layui.use(["carousel","echarts"],function(data){
      
  
    var tmpdata = new Array();
        var newindex = 0;
        for( var i = 0; i < 7; i++ ) {
          if (data[i] != null) {
            tmpdata[newindex] = dates.format(data[i].time, 'MM-dd hh:mm');
            newindex++;
          }
        }
      
    var e=layui.$
    ,a=(layui.carousel,layui.echarts)
    ,t=[]
    , i=[{
        <!-- 主体部分 -->
        title:{text:"PH-酒精含量变化",subtext:"酒精含量为百分比"}
        , tooltip:{trigger:"axis"}
        ,legend:{data:["酒精含量","PH"]}
        , calculable:!0
        ,xAxis:[{type:"category"
                 ,boundaryGap:!1
                 , data:tmpdata}]
        , yAxis:[{type:"value"
                  ,axisLabel:{formatter:"{value} °C"}}]
        , series:[{name:"最高气温"
                   ,type:"line"
                   ,data:[11,11,15,13,12,13,10]
                   , markPoint:{data:[{type:"max",name:"最大值"}
                                      ,{type:"min",name:"最小值"}]}
                   , markLine:{data:[{type:"average",name:"平均值"}]}}
                  , {name:"最低气温"
                     ,type:"line"
                     ,data:[1,-2,2,5,3,2,0]
                     , markPoint:{data:[{name:"周最低"
                                         ,value:-2
                                         ,xAxis:1
                                         ,yAxis:-1.5}]}
                     , markLine:{data:[{type:"average"
                                        ,name:"平均值"}]}}]}]
    , n=e("#LAY-index-normline").children("div")
    , l=function(e){t[e]=a.init(n[e],layui.echartsTheme)
        , t[e].setOption(i[e])
        ,window.onresize=t[e].resize};
	<!-- 结尾部分 -->
    n[0]&&l(0)}),
    });

JS格式化时间日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
js Date format(日期格式化:yyyy-MM-dd HH:mm:ss.S)
今天在做日期显示的时候，那个显示格式困扰了很久，各种组件都尝试了，总是不如意，最后自己网上找了一个，然后稍微修改一下，感觉这个Util挺常用的，这里mark一下

Date.prototype.format = function(fmt)
{ 
　　var o = {
　　　　"M+" : this.getMonth()+1, //月份
　　　　"d+" : this.getDate(), //日
　　　　"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
　　　　"H+" : this.getHours(), //小时
　　　　"m+" : this.getMinutes(), //分
　　　　"s+" : this.getSeconds(), //秒
　　　　"q+" : Math.floor((this.getMonth()+3)/3), //季度
　　　　"S" : this.getMilliseconds() //毫秒
　　};
　　if(/(y+)/.test(fmt))
　　　　fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
　　for(var k in o)
　　　　if(new RegExp("("+ k +")").test(fmt))
　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
　　return fmt;
} 

调用方式：

　　var time1 = new Date().format("yyyy-MM-dd HH:mm:ss");

　　var time2 = new Date(time).format("yyyy-MM-dd");

简单记录，不熟前端，有问题大佬们请指正。

引入JQuery

1
2
3
4
5
 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

//可以使用
$.get("/database/acid?sensorId=1",{}, function(acidData){}
      post等

JS解析URL内的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
//将URL中的变量取出
  //调用方式
  // getQueryVariable("sensorId")
  function getQueryVariable(variable)
  {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
  }

数据表格的重载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
//渲染一个表格
            i.render({
                elem: "#sensorDataBaseTable",
                title:"数据",
                url: "/database/dataBaseTable/",
                where: {sensorId:1}
                ,page: true //开启分页
                 ,toolbar: true
                ,height: 550 //容器高度
                ,cols: [[
                    {
                        field: "time",
                        width: 200,
                        title: "时间",
                        sort: !0,
                        templet: function(d){
                            return new Date(d.time).format("MM-dd HH:mm");
                        }
                    },
                    {
                        field: "acidity",
                        title: "酸度-PH",
                        minWidth: 100
                    },
                    {
                        field: "alcohol",
                        title: "酒精含量%",
                        minWidth: 100
                    },
                    {
                        field: "starch",
                        title: "淀粉含量%",
                        minWidth: 100,

                    },
                    {
                        field: "humidity",
                        title: "湿度%",
                        minWidth: 100,

                    },
                    {
                        field: "temperature",
                        title: "温度℃",
                        minWidth: 100,

                    }]],
                limit: 10,
                limits: [10, 30, 50, 80, 100,200,400],
                text: "对不起，加载出现异常！"
            });
            //定义执行重载该表格，查询或修改
             var $ = layui.$,
            active = {
            reload: function(){
                var sensorId = $('#sensorView2');
                var start = $('#start');
                var end = $('#end');

                //执行重载
                i.reload('sensorDataBaseTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            sensorId: sensorId.val(),
                            start:start.val(),
                            end:end.val()
                    }
                });
            }
        };
        //监听该表格，修改
        $('.layui-inline .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        })
1
2
3
4
5
6
7
8
9
10
11
//用templet渲染修改数据
table.render({
  cols: [[
    {field:'title', title: '文章标题', width: 200
      ,templet: function(d){
        return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'
      }
    }
    ,{field:'id', title:'ID', width:100}
  ]]
});