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(); }) })
