odoo html模式,Python odoo中嵌入html简单的分页功能-CSDN博客

该博客介绍了如何在Odoo框架内利用HTTP控制器和Jinja2模板引擎来实现HTML页面的数据分页。通过定义控制器方法获取数据并计算总页数，然后将数据和分页信息传递给模板进行渲染。模板中使用条件判断来展示分页按钮，并给出了CSS样式以美化分页组件。同时，展示了JavaScript代码处理鼠标悬停和点击事件，实现分页按钮的交互效果。

摘要由CSDN通过智能技术生成

在odoo中，通过iframe嵌入 html，页面数据则通过controllers获取，使用jinja2模板传值渲染

html页面分页内容，这里写了判断逻辑

首页

{% if current_page == 1 %}

＜

{% else %}

＜

{% endif %}

{% if current_page == total_page %}

＞

{% else %}

＞

{% endif %}

共{{total_page}}页第{{current_page}}页跳转

在,odoo的controllers中的逻辑

class CarBudgetReport(http.Controller):

@http.route('/car/budget/report/', 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

html 分页js代码

// 悬浮样式

$('#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 = "跳转";

};

}

之后便可以进行数据的简单分页