详解Python odoo中嵌入html简单的分页功能
2019-05-29 18:02
2903 查看
在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简单的分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- Django实现简单分页功能的方法详解
- 转发自刘鑫专栏:python_简单的声音播放功能
- 详解用Python处理HTML转义字符的5种方式
- Python 清理HTML标签类似PHP的strip_tags函数功能(二)
- Python嵌入C++详解
- 详解python实现FP-TREE进行关联规则挖掘(带有FP树显示功能)附源代码下载(1)
- python之urllib2简单解析HTML页面之篇一
- Python实现基于C/S架构的聊天室功能详解
- python_简单的声音播放功能
- Python实现的简单模板引擎功能示例
- 一个简单的有分页采集功能的php采集程序--自制的哦
- Python 超级简单的网站html分析框架BeautifulSoup
- Python2.7 使用HTMLParser简单解析HTML
- python接口自动化(二十七)--html 测试报告——上(详解)
- HTML中嵌入PHP的简单方法
- python处理html转义字符的方法详解
- python-mysql实现简单功能
- 【Android2D游戏开发十六】(上文之触摸屏手势)详解Android Gesture 手势操作!利用手势实现一个简单切换图片的功能!
- python实现简单爬虫功能
- python实现简单爬虫功能