Layui 搭建一个页面demo（表格table,切换element，修改页码样式，搜索，修改加载样式）

本文链接：https://blog.csdn.net/github_38854224/article/details/88221416
页面样式：

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>问答频道后台</title>
	<link rel="stylesheet" rev="stylesheet" href="style/style.css?v=4" type="text/css" />
	<link rel="stylesheet" href="/layui/css/layui.css" id="layui">

	<style type="text/css">
	.mtab div{
		float:left;
		display:inline-block;
		margin-left:100px;
		font-size:14px;
		color:#222;
		line-height:30px;
		height:30px;
	}
	.mtab div b{
		padding:0 5px 0 3px;
		font-size:16px;
		color:#f00;
	}
	.mtab div span{
		padding-left:32px;
	}
	a:visited {
		color: #555;
		text-decoration: none;
	}
	a:link {
		color: #555;
		text-decoration: none;
	}
	</style>
</head>
<body>
	<div class="layui-fluid">
	  <div class="layui-row">
	    <div class="layui-col-xs12">
	      <div class="layui-card">
	        <div class="layui-card-header">
	          <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
	            <ul class="layui-tab-title" style="padding-left: 15px">
	              <li lay-id="a1" class="layui-this">问答帖子列表</li>
	              <li lay-id="a2" >已删除列表</li>
	            </ul>
	          </div> 
	        </div>
	        <div class="layui-card-body">	
				<div class="demoTable" style="padding-left: 15px">
					<div class="layui-inline">
					  <input class="layui-input" style="height:30px" name="id" id="idReload" autocomplete="off" placeholder="帖子ID">
					</div>
					或
					<div class="layui-inline">
					  <input class="layui-input" style="height:30px" name="id" id="useridReload" autocomplete="off" placeholder="用户ID">
					</div>
					<button class="layui-btn layui-btn-xs layui-btn-primary" data-type="reload">
					<i class="layui-icon layui-icon-search" style="font-size: 30px; color: #555;"></i> 
					搜索
					</button>
				</div>
	          <table id="list_hash" lay-filter="cms_reply_list"></table> 
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
</body>
<script type="text/html" id="user_hash">
  <a href="http://www.qubaobei.com/badmin/user/info.php?site=1&user_id={{d.user_id}}&mobile=" target="_blank" style="text-decoration:underline">{{d.user}}</a>
