您好,登錄后才能下訂單哦!
<section class="layui-fluid"> <aside class="layui-card" id="queryDiv"> <div class="layui-elem-quote"> <form class="layui-form"> <div class="layui-inline"> <label>號(hào)碼:</label> <div class="layui-input-inline"> <input class="layui-input" id="phone" type="text"> </div> <a class="layui-btn search_btn" data-type="reload">搜索</a> </div> </form> </div> </aside> <article class="my-table"> <table id="tableList" lay-filter="tableList"></table> </article> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container" id="tableNav"> <button type="button" class="layui-btn layui-btn-sm" id="add">新增用戶</button> <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="del">刪除用戶</button> </div> </script> </section >
layui.use(['form','layer','table'],function(){ var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer, table = layui.table; // 加載提示 var loadingMsg = layer.msg('數(shù)據(jù)請(qǐng)求中', {icon: 16,scrollbar: false,time: 0}); // 初始化表格及數(shù)據(jù) var tableIns = table.render({ elem: '#tableList', url : 'sysUser/list', where :{ phone : $("#phone").val() }, cellMinWidth : 95, toolbar: "#toolbarDemo", //讓工具欄左側(cè)顯示默認(rèn)的內(nèi)置模板 defaultToolbar: ['filter'], // 工具欄右側(cè)的圖標(biāo)按鈕['filter', 'print', 'exports'] even: true, // 開(kāi)啟斑馬線效果 page : true, // height : "full-125",//放置在頁(yè)面底部 limits : myLimits, limit : myLimit, id : "tableListTable", cols : [[ {field: 'userId', title: 'ID', width:100, align:"center"}, {field: 'userName', title: '用戶名', minWidth:150, align:"center"}, {field: 'state', title: '狀態(tài)', width:80, align:"center", templet: stateFormat}, {field: 'sex', title: '性別', width:80, align:"center", templet: sexFormat}, {field: 'remark', title: '備注', align:"center"} ]], done: function(res, curr, count){ // 關(guān)閉提示層 layer.close(loadingMsg); // 綁定表格工具欄按鈕的觸發(fā)事件 bindTableToolbarFunction(); } }); // ==================== 定義常規(guī)函數(shù) ==================== // 刷新表格數(shù)據(jù) function reloadTable(){ // 加載提示 loadingMsg = layer.msg('數(shù)據(jù)請(qǐng)求中', {icon: 16,scrollbar: false,time: 0}); // 重新加載數(shù)據(jù) table.reload("tableListTable",{ page: { curr: 1 //重新從第 1 頁(yè)開(kāi)始 }, where: { phone : $("#phone").val() }, done: function(res, curr, count){ layer.close(loadingMsg); bindTableToolbarFunction() } }); } // 搜索【此功能需要后臺(tái)配合,所以暫時(shí)沒(méi)有動(dòng)態(tài)效果演示】 $(".search_btn").on("click",function(){ // 刷新表格 reloadTable(); }); // 格式化顯示用戶狀態(tài)信息 function stateFormat(d){ var str; if (d.state == 0) { str = '<span class="fontColor_red">禁用</span>'; } else if(d.state == 1) { str = '<span class="fontColor_green">正常</span>'; } else { str = '<span class="fontColor_darkOrange">鎖定</span>'; } return str; } // 格式化顯示sex信息 function sexFormat(d){ var str; if (d.sex == 0) { str = '女'; } else if(d.sex == 1) { str = '男'; } else { str = '<span class="fontColor_red">未知</span>'; } return str; } // ==================== 定義事件處理 ==================== // 綁定事件集合處理(表格加載完畢和表格刷新的時(shí)候調(diào)用) function bindTableToolbarFunction() { // 綁定新增用戶事件 $("#add").on("click", function() { layer.alert("新增用戶被調(diào)用了", {icon: 6}); }); // 綁定刪除用戶事件 $("#del").on("click", function() { layer.alert("刪除用戶被調(diào)用了", {icon: 6}); }); } })
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。