详解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 相关文章推荐
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
May 02 Python
使用Python对Access读写操作
Mar 30 Python
python交互式图形编程实例(三)
Nov 17 Python
Python查找第n个子串的技巧分享
Jun 27 Python
Python绘制的二项分布概率图示例
Aug 22 Python
python 定义n个变量方法 (变量声明自动化)
Nov 10 Python
python解压TAR文件至指定文件夹的实例
Jun 10 Python
在django中,关于session的通用设置方法
Aug 06 Python
Python文本处理简单易懂方法解析
Dec 19 Python
解决tensorflow添加ptb库的问题
Feb 10 Python
pandas中read_csv、rolling、expanding用法详解
Apr 21 Python
pytorch 限制GPU使用效率详解(计算效率)
Jun 27 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安全配置
2006/10/09 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python中turtle作图示例
2017/11/15 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
delegate与普通函数的区别
2014/01/22 面试题
美术教师自我鉴定
2014/02/12 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
主持词开场白
2014/03/17 职场文书
房屋产权证明书
2015/06/19 职场文书
公司宣传语大全
2015/07/13 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
docker-compose部署Yapi的方法
2022/04/08 Servers