layui--table的使用以及后端抽象的方法

最新推荐文章于 2025-03-21 15:30:17 发布

mangrandi

最新推荐文章于 2025-03-21 15:30:17 发布

阅读量978

点赞数

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/mangrandi/article/details/80031476

版权

layui 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于layui框架的表格组件实战案例，包括前端页面展示和后端数据处理两部分。前端利用layui渲染了一个具备搜索功能的数据表格，后端则通过PHP提供数据支持，并实现了数据格式化处理。

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

1.前台页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body> 
 


<div class="demoTable">
  搜索ID：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
 
<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> 
               
          
<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
    var table = layui.table;
  
    //table方法级渲染
    table.render({
      elem: '#LAY_table_user'
      ,url: './lay.php?action=table'
      ,cols: [[
        {type:'numbers'}
        ,{type:'checkbox'}
        // {checkbox: true, fixed: true}
        ,{field:'id', title: 'ID', width:80, sort: true, }
        ,{field:'username', title: '用户名', width:80}
        ,{field:'sex', title: '性别', width:80, sort: true}
        ,{field:'city', title: '城市', width:80}
        ,{field:'sign', title: '签名'}
        ,{field:'experience', title: '积分', sort: true, width:80}
        ,{field:'score', title: '评分', sort: true, width:80}
        ,{field:'classify', title: '职业', width:80}
        ,{field:'wealth', title: '财富', sort: true, width:135}
      ]]
      ,id: 'testReload'
      ,page: true
      ,height: 315
    });
    //table重载
    var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');
          
          //执行重载
          table.reload('testReload', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
                id: demoReload.val()//这里是搜索条件哦！！！！！
              }
            }
          });
        }
    };
    //触发重载的
    $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    //监听复选框选择。这里能获得checkbox的值哦！！！
    table.on('checkbox(user)', function(obj){
        var checkStatus = table.checkStatus('testReload')
        ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
    });

});


</script>

</body>
</html>

2.后端页面。format_table可以常态使用

<?php

// +----------------------------------------------------------------------
// | 2.可以在项目中使用的函数,但是要做一些适配哦
// +----------------------------------------------------------------------    

//格式化返回数据给layui table
function format_table($data,$count){
    /**
     * 1.在框架里,对ajax请求,默认会做json处理返回前端
     */
    $response = array(
        'code' => 0,
        'msg' => '',
        'count' => $count,
        'data' => $data,
    );
    //在框架当中不要如下使用
    echo json_encode($response);

    //框架中要如下使用。
    //return ($response);//在框架里,因为对ajax请求,默认会做json处理返回前端的
}
//格式化数据给lay tree控件
function format_tree($items,$name='name',$primaryKey='id',$relation='parent_id',$diff=0){
    //$items  二位数组;查库结果格式就可以
    //$name   想在树控件上显示的字段名称
    //$primaryKey 主键用来避免重复
    //$relation  表示关联关系的字段名称比如 parent_id
    //$diff     用来确定谁为父集
    $arr = [];
    foreach($items AS $k1 => $v1){
        $tmp = $v1;
        $tmp['name'] = $v1[$name];
        if($v1[$relation] == $diff){
            if(!isset($arr[$v1[$primaryKey]])){ 
                $arr[$v1[$primaryKey]] = [];
            }
            $arr[$v1[$primaryKey]] = array_merge($tmp,$arr[$v1[$primaryKey]]);//保留键值的合并
        }else{
            if(!isset($arr[$v1[$relation]])){
                $arr[$v1[$relation]] = [];                
            }
            if(!isset($arr[$v1[$relation]]['children'])){
                $arr[$v1[$relation]]['children'] = [];  
            }
            $arr[$v1[$relation]]['children'][]  = $tmp;
        }
    }
    //键值从0开始json串开头[
    return json_encode(array_values($arr) ,JSON_UNESCAPED_UNICODE);
}

// +----------------------------------------------------------------------
// | 1.测试程序使用的函数
// +----------------------------------------------------------------------    

//判断是否为get 
function is_get()  
{  
   return isset($_SERVER['REQUEST_METHOD']) && strtoupper($_SERVER['REQUEST_METHOD'])=='GET';     
} 
//判断是否为post 
function is_post()  
{  
   return isset($_SERVER['REQUEST_METHOD']) && strtoupper($_SERVER['REQUEST_METHOD'])=='POST';    
} 
//判断是否为ajax 
function is_ajax()  
{  
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtoupper($_SERVER['HTTP_X_REQUESTED_WITH'])=='XMLHTTPREQUEST';   
}

//table数据
function table(){
    /**
     * 1.对请求方式判断的好处是:强化函数的功能。当非ajax请求时渲染界面;ajax请求时专为table查询数据
     * 2.下面data赋值,就是参照数据库查询结果的形式。所以库查询时,不用单独做格式处理了
     */
    if(is_ajax()){
        $page  = 1;
        $limit = 10;
        $count = 30;
        $data  = array(
            array(
                "id"=> 10000,"username"=>"user-0","sex"=> "女","city"=> "城市-0","sign"=>"签名-0","experience"=>255,"logins"=>24,"wealth"     =>82830700,"classify"=>"作家","score"=>57,           
            ),
            array(
                "id"=>10001,"username"=>"user-1","sex"=>"男","city"=>"城市-1","sign"=>"签名-1","experience"=>884,"logins"=>58,"wealth"=>64928690,"classify"=>"词人","score"=>27
            ),
        );
        return format_table($data,$count);
    }

    //这里可以渲染模板扥等等操作
    #######

}

function tree(){
    $data = array(
        array('id'=>1,'name'=>'河南','parent_id'=>0),
        array('id'=>2,'name'=>'郑州','parent_id'=>1),
        array('id'=>3,'name'=>'河北','parent_id'=>0),
        array('id'=>4,'name'=>'石家庄','parent_id'=>3),
    );
    echo format_tree($data,'name','id','parent_id',0) ;
}
//处理请求的
$action =  $_GET['action'];
isset($action) && call_user_func_array($action,$_GET);
?>