详解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 相关文章推荐
高性能web服务器框架Tornado简单实现restful接口及开发实例
Jul 16 Python
Python实现列表删除重复元素的三种常用方法分析
Nov 24 Python
Python的numpy库中将矩阵转换为列表等函数的方法
Apr 04 Python
python自动重试第三方包retrying模块的方法
Apr 24 Python
Python利用splinter实现浏览器自动化操作方法
May 11 Python
解决python3读取Python2存储的pickle文件问题
Oct 25 Python
Python设计模式之备忘录模式原理与用法详解
Jan 15 Python
python可视化实现代码
Jan 15 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
Feb 26 Python
使用python+poco+夜神模拟器进行自动化测试实例
Apr 23 Python
浅谈keras使用中val_acc和acc值不同步的思考
Jun 18 Python
Expected conditions模块使用方法汇总代码解析
Aug 13 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
js变换显示图片的实例
2013/04/16 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
pybind11在Windows下的使用教程
2019/07/04 Python
Django中的cookie和session
2019/08/27 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
料理师求职信
2014/01/30 职场文书
护士毕业生自荐信
2014/02/07 职场文书
医院院务公开实施方案
2014/05/03 职场文书
动物科学专业求职信
2014/07/27 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
会议接待欢迎标语
2014/10/08 职场文书
机动车交通事故协议书
2015/01/29 职场文书
义诊活动总结
2015/02/04 职场文书
通知的格式范文
2015/04/27 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python