LayUI 主要内容 LayUI 的安装及使用 LayUI 的介绍 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。
官网：www.layui.com
官方文档：www.layui.com/doc/
LayUI 的特点 （1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。
（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。
下载与使用 在 官网首页 下载到 layui 的最新版。目录结构如下：
├─css // css目录 │ │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 核心样式文件 ├─font // 字体图标目录 ├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay // 模块核心目录 │ └─modules // 各模块组件 │─layui.js // 基础核心库 └─layui.all.js // 包含layui.js和所有模块的合并文件 获得 layui 后，将其完整地部署（拷贝到项目中）到你的项目目录，你只需要引入下述两个文件：
./layui/css/layui.css ./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js 基本的入门页面
开始使用layui 还需要声明需要使用的 模块 和 回调函数。参照官方文档，选择自己想要的效果就行。比如：
页面元素 布局 布局容器 固定宽度 将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
栅格布局规则 采用 layui-row 来定义行，如：
采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量 md 代表的是不同屏幕下的标记 变量 ***** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。
可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
可以在列（column）元素中放入你自己的任意元素填充内容
示例：
常规布局（以中型屏幕桌面为例）：
超小屏幕 (手机<768px) 小屏幕 (平板≥768px) 中等屏幕 (桌面≥992px) 大型屏幕(桌面≥1200px) .layui-container的值 auto 750px 970px 1170px 标记 xs sm md lg 列对应类 * 为1-12的等分数值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg* 总列数 12 12 12 12 响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列
平板、桌面端的不同表现：
/* 支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 */ layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30 示例：
列间距
- layui-col-space：设置后不起作用主要是因为设置的是padding,也就是说是向内缩，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。
- 间距一般不高于30px，如果超过30，建议使用列偏移。 列偏移 对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度
列偏移
列嵌套 可以对栅格进行无穷层次的嵌套。在列元素（layui-col-md*）中插入行元素（layui-row），即可完成嵌套。
列嵌套
一个标准的按钮 一个可跳转的按钮
默认按钮 原始按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮 尺寸 尺寸 组合 大型 class=“layui-btn layui-btn-lg” 默认 class=“layui-btn” 小型 class=“layui-btn layui-btn-sm” 迷你 class=“layui-btn layui-btn-xs”
大型 默认 小型 迷你 圆角 layui-btn-radius
默认按钮 原始按钮 百搭按钮 暖色按钮 警告按钮 禁用按钮 图标 添加
ဂ 刷新 导航 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。 依赖加载模块：element
实现步骤：
引入的资源
依赖加载模块显示指定类型的导航
水平导航
垂直/侧边导航 水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：水平导航：layui-nav 垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side 导航主题 通过对导航追加CSS背景类，让导航呈现不同的主题色
-
…
面包屑 你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：
选项卡 导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。 依赖加载模块：element
实现步骤 引入的资源
依赖加载模块加载HTML
- 网站设置
- 用户管理
- 权限分配
- 商品管理
- 订单管理
- 网站设置
- 用户管理
- 权限分配
- 商品管理
- 订单管理
| 昵称 | 加入时间 | 签名 |
|---|---|---|
| 贤心 | 2016-11-29 | 人生就像是一场修行 |
| 许闲心 | 2016-11-28 | 于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里… |
| 昵称 | 加入时间 | 签名 |
|---|---|---|
| 贤心 | 2016-11-29 | 人生就像是一场修行 |
| 许闲心 | 2016-11-28 | 于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里… |
在一个容器中设定 class=“layui-form” 来标识一个表单元素块
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通用CSS类
下拉选择框 请选择一个城市 北京 上海 杭州 属性selected可设定默认项 属性disabled开启禁用，select和option标签都支持 北京 上海（禁用效果） 杭州 可以通过 optgroup 标签给select分组 请选择 你工作的第一个城市？ 你的工号？ 你最喜欢的老师？ 通过设定属性 lay-search 来开启搜索匹配功能 layer form layim 复选框
默认风格：
原始风格：
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） 属性checked可设定默认选中 属性lay-skin可设置复选框的风格 （原始风格：lay-skin=“primary”） 设置*value=“1”*可自定义值，否则选中时返回的就是默认的on 开关 将复选框checkbox，通过设定 lay-skin=“switch” 形成了开关风格 属性checked可设定默认开 属性disabled开启禁用 属性lay-text可自定义开关两种状态的文本 （两种文本用 “|” 隔开） 设置*value=“1”*可自定义值，否则选中时返回的就是默认的on 单选框 属性title可自定义文本 属性disabled开启禁用 设置*value=“xxx”*可自定义值，否则选中时返回的就是默认的on 文本域 class=“layui-textarea”：layui.css提供的通用CSS类 组装行内表单使用场景 由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。
场景 用前准备 调用方式
- 作为独立组件使用 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 通过script标签引入layer.js后，直接用即可。
- layui 模块化使用 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js 通过*layui.use(‘layer’, callback)*加载模块 作为独立组件使用 layer
在 layui 中使用 layer
layui.use('layer', function(){ var layer = layui.layer;
layer.msg('hello'); }); 基础参数 type - 基本层类型
类型：Number，默认：0
可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层） title - 标题
类型：String/Array/Boolean，默认：'信息'
title支持三种类型的值： 若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本； 若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式； 若你不想显示标题栏，可以 title: false； content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。 /* 信息框 */ layer.open({ type:0, title:"系统消息", // content可以传入任意的文本或html content:"Hello" });
/* 页面层 */ layer.open({ type:1, title:"系统消息", // content可以传入任意的文本或html content:"
/* iframe */ layer.open({ type:2, title:"系统消息", // content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no'] content:"www.baidu.com" // content:["www.baidu.com",'no'] });
/* tips层 */ layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM });
area - 宽高
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的。 当定义宽度时，你可以area: '500px'，高度仍然是自适应的。 当宽高都要定义时，你可以area: ['500px', '300px']。 icon - 图标
注：信息框和加载层的私有参数。
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。 // eg1 layer.alert('酷毙了', {icon: 1}); // eg2 layer.msg('不开心。。', {icon: 5}); // eg3 layer.load(1); // 风格1的加载 示例
// eg1 layer.alert('很高兴见到你😊', {icon: 6});
// eg2 layer.msg('你愿意和我做朋友么？', { time: 0, //不自动关闭 btn: ['当然愿意', '狠心拒绝'], // 按钮 yes: function(index){ layer.close(index); // 关闭当前弹出框 layer.msg('新朋友，你好！', { icon: 6, // 图标 btn: ['开心','快乐'] }); } });
// eg3 layer.msg('这是常用的弹出层');
// eg4 layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});
// eg5 layer.msg('玩命加载中...=￣ω￣=', function(){ // 关闭后的操作 layer.msg('(⊙o⊙)？'); }); 日期与时间选择 模块加载名称：laydate，独立版本：www.layui.com/laydate/
layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式。
快速使用 和 layer 一样，可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照实际需求来选择。
场景 用前准备 调用方式
- layui 模块化使用 下载 layui 后，引入layui.css和layui.js即可 通过*layui.use(‘laydate’, callback)*加载模块后，再调用方法
- 作为独立组件使用 去 layDate 独立版本官网下载组件包，引入 laydate.js 即可 直接调用方法使用 在layui模块中使用
类型：String/DOM，默认值：无
必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象 laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等 }); type - 控件选择类型
类型：String，默认值：date
用于单独提供不同的选择器类型，可选值如下表： type可选值 名称 用途 year 年选择器 只提供年列表选择 month 年月选择器 只提供年、月选择 date 日期选择器 可选择：年、月、日。type默认值，一般可不填 time 时间选择器 只提供时、分、秒选择 datetime 日期时间选择器 可选择：年、月、日、时、分、秒 //年选择器 laydate.render({ elem: '#test' ,type: 'year' });
//年月选择器 laydate.render({ elem: '#test' ,type: 'month' });
//日期选择器 laydate.render({ elem: '#test' //,type: 'date' //默认，可不填 });
//时间选择器 laydate.render({ elem: '#test' ,type: 'time' });
//日期时间选择器 laydate.render({ elem: '#test' ,type: 'datetime' }); format - 自定义格式
类型：String，默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下： 格式符 说明 yyyy 年份，至少四位数。如果不足四位，则前面补零 y 年份，不限制位数，即不管年份多少位，前面均不补零 MM 月份，至少两位数。如果不足两位，则前面补零。 M 月份，允许一位数。 dd 日期，至少两位数。如果不足两位，则前面补零。 d 日期，允许一位数。 HH 小时，至少两位数。如果不足两位，则前面补零。 H 小时，允许一位数。 mm 分钟，至少两位数。如果不足两位，则前面补零。 m 分钟，允许一位数。 ss 秒数，至少两位数。如果不足两位，则前面补零。 s 秒数，允许一位数。 通过上述不同的格式符组合成一段日期时间字符串，可任意排版。
//自定义日期格式 laydate.render({ elem: '#test' ,format: 'yyyy年MM月dd日' //可任意组合 }); value - 初始值
类型：String，默认值：new Date()
支持传入符合format参数设定的日期格式字符，或者 new Date() // 传入符合format格式的字符给初始值 laydate.render({ elem: '#test' ,value: '2018-08-18' //必须遵循format参数设定的格式 });
// 传入Date对象给初始值 laydate.render({ elem: '#test' ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳 }); 分页 模块加载名称：laypage
快速使用 laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。
分页 基础参数 通过核心方法：laypage.render(options) 来设置基础参数。参数选项 说明 类型 默认值 elem 指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id’) String/Object - count 数据总数。一般通过服务端得到 Number - limit 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 Number 10 limits 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50] curr 起始页。一般用于刷新类型的跳页以及HASH跳页。如： // 开启location.hash的记录 laypage.render({ elem: ‘test1’ , count: 500 , // 获取起始页 curr: location.hash.replace(’#!fenye=’, ‘’) // 自定义hash值 ,hash: ‘fenye’ }); ` Number 1 groups 连续出现的页码个数 Number 5 prev 自定义“上一页”的内容，支持传入普通文本和HTML String 上一页 next 自定义“下一页”的内容，同上 String 下一页 first 自定义“首页”的内容，同上 String 1 last 自定义“尾页”的内容，同上 String 总页数值 layout 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域） Array [‘prev’, ‘page’, ‘next’] theme 自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题 String - hash 开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页 String/Boolean false jump - 切换分页的回调 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
laypage.render({ elem: 'page' ,count: 100 //数据总数，从服务端得到 ,groups:10 // 连续出现的页码个数 ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版 ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框 ,jump: function(obj, first){ // obj包含了当前分页的所有参数，比如： console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
}
}
}); 数据表格 模块加载名称：table
快速使用 创建一个table实例最简单的方式是，在页面放置一个元素
，然后通过 table.render() 方法指定该容器。
table数据表格<script src="layui/layui.js" type="text/javascript" ></script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
// 第一个实例
table.render({
elem: '#demo'
,url: 'user.json' // 数据接口
,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}
]]
});
});
</script>
{ "code": 0, "msg": "", "count": 50, "data": [{ "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0" }, { "id": 10001, "username": "user-1", "sex": "男", "city": "城市-1", "sign": "签名-1" }, { "id": 10002, "username": "user-2", "sex": "女", "city": "城市-2", "sign": "签名-2" }, { "id": 10003, "username": "user-3", "sex": "女", "city": "城市-3", "sign": "签名-3" }, { "id": 10004, "username": "user-4", "sex": "男", "city": "城市-4", "sign": "签名-4" }
]
} 三种初始化渲染方式 机制 适用场景 方法渲染 用JS方法的配置完成渲染 （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 自动渲染 HTML配置，自动渲染 无需写过多 JS，可专注于 HTML 表头部分 转换静态表格 转化一段已有的表格元素 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 方法渲染 将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器
layui.use('table', function(){ var table = layui.table;
// 执行渲染
table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
,url: 'user.json' // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
]]
});
}); 注：*table.render()*方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。
自动渲染 在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。
1) 带有 class=“layui-table” 的
标签。 2) 对标签设置属性 lay-data="" 用于配置一些基础参数 3) 在 标签中设置属性*lay-data=""*用于配置表头信息
| ID | 用户名 | 性别 |
|---|
| 昵称 | 积分 | 签名 |
|---|---|---|
| 贤心1 | 66 | 人生就像是一场修行a |
layui.use('table', function(){ var table = layui.table;
// 转换静态表格
table.init('demo', {
height: 315 // 设置高度
// 支持所有基础参数
});
}); 基础参数使用的场景 // 场景一：下述方法中的键值即为基础参数项 table.render({ height: 300 ,url: 'user.json' });
// 场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
……// 更多场景：下述 options 即为含有基础参数项的对象
table.init('filter', options); // 转化静态表格 var tableObj = table.render({}); tableObj.reload(options); // 重载表格 开启分页
// 执行渲染
table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
,url: 'user.json' // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
]]
});
}); 开启头部工具栏
layui.use('table', function(){ var table = layui.table;
// 执行渲染
table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
,url: 'user.json' // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏
]]
,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
});
/**
* 头工具栏事件
* 语法：
table.on('toolbar(demo)', function(obj){
});
注：demo表示选择器元素上设置的lay-filter属性值
*/
table.on('toolbar(demo)', function(obj){
// obj.config.id 当前选择器的id属性值，即demo
// 获取当前表格被选中的记录对象，返回数组
var checkStatus = table.checkStatus(obj.config.id);
// obj.event 得到当前点击元素的事件名
switch(obj.event){
case 'getCheckData':
// 获取被选中的记录的数组
var data = checkStatus.data;
// 将数组数据解析成字符串
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
// checkStatus.isAll 判断记录是否被全选
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
// 自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
/**
* 监听行工具事件
*/
table.on('tool(demo)', function(obj){
// 得到当前操作的tr的相关信息
var data = obj.data;
if(obj.event === 'del'){
// 确认框
layer.confirm('真的删除行么', function(index){
// 删除指定tr
obj.del();
// index 当前弹出层的下标，通过下标关闭弹出层
layer.close(index);
});
} else if(obj.event === 'edit'){
// 输入框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType: 0
,value: data.username
}, function(value, index){
// 修改指定单元格的值
// value表示输入的值
obj.update({
username: value
});
// 关闭弹出层
layer.close(index);
});
}
});
}); 开启单元格编辑
| ID | ID | 用户名 | 性别 | 城市 | 积分 |
|---|
// 监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在行所有键值
,field = obj.field; // 得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
}); 数据表格的重载
// 执行渲染
table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
,url: 'user.json' // 数据接口
,page:true // 开启分页
,cols: [[ // 设置表头
{type: 'checkbox', fixed: 'left'} // 设置复选框
,{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
]]
});
// 给指定元素绑定事件
$(document).on('click', '#searchBtn', function(data) {
// 获取搜索框对象
var demoReload = $('#demoReload');
table.reload('demo', {
where: { // 设定异步数据接口的额外参数，任意设
id: demoReload.val()
}
,page: {
// 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选
curr: 1 // 重新从第 1 页开始
}
}); // 只重载数据
});
}); sort: true, edit: ‘text’}">积分
layui.use('table', function(){
var table = layui.table;
// 监听单元格编辑
table.on('edit(demo)', function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在行所有键值
,field = obj.field; // 得到字段
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
});
});
数据表格的重载
<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
layui.use('table', function(){
var table = layui.table;
var $ = layui.jquery; // 获取jquery对象
// 执行渲染
table.render({
elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
,url: 'user.json' // 数据接口
,page:true // 开启分页
,cols: [[ // 设置表头
{type: 'checkbox', fixed: 'left'} // 设置复选框
,{field: 'id', title: 'ID'}
,{field: 'username', title: '用户名'}
,{field: 'sex', title: '性别'}
]]
});
// 给指定元素绑定事件
$(document).on('click', '#searchBtn', function(data) {
// 获取搜索框对象
var demoReload = $('#demoReload');
table.reload('demo', {
where: { // 设定异步数据接口的额外参数，任意设
id: demoReload.val()
}
,page: {
// 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选
curr: 1 // 重新从第 1 页开始
}
}); // 只重载数据
});
});
