layui之快速上手

目录

layui的引入

 用layui和后端接口来制作数据表格

---

Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

layui的引入

1.下载layui包

国内gitee地址：https://gitee.com/layui/layui/

国外github地址：https://github.com/layui/layui/

将layui包随意放入静态资源包下即可

2.通过layui包导入html里面

    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

3.js里面写入layui.use,这一步就已经导入layui成功了，接下来就是在里面自己使用自己造

  <script>
  // Usage
  layui.use(function(){
    var layer = layui.layer;
    // Welcome
    layer.msg('Hello World', {icon: 6});
  });
  </script> 

 用layui和后端接口来制作数据表格

用layui来制作一个管理后台的表格是最常用的操作。

1.放置一个html标签带有id

2.绑定id

在js引入table模块并加载table实例 

 在table实例中绑定html标签的id ，并设置每一个行的字段（注意，fieid必须与后端返回的对象的key对应，对象的值是key，value形式的。）

 3.设置工具条

 在html放置工具条

在table实例中表头字段绑定工具条

 4.设置工具头

在html放置工具头

 table实例放置绑定工具头

5.添加工具头监听事件

添加lay-filter，添加名称currentTableFilter 

 绑定filter：toolbar(currenTableFilter)，toolbar是固定。所有的监听事件都是在layui.use([...],function(){这里写监听事件}）

6.添加监听工具条事件

 添加lay-filter，添加名称currentTableFilter 

绑定filter：tool(currentTableFilter),tool是固定的

7.添加其他组件监听事件

  添加lay-submit，添加lay-filter名称data-searcg-btn

添加filter

 8.添加单元格监听事件

 实现单元可编辑

通过在单元格中加edit:'txt"即可 

添加监听事件

9.搜索重载

搜索之后对表格进行重新渲染