laravel根据数据动态生成表头和表格数据

约定不等于承诺〃 2024-04-17 05:45 60阅读 0赞

需求：根据数据动态配置表头，动态适配表头数据  
如下图，两个表的表头和数据一一对应，都为动态生成；  
完成功能思想：1.找出数据中的存在的最长表头，即所有数据都为表头的子集表头  
2.渲染数据时候，根据表头的字段进行帅选要显示的数据（用循环判断实现）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 1]

后端配置数据：

public function show($productid)
        {
    
            $products = Product::orderBy('created_at', 'desc')->get(); //发送给前端
    
            $versions = Versionindex::where('product_id', $productid)->with('versiondetail', 'versionatt')->get();
            $version_ids = $versions->pluck('id');
            $version_types = VersionGroup::where('product_id', $productid)->get();//模板配置表头
            $att_keys = VersionAttache::whereIn('versionindex_id', $version_ids)->groupBy('key')->get();//自定义配置表头
    
    
    
            return view('admin.hwtc.vers.show', compact('products', 'productid', 'version_types', 'att_keys', 'versions'));
        }

前端数据帅选：

<table class="layui-table">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    @foreach($version_types as $type)
                                        <th>{
       {$type->version_name}}</th>
                                    @endforeach
    
                                    @foreach($att_keys as $key)
                                        <th>{
       {$key->key}}</th>
                                    @endforeach
                                    <th>创建者</th>
                                    <th>创建时间</th>
                                    <th>是否启用</th>
                                    <th>是否冻结</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($versions as $k=>$item)
                                    <tr data-id="{
       {$item->id}}">
                                        <td>{
       {$k+1}}</td>
                                        @foreach($version_types as $type)
                                            @foreach($item->versiondetail as $detail)
                                                @if($detail->version_type == $type->version_type)
                                                    <td>{
       {@$detail->version_value}}</td>
                                                @endif
                                            @endforeach
                                        @endforeach
                                        @foreach($att_keys as $key)
                                            @foreach(@$item->versionatt as $att)
                                                @if($att->key == $key->key)
                                                    <td>{
       {@$att->value}}</td>
                                                @endif
                                            @endforeach
                                            @if(@$item->versionatt->pluck('key')->contains($key->key))
                                            @else
                                                <td></td>
                                            @endif
                                        @endforeach
                                        <td>{
       {$item->created_by}}</td>
                                        <td>{
       {$item->created_at}}</td>
                                        <td>{!! is_status($item->enabled,'enabled') !!}</td>
                                        <td>@if($item->freezed == 1)<i class="layui-icon is_something" data-attr="freezed"></i> @elseif($item->freezed == 0)
                                                <i class="layui-icon is_something" data-attr="freezed">ဆ</i> @endif
                                        </td>
                                        <td class="td-manage">
                                            <a lay-tips="编辑版本"
                                               onclick="WeAdminShow('编辑版本','{
       {route('hwtc.versionindex.edit',$item->id)}}')"
                                               href="javascript:;">
                                                <i class="layui-icon"></i>
                                            </a> 
    
                                            <a lay-tips="删除版本" href="{
       {route('hwtc.versionindex.destroy', $item->id)}}"
                                               data-method="delete"
                                               data-token="{
       {csrf_token()}}" data-confirm="确认删除吗?"
                                               class="btn btn-white btn-xs" lay-event="del"><i
                                                        class="layui-icon"></i></a>
    
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/68a609c1a4524cd6b069a58f33c52d79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY3NDExMw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/0676f9bd95f7476190efb421fb97076e.png