bootstrap+css进行页面布局

效果

用到了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">&larr;</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">&rarr;</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();
    }