fastadmin 点击checkbox 或反选checkbox 统计某个字段的值

 

需要实现的效果如上图，当勾选了checkbox将分类ID的值累加到统计数据中(红色框对于的勾选分类ID之和)

思路是利用fastadmin的事件回调，对应的文档链接为：https://doc.fastadmin.net/doc/194.html

代码方面分为在html与在jquery对于的文件进行修改

html中添加显示的内容

<div class="panel panel-default panel-intro">
    
    <div class="panel-heading">
        {:build_heading(null,FALSE)}
        <ul class="nav nav-tabs" data-field="status">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>


    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('test/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('test/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('test/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        

                        <div class="dropdown btn-group {:$auth->check('test/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>

                        <a class="btn btn-success btn-recyclebin btn-dialog {:$auth->check('test/recyclebin')?'':'hide'}" href="test/recyclebin" title="{:__('Recycle bin')}"><i class="fa fa-recycle"></i> {:__('Recycle bin')}</a>
<!--                        <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">-->
<!--<!–                            <i class="fa fa-dollar"></i>–>-->
<!--                            <span class="extend">-->
<!--                                分类ID之和：<span id="category_total">0</span>-->
<!--                            </span>-->
<!--                        </a>-->
                        <a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;">
                            <!--                            <i class="fa fa-dollar"></i>-->
                            <span class="extend">
                                勾选分类ID之和：<span id="select_category_total">0</span>
                            </span>
                        </a>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('test/edit')}"
                           data-operate-del="{:$auth->check('test/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

jquery在为表格绑定事件(Table.api.bindevent(table);)之后，添加如下代码

table.on('check-all.bs.table',function (e, rows) {
                // 点击全选触发事件
                var select_total = 0;
                for (i = 0;i<rows.length;i++) {
                    select_total = select_total + rows[i].category_id;
                }
                $("#select_category_total").text(select_total);
            })

            table.on('uncheck-all.bs.table',function (e, rows) {
                // 点击反选触发事件
                $("#select_category_total").text("0");
            })

            table.on('check.bs.table',function (e, row) {
                // 勾选某一行触发事件
                var select_total = parseInt($("#select_category_total").text()) + row.category_id;
                $("#select_category_total").text(select_total);
            })

            table.on('uncheck.bs.table',function (e, row) {
                // 反选某一行触发事件
                var select_total = parseInt($("#select_category_total").text()) - row.category_id;
                $("#select_category_total").text(select_total);
            })

jquery的思路是，在触发了点击checkbox(全选、反选、单个勾选、单个反选)对应的事件时，进行值的统计