详解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 相关文章推荐
Python实现方便使用的级联进度信息实例
May 05 Python
Python学习_几种存取xls/xlsx文件的方法总结
May 03 Python
python模块smtplib学习
May 22 Python
python多进程实现文件下载传输功能
Jul 28 Python
python定时按日期备份MySQL数据并压缩
Apr 19 Python
Python pandas DataFrame操作的实现代码
Jun 21 Python
Django视图扩展类知识点详解
Oct 25 Python
python实现淘宝购物系统
Oct 25 Python
python中的函数递归和迭代原理解析
Nov 14 Python
python re模块匹配贪婪和非贪婪模式详解
Feb 11 Python
Python任务调度模块APScheduler使用
Apr 15 Python
安装python依赖包psycopg2来调用postgresql的操作
Jan 01 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框架Laravel学习心得体会
2015/10/28 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
原生js实现购物车功能
2020/09/23 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python实现文法左递归的消除方法
2020/05/22 Python
thinkphp5 路由分发原理
2021/03/18 PHP
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
线程同步的方法
2016/11/23 面试题
2014年工程工作总结
2014/11/25 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
2014公司年终工作总结
2014/12/19 职场文书
同学会邀请函模板
2015/01/30 职场文书
明星邀请函
2015/02/02 职场文书
三方合作意向书范本
2015/05/09 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server