详解Python odoo中嵌入html简单的分页功能


Posted in Python onMay 29, 2019

在odoo中,通过iframe嵌入 html,页面数据则通过controllers获取,使用jinja2模板传值渲染

html页面分页内容,这里写了判断逻辑

<!-- 分页 -->
<ul id="ty_paging">
  <li class="home" id="home"><a href="/car/budget/report/1" rel="external nofollow" ></a>首页</li>
  {% if current_page == 1 %}
  <li class="prev" id="prev"><</li>
  {% else %}
  <li class="prev" id="prev"><a href="/car/budget/report/{{current_page - 1}}" rel="external nofollow" ><</a></li>
  {% endif %}
  {% if current_page == total_page %}
  <li class="next" id="next">></li>
  {% else %}
  <li class="next" id="next"><a href="/car/budget/report/{{current_page + 1}}" rel="external nofollow" >></a></li>
  {% endif %}
  <li class="max">共{{total_page}}页</li>
  <li class="max">第{{current_page}}页</li>
  <input type="number" min="1" value="1" class="inputPage" id="inputPage"/>
  <li class="jump" id="jump"><a id="add" href="javascript:void(0)" rel="external nofollow" onclick="subNmbr()">跳转</a></li>

</ul>

在,odoo的controllers中的逻辑

class CarBudgetReport(http.Controller):
  @http.route('/car/budget/report/<int:page>', auth='public')
  def index(self, page=1, **kw):
    data1 = request.env['lims.car.scheme'].get_first_budget()
    total_page = int(len(data1) / 10) + 1
    if page > total_page:
      data = []
    else:
      data = data1[(page - 1) * 10: page * 10]
    return env.get_template(HTML_FIEL_NAME).render({'data': data, 'current_page': page, 'total_page': total_page})

 CSS文件:

/* 分页功能的通用样式 */
#ty_paging {
 overflow: hidden;
 display: block;
 width: 100%;
 margin-top: 20px;
 text-align: center;
 user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 font-size: 14px;
 color: #000000;
 background-color: #FFFFFF;
}
#ty_paging li {
 display: inline-block;
 height: 32px;
 width: 32px;
 line-height: 32px;
 margin: 0px 5px;
 padding: 0px;
 border: 1px solid #ddd;
 border-radius: 2px;
 cursor: pointer;
 vertical-align: top;
 text-align: center;
}
#ty_paging .home,#ty_paging .jump {
 width: 56px;
 height: 32px;
}
#ty_paging .max {
 width: 60px;
 border: none;
}
#ty_paging .inputPage {
 height: 32px;
 width: 56px;
 border: 1px solid #ddd;
 border-radius: 2px;
 text-align: center;
 color: #000000;
}

 在后台xml中需要将路由设置默认为1

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="BudgettIframe">
      <iframe src="car/budget/report/1" marginheight="0" marginwidth="0" width="100%" height="100%" />
    </t>
</templates>

html 分页js代码

<script>
  // 悬浮样式
  $('#home, #jump').mouseover(function () {
    // if ($(this).val() == ty_currentPage) return;
    $(this).css({
      'border-color': '#2db71a',
      'color': '#000000',
      // 'background-color': '#337ab7',
    });
  });
  $('#home, #prev, #next, #jump').mouseout(function () {
    // if ($(this).val() == ty_currentPage) return;
    $(this).css({
      'border-color': "#ddd",
      'color': '#666',
      // 'background-color': '#ffffff',
    });
  });
  $('#up, #down').mouseover(function () {
    // if ($(this).val() == ty_currentPage) return;
    $(this).css({
      'border-color': '#337ab7',
      'color': '#ffffff',
      'background-color': '#2db71a',
    });
  });
  $('#up, #down').mouseout(function () {
    // if ($(this).val() == ty_currentPage) return;
    $(this).css({
      'border-color': "#000000",
      'color': '#000000',
      'background-color': '#ffffff',
    });
  });
  // 点击跳转页面需要用到方法
  function subNmbr() {
    // 先获取到页面上input输入框中的值
    var subNmbr = document.getElementById('inputPage').value;
    // console.log(subNmbr);
    // 在获取li的id,在点击时做一个动作
    document.getElementById("jump").onclick = function () {
      //根据a标签的id获取链接,设置href属性
      var aObj = document.getElementById("add");
      // 把要跳转的页面连接传入href
      aObj.href = "/car/budget/report/" + subNmbr;
      //根据id获取超链接,设置文字内容
      aObj.innerText = "跳转";
    };
  }
</script>

之后便可以进行数据的简单分页

详解Python odoo中嵌入html简单的分页功能

总结

以上所述是小编给大家介绍的Python odoo中嵌入html简单的分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Python 相关文章推荐
Linux下Python获取IP地址的代码
Nov 30 Python
实例解析Python中的__new__特殊方法
Jun 02 Python
Python 使用os.remove删除文件夹时报错的解决方法
Jan 13 Python
基于python的Tkinter编写登陆注册界面
Jun 30 Python
python实现堆和索引堆的代码示例
Mar 19 Python
Python比较2个时间大小的实现方法
Apr 10 Python
Python通过调用有道翻译api实现翻译功能示例
Jul 19 Python
python中的插值 scipy-interp的实现代码
Jul 23 Python
如何利用python制作时间戳转换工具详解
Sep 12 Python
python模块常用用法实例详解
Oct 17 Python
Python彻底删除文件夹及其子文件方式
Dec 23 Python
python入门:argparse浅析 nargs='+'作用
Jul 12 Python
Python 3.8中实现functools.cached_property功能
May 29 #Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
May 29 #Python
Python安装与基本数据类型教程详解
May 29 #Python
python登录WeChat 实现自动回复实例详解
May 28 #Python
Python语言进阶知识点总结
May 28 #Python
python图像和办公文档处理总结
May 28 #Python
python网络应用开发知识点浅析
May 28 #Python
You might like
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python实现年会抽奖程序
2019/01/22 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
导致python中import错误的原因是什么
2020/07/01 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
.net C#面试题
2012/08/28 面试题
小学红领巾中秋节广播稿
2014/01/13 职场文书
教师党员公开承诺书
2014/03/25 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle