1.准备JSON
{ "code":0, "msg":"", "count":101, "data":[ { "id":"10001", "username":"杜甫", "email":"xianxin@layui.com", "sex":"1", "city":"浙江杭州", "LAY_CHECKED": true }, { "id":"10002", "username":"李白", "email":"xianxin@layui.com", "sex":"1", "city":"浙江杭州", "LAY_CHECKED": true }, { "id":"10003", "username":"王勃", "email":"xianxin@layui.com", "sex":"1", "city":"浙江杭州" }, { "id":"10004", "username":"李清照", "email":"xianxin@layui.com", "sex":"0", "city":"浙江杭州" }, { "id":"10005", "username":"冰心", "email":"xianxin@layui.com", "sex":"0", "city":"浙江杭州" }, { "id":"10006", "username":"贤心", "email":"xianxin@layui.com", "sex":"1", "city":"浙江杭州" }, { "id":"10007", "username":"贤心", "email":"xianxin@layui.com", "sex":"1", "city":"浙江杭州" }, { "id":"10008", "username":"贤心", "email":"xianxin@layui.com", "sex":"1", "city":"浙江杭州" } ] }
<script> layui.use(['layer','jquery','element','table','form'],function () { var $=layui.jquery; var element = layui.element; var layer = layui.layer; var table = layui.table; var form = layui.form; //渲染数据表格 var tableIns=table.render({ /* * elem String/DOM 指定原始 table 容器的选择器或 DOM，方法渲染方式必填 "#demo" * cols Array 设置表头。值是一个二维数组。方法渲染方式必填 详见表头参数 *url（等） - 异步数据接口相关参数。其中 url 参数为必填项 详见异步接口 *toolbar String/DOM/Boolean *width Number 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满，你也可以设定一个固定值，当容器中的内容超出了该宽度时，会自动出现横向滚动条。 1000 *height Number/String 设定容器高度 *cellMinWidth Number （layui 2.2.1 新增）全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth 100 * * */ elem: '#userTable' //渲染的目标对象 ,page: true //开启分页 ,url:'/json/user.json' //数据接口 ,toolbar: "#userToolBar" //工具条 ,title: '用户数据表' //数据导出时的标题 ,height:'full-300' ,cellMinWidth:60//单元格的最小宽度（默认：60） ,done: function(res, curr, count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度 console.log(res);//Object {code: 0, msg: "", count: 101, data: Array(8)} //得到当前页码 console.log(curr); //1 //得到数据总量 console.log(count); //101 } ,cols: [[ /*field 设定字段名。字段名的设定非常重要，且是表格数据列的唯一标识 *title String 设定标题名称 * totalRow :是否开启该列的自动合计功能 * totalRowText String 用于显示自定义的合计文本 * sort 排序页面已经有的 * edit:true 可编辑 * align:'center' 居中显示 * */ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'ID', fixed: 'left'} ,{field:'username', title:'用户名',sort:true,edit:true,align:'center'} ,{field:'email', title:'邮箱', edit: 'text', templet: function(res){ return '<em>'+ res.email +'</em>' }} ,{field:'sex', title:'性别', align: 'center',templet:function (d) { return d.sex='1'?'男':'女' ; }} ,{field:'city', title:'城市', width:100} ,{fixed: 'right',title: '操作',toolbar:'#barDemo',align: 'center'} ]] });
<%--▲数据表格开始--%> <%--数据表格--%> <table class="layui-hide" id="userTable" lay-filter="userTable"></table> <%--头部toolbar--%> <div style="display:none" id="userToolBar"> <div class="layui-btn-group"> <%--点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发--%> <button type="button" class="layui-btn" lay-event="add">增加</button> <button type="button" class="layui-btn" lay-event="delAll">批量删除</button> </div> </div> <%--表格中右边的按钮--%> <script type="text/html" id="barDemo"> <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> </script> <%--▲数据表格结束--%>
头部：搜索有关的代码
<%--搜索开始--%> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>查询条件</legend> </fieldset> <form class="layui-form" action="" method="post"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">编号</label> <div class="layui-input-inline"> <input type="text" name="id" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input type="text" name="email" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <input type="radio" name="sex" value="1" class="layui-input" title="男"> <input type="radio" name="sex" value="0" class="layui-input" title="女"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <input type="text" name="city" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item" style="text-align: center"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search">查询</button> <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button> </div> </div> </form> <%--搜索结束--%>
3：弹出层
<%--添加修改的弹出层开始--%> <div style="display: none;" id="saveOrUpdateDiv"> <form class="layui-form" lay-filter="dataFrm" id="dataFrm"> <div class="layui-form-item"> <label class="layui-form-label">编号</label> <div class="layui-input-inline"> <input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input"> </div> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="username"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input type="text" name="email" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="email"> </div> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <input type="text" name="city" placeholder="请输入" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <input type="radio" name="sex" value="1" class="layui-input" title="男"> <input type="radio" name="sex" value="0" class="layui-input" title="女"> </div> </div> </div> <div class="layui-form-item" style="text-align: center"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSumbit" lay-submit="" >提交</button> <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button> </div> </div> </form> </div> <%--添加修改的弹出层结束--%>
4：监听头部工具栏的事件：https://www.layui.com/doc/modules/table.html#ontoolbar
语法：table.on('event(filter)', callback); 注：event为内置事件名，filter为容器lay-filter设定的值
table模块在Layui事件机制中注册了专属事件，如果你使用layui.onevent()自定义模块事件，请勿占用table名。目前所支持的所有事件见下文
默认情况下，事件所监听的是全部的table模块容器，但如果你只想监听某一个容器，使用事件过滤器即可。
假设原始容器为：<table class="layui-table" lay-filter="test"></table> 那么你的事件监听写法如下：
- //以复选框事件为例
- table.on('checkbox(test)', function(obj){
- console.log(obj)
- });
//监听头部工具栏的事件 table.on('toolbar(userTable)', function(obj){ //var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case 'add': layer.msg('添加'); openAddUser(); break; case 'delAll': layer.msg('删除'); break; }; });
5：监听工具条
监听头部工具栏事件：点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发
table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话） if(layEvent === 'del'){ //删除 layer.msg("删除") layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'edit'){ //编辑 //do something //同步更新缓存对应的值 updateUser(data); //你要告诉哪个对象,所以把值传过来 layer.msg("修改") /*obj.update({ username: '123' ,title: 'xxx' });*/ } });
6：打开添加页面的方法 https://www.layui.com/doc/modules/layer.html#layer.open
layer.open(options) - 原始核心方法
基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识例子：
- var index = layer.open({
- content: 'test'
- });
- //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
type - 基本层类型
类型：Number，默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title - 标题
型：String/Array/Boolean，默认：'信息'
content - 内容
类型：String/DOM/Array，默认：''
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
ayer.msg(content, options, end) - 提示框
success - 层弹出后的成功回调方法
型：Function，默认：null
当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引
var url ; //弹出层的索引 var mainIndex; //打开添加页面 function openAddUser(){ mainIndex= layer.open({ type:1 ,title:'添加用户' ,content:$("#saveOrUpdateDiv") ,area: ['800px', '400px'] ,success:function (index) { //清空数据 jquery—转dom对象 $("#dataFrm")[0].reset(); url="/user/addUser"; } }) }
6：打开修改页面
function updateUser(data){ mainIndex=layer.open({ type:1 ,title:'修改用户' ,content:$("#saveOrUpdateDiv") ,area: ['800px', '400px'] //success - 层弹出后的成功回调方法 success会携带两个参数，分别是当前层DOM当前层索引 ,success:function(index){ //form.val('filter', object); form.val("dataFrm",data);//dataFrm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值 ,data:当前行数据 url="/user/updateUser"; } }) }
7：保存的方法 https://www.layui.com/doc/modules/form.html#onsubmit
按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：
form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value} return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 }); 再次温馨提示：上述的submit(*)中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如： codelayui.code <button lay-submit lay-filter="*">提交</button>
/*再次温馨提示：上述的submit(*)中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如： <button lay-submit lay-filter="*">提交</button>*/ form.on('submit(doSumbit)',function (obj) { //序列化表单数据 var params = $("#dataFrm").serialize(); alert(params); $.post("index.jsp",params,function (obj) { layer.msg(obj); //成功后关闭弹出层 layer.close(mainIndex); //刷新数据表格 tableIns.reload(); }) })
