目录
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.搜索重载
搜索之后对表格进行重新渲染