</script>
<script type="text/html" id="cms_list_hash">
  //a标签链接
  <a href="http://***/detail.php?id={{ d.id }}" target="_blank" class="layui-btn layui-btn-primary">原文</a>
  {{#
    if(d.state==1){
  }}
  <a class="layui-btn layui-btn-danger" lay-event="del">删除</a>
  {{#
    }else{
  }}
  <a class="layui-btn" lay-event="back">还原</a>
  {{# } }}

</script>
<style type="text/css">
{# 设置table每一行的height #}

.layui-table img {
    max-width: 100px;
}
.layui-table-cell{
    height:auto;
    overflow:visible;
    text-overflow:inherit;
    white-space:normal;
}
</style>
<script src="/layui/layui.js"></script>
<script>
	var pageLoadIndex;

  layui.use(['table','element','jquery'], function () {
    var $ = layui.jquery,
      element = layui.element, //Tab的切换功能，切换事件监听等，需要依赖element模块
      table   = layui.table;
      getList();

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
  var active = {
		reload: function(){
			var idReload = $('#idReload');
			var useridReload = $('#useridReload');
			//执行重载
			table.reload('testReload', {
			  page: {
				curr: 1 //重新从第 1 页开始
			  }
			  ,where: {
				id: idReload.val(),
				user_id:useridReload.val()
			  }
			});
		}
  };

    //卡片切换
  element.on('tab(docDemoTabBrief)', function(data){
    var index = data.index;
    if(index==0){
      var state=1;
    }else{
      var state=2;
    }
	
    table.reload('testReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          state: state
        }
      });
	  
  });

  //工具栏操作
  table.on('tool(cms_reply_list)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data      = obj.data;           //获得当前行数据
    var layEvent  = obj.event;          //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr;                    //获得当前行 tr 的DOM对象 
    switch(layEvent)
    {
      case 'del':
		update_state(data.id,0);
        break;
	  case 'back':
		update_state(data.id,1);
		break;
	  case 'lookReply':
		layer.open({
          type: 2,
          offset: '5px',
          area: ['1300px','700px'],
          fix: false, //不固定
          maxmin: true,
          shadeClose: true,
          shade: 0.4,
          title: data.title,
          content: "ask_special_reply_list.php?post_id="+data.id
        });
	    break;
      default:
        break;
    }

    function update_state(id,state){
        $.get(
          'http://*****',
          {'method':'change_ask_post','state':state,'id':id},
          function(data){
            if(data.ret == 1){
              obj.del(tr);                      //删除对应行（tr）的DOM结构 
              // var i = layer.msg(result.msg,{icon:1,time: 1000},function(){ layer.close(i);});
            }else{
              var i = layer.msg(data.msg,{icon:2,time: 1000},function(){ layer.close(i);});
            }
        },'json');
    }
  });

  //监听单元格编辑
  table.on('edit(cms_reply_list)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data      //得到所在行所有键值
    ,field = obj.field;   //得到字段
    var da = {'id':data.id,'field':field,'value':value};
    if(data.id){
      var url  = 'cms/update_field';
    }else{
      layer.msg('数据错误');
      return false;
    }
    $.get(
      url,
      da,
      function(data){
        var obj = JSON.parse(data);
        if(obj.ret == 1){
          var index = layer.alert(obj.msg,{icon:1},function(){ layer.close(index);});
        }else{
          var index = layer.alert(obj.msg,{icon:2},function(){ layer.close(index);});
        }
    });
  });

  function getList(){
    //第一个实例
    table.render({
      method: 'get',
      limit: 50,
      elem: '#list_hash',
      // even:true,
      height: 'full-10',
      url: '******?method=get_ask_post_list', 
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: 'id',
            title: 'ID',
            width: '8%',
			align: 'center'
		  },{
            field: 'title',
            title: '标题',
            width: '21%',
			event: 'lookReply', 
			style: 'cursor: pointer;'
          },{
            field: 'content',
            title: '内容',
            width: '20%'
		  },{
            field: 'user',
            title: '用户',
            width: '8%',
			templet:'#user_hash'
		  },{
            field: 're_num',
            title: '回复',
            width: '5%'
		  },{
            field: 'like_num',
            title: '点赞',
            width: '5%'
		  },{
            field: 'view_num',
            title: '浏览',
            width: '5%'
		  },{
            field: 'dated',
            title: '日期',
            width: '10%'
          },{
            width: '18%',
            align: 'center',
            title: '操作',
            toolbar: '#cms_list_hash'
          }
        ]
      ],
      id: 'testReload',
		loading: false,//关闭加载样式
		page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
			layout: [ 'prev', 'page', 'next', 'skip'] //自定义分页布局
			,groups: 8 //只显示 8 个连续页码
			,first: '首页' //显示首页
			,last: '100' //显示尾页
		},
		done: function (res, curr, count) {
			// 添加分页加载动画的函数 
			$('.layui-laypage > a').each(function () {
				$(this).attr('onclick', "pageLoading(this)");
			});
			layer.close(pageLoadIndex); // 渲染完成后关闭动画
		}
	});
  }

  //监听行单击事件
  table.on('row(cms_reply_list)', function(obj){
    last_reply_id = obj.data.id;
    reply_obj     = obj;
  });
    //修改加载样式
	window.pageLoading = function (that) {
		//添加页码禁用样式 
		$(".layui-box").find("a").addClass('layui-disabled');
		//添加表格的loading动画
		pageLoadIndex = layer.load(0, {
			shade: [0.1, '#fff'] //0.1透明度的白色背景
		});
	}
});

</script>