PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > Fastadmin

bootstrap-Table 统计 求和 footerFormatter 分享

管理员 2024-12-14
Fastadmin
10

1.表格很好,有的时候需求和,然后bootstrap-table 默认是关闭 footer的,所以表格不显示footer也就是最后一行
2.我们需要在表格初始化的时候打开footer选项 showFooter:true

var Controller = {        index: function () {            // 初始化表格参数配置            Table.api.init({                showFooter:true,                extend: {                    index_url: 'cneed/index',                    add_url: 'cneed/add',                    edit_url: 'cneed/edit',                    del_url: 'cneed/del',                    multi_url: 'cneed/multi',                    table: 'lvdate',                }            });

3.在colums里面 将需要显示footer的列,加上footFormatter

columns: [                    [ {title: '客户需求表',colspan: 14}],//这是第一行大标题                    [                        {checkbox: true,footerFormatter:function(data){                                return '总计';//在第一列开头写上总计、统计之类                            }                        },

其中 footerFormatter:后面的 function 需要返回string 这是官方手册上说的
4.我们可以在需要的列进行计算,我这里纯是实验 所及计算了一下PID

{field: 'PID', title: __('Pid'),sortable: true,footerFormatter: function (data) {                                var field = this.field;                                var total_sum = data.reduce(function (sum, row) {                                    return (sum) + (parseFloat(row[field]) || 0);                                }, 0);                                return total_sum.toFixed(2);                            }

5.最终结果是这样
未标题-1.jpg
6.最终感谢 QQ:ID为:^阿茂-桂林 的大神 感谢关注 感谢耐心指导,祝你事业顺利,身体健康!

回答提问:当前统计整页的值,如何统计全部值并显示在前端呢?

1. 在控制器里面统计数据

/**     * 查看     */    public function index()    {        //当前是否为关联查询        $this->relationSearch = true;        //设置过滤方法        $this->request->filter(['strip_tags']);        if ($this->request->isAjax()) {            //如果发送的来源是Selectpage,则转发到Selectpage            if ($this->request->request('keyField')) {                return $this->selectpage();            }            list($where, $sort, $order, $offset, $limit) = $this->buildparams();            $total = $this->model                ->where($where)                ->order($sort, $order)                ->count();            $list = $this->model                ->where($where)                ->order($sort, $order)                ->limit($offset, $limit)                ->select();            $sum['price']=0;//这里我们要统计的值是price 价格的合计,先定义一个变量值为0,用来保存统计的值            foreach ($list as $row) {                $row->visible(['id', 'price', 'phone', 'spec', 'account_id', 'remark', 'createtime', 'updatetime', 'admin_id']);                $sum['price']+=$row['price']//当然这里可以进行一些其他计算 如单价×价格 啥的 我这里简单的计算和            }            $list = collection($list)->toArray();            $result = array("total" => $total, "rows" => $list,"sum"=>$sum);//我们把$sum的值传单前端模板页面            return json($result);        }        return $this->view->fetch();    }

前端模板页面我们在js中 接收值并用jquery去修改到相应位置上去,代码片段如下

index: function () {            // 初始化表格参数配置            Table.api.init({ //初始化表格                extend: {                    index_url: 'grain/driver/detail',                    table: 'grain_buy',                }            });            var table = $("#table");            table.on('load-success.bs.table', function (e, data) {//在表格数据加载成功后 data为数据                //统计核算显示到模板页面                $("#toolbar .total").remove(); //防着刷新后 生成多余的统计单元                $("#toolbar").append('<a href="javascript:;" class="btn btn-default total" style="font-size:14px;color:dodgerblue;">' +                    '合计:<span>'+data.sum.price+'元 </span></a>');//用js在按钮旁边加一个统计的单元 参照K神的demo            });            // 初始化表格            table.bootstrapTable({                url: $.fn.bootstrapTable.defaults.extend.index_url,                pk: 'id',                sortName: 'id',                sortOrder:'asc',                columns: [                    [{title: '运输明细表', colspan: 16,class:'Transport'}],                    [                        {checkbox: true},                        {field: '', title: __('序号'), formatter: function (value, row, index) {                                var options = table.bootstrapTable('getOptions');                                var pageNumber = options.pageNumber;                                var pageSize = options.pageSize;                                return (pageNumber - 1) * pageSize + 1 + index;                            }, operate: false},                        {field: 'date', title: __('Date'), operate:'RANGE', addclass:'datetimerange'},                        {field: 'driver.num', title: __('Driver.num')},                    ]                ]            });            Table.api.bindevent(table);        },

希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部