锁定表头和表头排序

最新推荐文章于 2024-03-29 09:41:19 发布

Rixton

最新推荐文章于 2024-03-29 09:41:19 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Tp3.2.3 文章标签： php 锁表头表格排序

本文链接：https://blog.youkuaiyun.com/Rixton/article/details/79787205

Tp3.2.3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种跨境零售数据的展示方式，通过PHP实现数据排序及显示功能，并利用HTML和JavaScript进行表格布局和表头锁定，确保数据清晰易读。

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

效果图如上，代码如下:

$content 是最终返回所有数据的数组。 $sum_salesAmount_sort 和$sum_scount_sort 是所有只有零售额和零售量的数组。

        $_SESSION['cross_border_channel_table2']=$content;
        $_SESSION['cross_border_table2_sum_salesAmount_sort']=$sum_salesAmount_sort;
        $_SESSION['cross_border_table2_sum_scount_sort']=$sum_scount_sort;

        $table_sum_salesAmount="<a href='javascropt:;' id='table_sum_salesAmount' class='desc' onclick=\"get_table1_content('sum_salesAmount')\" ><i class=\"fa fa-sort\"></i></a>";
        $table_sum_scount="<a href='javascropt:;' id='table_sum_scount' class='desc' onclick=\"get_table1_content('sum_scount')\" ><i class=\"fa fa-sort\"></i></a>";
        $table_title[]=array('platformName'=>'渠道','sum_salesAmount'=>'零售额(万元)'.$table_sum_salesAmount,'sales_vcount'=>'零售额占比(%)','salesAmount_mom'=>'零售额环比(%)','sum_scount'=>'零售量(万件)'.$table_sum_scount,'sales_scount'=>'零售量占比(%)','scount_mom'=>'零售量环比(%)');

最后调用：

    public function table(){
        $type=htmlspecialchars($_REQUEST['type']);
        $sort_val=htmlspecialchars($_REQUEST['sort_val']);
        $sum_salesAmount_sort = $_SESSION['cross_border_table2_sum_salesAmount_sort'];
        $sum_scount_sort = $_SESSION['cross_border_table2_sum_scount_sort'];
        $arr3=$_SESSION['cross_border_channel_table2'];

        if($type=='sum_salesAmount'){
            if($sort_val=='ASC'){
                array_multisort($sum_salesAmount_sort,SORT_ASC,$arr3);
            }else{
                array_multisort($sum_salesAmount_sort,SORT_DESC,$arr3);
            }
        }else if($type=='sum_scount'){
            if($sort_val=='ASC'){
                array_multisort($sum_scount_sort,SORT_ASC,$arr3);
            }else{
                array_multisort($sum_scount_sort,SORT_DESC,$arr3);
            }
        }
        $table_sum_scount='';
        $table_sum_salesAmount='';

        if($sort_val=='ASC'){
            $table_sum_scount="<a href='javascropt:;' id='table_sum_scount' class='asc' onclick=\"get_table1_content('sum_scount')\" ><i class=\"fa fa-sort\"></i></a>";
            $table_sum_salesAmount="<a href='javascropt:;' id='table_sum_salesAmount' class='asc' onclick=\"get_table1_content('sum_salesAmount')\" ><i class=\"fa fa-sort\"></i></a>";
        }else if($sort_val=='DESC'){
            $table_sum_scount="<a href='javascropt:;' id='table_sum_scount' class='desc' onclick=\"get_table1_content('sum_scount')\" ><i class=\"fa fa-sort\"></i></a>";
            $table_sum_salesAmount="<a href='javascropt:;' id='table_sum_salesAmount' class='desc' onclick=\"get_table1_content('sum_salesAmount')\" ><i class=\"fa fa-sort\"></i></a>";
        }

        $table_title[]=array('platformName'=>'渠道','sum_salesAmount'=>'零售额(万元)'.$table_sum_salesAmount,'sales_vcount'=>'零售额占比(%)','salesAmount_mom'=>'零售额环比(%)','sum_scount'=>'零售量(万件)'.$table_sum_scount,'sales_scount'=>'零售量占比(%)','scount_mom'=>'零售量环比(%)');
        $data['title']=$table_title;
        $data['content']=$arr3;
        $this->ajaxReturn($data);
    }

锁定表头

function getTable(t,id){
    var head = t.head;
    var body = t.body;
    var head_length=t.head.length;
    var head_width=$("#"+id).width()*0.96;
    //console.log(head_width);
    var table_title=Math.round(head_width/head_length);
    if(head_length==21){
        table_title=table_title+200;
    }
    var html = '';

    $.each(head,function(i,obj){
        if(i==0){
            html += '<td style=" min-width: '+table_title+'px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;">'+obj+'</td>'
        }else{
            html += '<td style=" min-width: '+table_title+'px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:right;">'+obj+'</td>'
        }
        // html += '<td style=" min-width: '+table_title+'px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">'+obj+'</td>'
    });
    var headStr = '<thead>'+'<tr style="white-space: nowrap;display: block;position: relative; background-color: #f8f8f8">'+html+'</tr></thead>';
    html = '';
    $.each(body,function(i,obj){
        var tmpStr = '';
        $.each(obj,function(ii,o){
            if(ii==0){
                tmpStr += '<td style="min-width: '+table_title+'px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;">'+String(o)+'</td>';

            }else{
                tmpStr += '<td style="min-width: '+table_title+'px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:right;">'+String(o)+'</td>';

            }
            // tmpStr += '<td style="min-width: '+table_title+'px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">'+String(o)+'</td>';
        });
        html += '<tr>'+tmpStr+'</tr>'
    });
    var bodyStr = '<tbody style="display: block;overflow: auto;height: 300px;">'+html+'</tbody>'
    html = '<table  class="table  table-hover coma-base-table fixed_headers">'+headStr+bodyStr+'</table>'
    return html
}