详解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验证码识别处理实例
Dec 28 Python
python爬虫之xpath的基本使用详解
Apr 18 Python
pytorch 转换矩阵的维数位置方法
Dec 08 Python
Python常用的json标准库
Feb 19 Python
python+webdriver自动化环境搭建步骤详解
Jun 03 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
Jun 12 Python
python dumps和loads区别详解
Feb 04 Python
Python编程快速上手——选择性拷贝操作案例分析
Feb 28 Python
浅谈Python中re.match()和re.search()的使用及区别
Apr 14 Python
python列表的逆序遍历实现
Apr 20 Python
Python利用matplotlib绘制折线图的新手教程
Nov 05 Python
使用Python爬取小姐姐图片(beautifulsoup法)
Feb 11 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函数strip_tags的一个bug浅析
2014/05/22 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Vue的Options用法说明
2020/08/14 Javascript
决策树的python实现方法
2014/11/18 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
用python绘制樱花树
2020/10/09 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
根叔历年演讲稿
2014/05/20 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
信用卡工资证明范本
2014/10/17 职场文书
汽车销售员工作总结
2015/08/12 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技