在html">odoo中,通过iframe嵌入 html,页面数据则通过controllers获取,使用jinja2模板传值渲染
html页面分页内容,这里写了判断逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<! - - 分页 - - >
<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中的逻辑
1
2
3
4
5
6
7
8
9
10
|
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文件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/ * 分页功能的通用样式 * /
#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
1
2
3
4
5
6
|
<?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代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<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简单的分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!原文链接:https://www.cnblogs.com/ws17345067708/archive/2019/05/29/10941807.html