lay ui的用法，后台管理，调取后端接口

最新推荐文章于 2025-06-02 12:40:30 发布

原创最新推荐文章于 2025-06-02 12:40:30 发布 · 1w 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#layui

前端专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何使用layui框架的表格模块实现后台管理界面的分页、数据展示及操作。通过实例代码，展示了如何配置数据接口、分页参数、响应数据解析等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

-学习框架最好的办法是就是看官方文档，如果看不懂。。。。
那就百度一下，看看别人怎么写的，
自己一开始也是被这个折磨的欲仙欲死，最后没办法死啃文档才弄懂了一部分；
言归正传：
需求，后台管理，分页，跳转…
第一步下载layui.css 和layui.js，并引用(废话)

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
 <只需这样一句就好>
<table id="demo" lay-filter="test"></table>
 
<script src="/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo',
    height: 312,
    url: '/demo/table/user/',   //数据接口
		//默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） 
		//此处一定要注意，后台的接口要有page 第几页 和 每页显示几条数据
		// page 代表当前页码、limit 代表每页数据量
    limit: 10 , //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
    page: true ,    //开启分页
    method：get,       //请求方式，默认get
    where:{	    //向后台发起请求的数据
				    token: 'sasasas', 
				    id: 123,
				    page:page
				},
	//后台给你的字段名称，很多时候和layui上的不一致，所以下面这步，非常重要，
	//在 response属性里面要把后台返回的字段名称，转化成layui能识别的字段名
 response: {
	    statusName: 'status' //规定数据状态的字段名称，默认：code
	    ,statusCode: 200 //规定成功的状态码，默认：0
	    ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
	    ,countName: 'total' //规定数据总数的字段名称，默认：count
	    ,dataName: 'rows' //规定数据列表的字段名称，默认：data
	  } ,
	parseData: function(res){ //res 即为原始返回的数据
		    return {
		      "code": res.status, //解析接口状态
		      "msg": res.message, //解析提示文本
		      "count": res.total, //解析数据长度
		      "data": res.data.item //解析数据列表
		    };
	    },
	    // 用于对分页请求的参数：page、limit重新设定名称
   request: {
			  pageName: 'curr' //页码的参数名称，默认：page
			   ,limitName: 'nums' //每页数据量的参数名，默认：limit
			 }
   cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80,
      			//在templet可以将后台返回的字段再次处理。比如
      			// 在一个单元格里面你要显示三个字段，就可以在templet里面进行拼接，
      			//或者增加一些样式，等等
				 templet: function(res){
			        return   res.id  + res.title;
			      }
			}
    ]]
  });
  
});
</script>
</body>
</html>

到这，不出意外，后台给的数据合理，页面就显示出来了
在这我用的是方法渲染，

此时的barDemo是一个模板元素的选择器你可以放在任何地方。

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <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>

如果要设置删除，修改按钮，要在cols里面增加一个属性toolbar后面写上模板选择器的ID名即可

table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center',
     toolbar: '#barDemo'  //这里的toolbar值是模板元素的选择器
     } 
  ]]
});

删除，修改文档里面字儿的很详细，多看看并去试一下，就懂了，