效果
用到了bootstrap中的表格css、圆形css、以及上一页下一页css。
布局页面，填充数据，实现js动态效果（比如点击下一页，上一页），逐步完善。
不仅仅要会使用bootstrap中的样式，也要能够灵活的运用css样式，两者结合，才能够融会贯通，活学活用。
1.表格部分
<div id="datalist"> <table class="table table-striped"> <thead> <tr> <th>项目</th> <th>次数</th> <th>奖金</th> </tr> </thead> <tbody> <empty name="list"><tr><td class="text-center" colspan="3">暂无数据</td></tr></empty> <volist name="list" id="vo"> <tr> <td>{sh:$vo.name}</td> <td>{sh:$vo.bonus_count}</td> <td>{sh:$vo.bonus_money}</td> </tr> </volist> </tbody> </table> </div>
用到了bootstrap中的table、table-striped
然后自定义css
.table th { color: #C4C4C4; } .table tbody tr td+td+td { color: #D3964F; }
这样就实现了上面的表格样式了。
2.奖金
<div id="total" class="img-circle"> <div class="text-center money-txt"> <h3>奖金</h3> <h2>￥{sh:$total_money}</h2> </div> </div>
用到了bootstrap中的img-circle、text-center、h3、h2。
然后自定义css
#total { width: 140px; height: 140px; background-color: #EC6C00; margin: auto; } #total .money-txt { color: white; padding-top: 10px; }
是的圆圈居中，黄色，字体白色，字居中显示等等。
bootstrap结合自己定义的css样式共同实现需要的页面布局。
bootstrap提供了一些基础布局，需要灵活使用。
3.选择月份
<div id="select-date"> <ul class="pager"> <li class="previous"><a onclick="lastMonth();"><span aria-hidden="true">←</span> </a></li> <span class="date-txt"><strong>{sh:$s_year}.{sh:$s_month}</strong></span> <input type="text" id="s_year" value="{sh:$s_year}" hidden="hidden"> <input type="text" id="s_month" value="{sh:$s_month}" hidden="hidden"> <li class="next"><a onclick="nextMonth();"><span aria-hidden="true">→</span></a></li> </ul> </div>
上下月份选择，用到了bootstrap中的pager、previous、next等等。
然后灵活的添加表单、click事件。实现动态效果。
js
<script type="text/javascript"> function lastMonth(){ var s_year = $('#s_year').val(); var s_month = $('#s_month').val(); window.location.href="{sh::U('User/bonus')}&s_year="+s_year+"&s_month="+s_month+"&type=last"; } function nextMonth(){ var s_year = $('#s_year').val(); var s_month = $('#s_month').val(); window.location.href="{sh::U('User/bonus')}&s_year="+s_year+"&s_month="+s_month+"&type=next"; } </script>
4.php获取数据
public function bonus() { if($type = $this->_request('type','trim')){ $s_year = $this->_request('s_year','trim'); $s_month = $this->_request('s_month','trim'); if($type == 'last'){ // 获取上一月 if($s_month==1){ $useYear = $s_year-1; $useMonth = 12; }else{ $useYear = $s_year; $useMonth = $s_month-1; } } if($type == 'next'){ // 获取下一月 if($s_month==12){ $useYear = $s_year+1; $useMonth = 1; }else{ $useYear = $s_year; $useMonth = $s_month+1; } } }else{ // 获取当前年 月 $useYear = date('Y'); $useMonth = date('m'); } $this->assign('s_year',$useYear); $this->assign('s_month',$useMonth); $opener_id = $this->opener_id; if(empty($opener_id)){ $this->error('数据有误'); } $agent_id = $this->opener['agent_id']; //所属代理商id $where['a.agent_id'] = $agent_id; $where['a.year'] = $useYear; $where['a.month'] = $useMonth; // 获取当前拓展员当前月的奖金信息，以设置的获奖项目为基础 // 子查询获取当前代理商的全部奖金数据 $whereSub['a.opener_id'] = $opener_id; $subQuery = M()->table('sh_opener_bonus a')->join('sh_incentive b on a.incentive_id = b.id')->where($whereSub)->field('a.id as bonus_id,b.id as incentive_id,b.money')->select(false); // 获取最终数据 $list = M()->table('sh_incentive a')->join('left join '.$subQuery.' b on a.id = b.incentive_id')->join('sh_incentive_item c on a.item_id = c.id')->where($where)->field('count(b.bonus_id) as bonus_count,sum( if( b.money > 0, b.money, 0)) as bonus_money,c.name')->group('a.id')->select(); $total_money = 0; foreach ($list as $k => $v) { $total_money += $v['bonus_money']; } $this->assign('total_money',$total_money); $this->assign('list',$list); $this->display(); }
本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5031765.html，如需转载请自行联系原作者
