fastadmin 點選checkbox 或反選checkbox 統計某個欄位的值
阿新 • • 發佈:2022-04-21
需要實現的效果如上圖,當勾選了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(全選、反選、單個勾選、單個反選)對應的事件時,進行值的統計