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('数据请求中', {icon: 16,scrollbar: false,time: 0}); // 初始化表格及数据 var tableIns = table.render({ elem: '#tableList', url : 'sysUser/list', where :{ phone : $("#phone").val() }, cellMinWidth : 95, toolbar: "#toolbarDemo", //让工具栏左侧显示默认的内置模板 defaultToolbar: ['filter'], // 工具栏右侧的图标按钮['filter', 'print', 'exports'] even: true, // 开启斑马线效果 page : true, // height : "full-125",//放置在页面底部 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: '状态', 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){ // 关闭提示层 layer.close(loadingMsg); // 绑定表格工具栏按钮的触发事件 bindTableToolbarFunction(); } }); // ==================== 定义常规函数 ==================== // 刷新表格数据 function reloadTable(){ // 加载提示 loadingMsg = layer.msg('数据请求中', {icon: 16,scrollbar: false,time: 0}); // 重新加载数据 table.reload("tableListTable",{ page: { curr: 1 //重新从第 1 页开始 }, where: { phone : $("#phone").val() }, done: function(res, curr, count){ layer.close(loadingMsg); bindTableToolbarFunction() } }); } // 搜索【此功能需要后台配合,所以暂时没有动态效果演示】 $(".search_btn").on("click",function(){ // 刷新表格 reloadTable(); }); // 格式化显示用户状态信息 function stateFormat(d){ var str; if (d.state == 0) { str = '禁用'; } else if(d.state == 1) { str = '正常'; } else { str = '锁定'; } return str; } // 格式化显示sex信息 function sexFormat(d){ var str; if (d.sex == 0) { str = '女'; } else if(d.sex == 1) { str = '男'; } else { str = '未知'; } return str; } // ==================== 定义事件处理 ==================== // 绑定事件集合处理(表格加载完毕和表格刷新的时候调用) function bindTableToolbarFunction() { // 绑定新增用户事件 $("#add").on("click", function() { layer.alert("新增用户被调用了", {icon: 6}); }); // 绑定删除用户事件 $("#del").on("click", function() { layer.alert("删除用户被调用了", {icon: 6}); }); } })