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、h三、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();
    }