效果

用到了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();
}

bootstrap+css进行页面布局的更多相关文章

  1. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  2. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  3. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  4. css篇-页面布局-三栏布局

    页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...

  5. html css 网络 页面布局 颜色 参考 拾取器网址

    http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ ========================== ...

  6. css后台页面布局技巧

    目标: 实现左边侧边栏固定,右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动,且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条,较多时可以滚动 code: < ...

  7. css页面布局总结

    W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 ...

  8. 前端武器库系列之html后台管理页面布局

    设计网页,让网页好看:网上找模板 搜 HTML模板 BootStrap 一.页面布局之主站页面 主站布局一般不占满页面,分为菜单栏.主页面.底部 上中下三部分.伪代码如下: <div class ...

  9. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

随机推荐

  1. JAVAWEB常见易错问题大汇总

    1.如何修改tomcat访问端口? Answer: conf/server.xml 2.如何配置tomcat Manager访问用户? Answer: conf/tomcat-users.xml 主要 ...

  2. python脚本5_求素数

    #求素数 #素数:只能被1和它自己整除 n = int(input('Please input a number >>>')) flag = False for i in range ...

  3. Linux:安装git

    1.下载 https://www.kernel.org/pub/software/scm/git/git-2.9.4.tar.gz 2.解压 tar zxvf git-2.9.4.tar.gz cd  ...

  4. UVALive 4270 Discrete Square Roots

    题目描述: 在已知一个离散平方根的情况下,按照从小到大的顺序输出其他所有的离散平方根. 在模n意义下,非负整数x的离散平方根是满足0<=r<n且r2=x(mod n)的整数r. 解题思路: ...

  5. 对CSS了解-选择器权重

    <style type="text/css"> div.ui_infor p {font-size: 16px;} .ui_infor p {font-size: 14 ...

  6. Matplotlib -多组线用不同的线性、颜色、节点绘制

    先来看看我们要实现的效果图吧: 先来看看Matplotlib的plot函数原型 plt.plot(x, y, color='r', maker='o', linestyle='-', linewidt ...

  7. 【ccf 2017/12/4】行车路线(dijkstra变形)

    问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...

  8. 浅析Java基本数据类型

    作为一种强类型语言,Java针对每一种数据都定义了明确的数据类型.大体来讲可分为:基本数据类型和引用数据类型:在此,主要讨论前者,后者以后再继续探究. Java基本数据类型分为四类八种: 1: 整数 ...

  9. ng 实现插入和删除

    结果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> ...

  10. [分享]Google 全球 IP 地址库[Google Global Cache IPs]

    Google 全球 IP 地址库 IP 地址来源:http://www.kookle.co.nr,共计4351个. Bulgaria 93.123.23.1 93.123.23.2 93.123.23 ...