odoo 在 /web 的路由里，定义了页面渲染：
response = request.render('web.webclient_bootstrap', qcontext=context)
在 webclient_bootstrap 里首先实例化了 WebClient。
var web_client = new WebClient();
$(function() {
web_client.setElement($(".origin"));
web_client.start();
WebClient 的 load_menus 会 ajax 请求后台的菜单，处理成 menuData
load_menus: function () {
return this._rpc({
model: 'ir.ui.menu',
method: 'load_menus',
args: [config.debug],
context: session.user_context,
})
.then(function (menuData) {
// Compute action_id if not defined on a top menu item
for (var i = 0; i < menuData.children.length; i++) {
var child = menuData.children[i];
if (child.action === false) {
while (child.children && child.children.length) {
child = child.children[0];
if (child.action) {
menuData.children[i].action = child.action;
break;
}
}
}
}
return menuData;
});
},
用 menuData 实例化菜单
instanciate_menu_widgets: function () {
var self = this;
var defs = [];
return this.load_menus().then(function (menuData) {
self.menu_data = menuData;
// Here, we instanciate every menu widgets and we immediately append them into dummy
// document fragments, so that their `start` method are executed before inserting them
// into the DOM.
if (self.menu) {
self.menu.destroy();
}
self.menu = new Menu(self, menuData);
defs.push(self.menu.prependTo(self.$el));
return $.when.apply($, defs);
});
},
在 menu.js 里只监听了 o_menu_brand ，暂时没找到哪里监听子菜单点击的事件，估计是 通过 core.bus.on 来实现的。
因此实现思路是，在 webclient_bootstrap 里添加挂载点，插入自己的 menu，再用 css 隐藏原来的 menu。
原来的 webclient 挂载点是body，很难在 webclient 外面实现菜单，所以先改写template
var web_client = new WebClient();
$(function() {
web_client.setElement($(".origin"));
web_client.start();
});
<t t-set="body_classname" t-value="'o_web_client'"/>
<div class="container">
<div class="origin">
<div class="o_main">
<main class="o_main_content"/>
</div>
</div>
</div>
在 template 里添加 .origin 让其加载 webclient。
新建一个model，在view里加上qweb页面：
<odoo>
<template id="app_sidebar" inherit_id="web.webclient_bootstrap" name="Apps Sidebar">
<xpath expr="//div[hasclass('origin')]" position="before">
<div id="app-sidebar" class="app-sidebar-panel">
<div class="app-sidebar">
<ul id="sidebar" class="app-sidebar-menu">
<t t-foreach="menu_data['children']" t-as="first_level_menu">
<t t-if="first_level_menu['children']">
<a>
<span class="title"><t t-esc="first_level_menu['name']"/></span>
</a>
<t t-foreach="first_level_menu['children']" t-as="second_level_menu">
<t t-if="second_level_menu['children']">
<a>
<span class="title"><t t-esc="second_level_menu['name']"/></span>
</a>
</t>
<t t-else="">
<a t-att-href="'/web%s#menu_id=%s&action='% ('', second_level_menu['id'])"
t-att-class="'nav-link'"
t-att-data-menu="second_level_menu['id']"
t-att-data-menu-xmlid="second_level_menu.get('xmlid')"
t-att-data-action-model="second_level_menu['action'] and second_level_menu['action'].split(',')[0] or None"
t-att-data-action-id="second_level_menu['action'] and second_level_menu['action'].split(',')[1] or None">
<span class="title">
<t t-esc="' '+ second_level_menu['name']"/>
</span>
</a>
</t>
</t>
</t>
<t t-else="">
<a t-att-href="'/web%s#menu_id=%s&action='% ('', first_level_menu['id'])"
t-att-class="'nav-link'"
t-att-data-menu="first_level_menu['id']"
t-att-data-menu-xmlid="first_level_menu.get('xmlid')"
t-att-data-action-model="first_level_menu['action'] and first_level_menu['action'].split(',')[0] or None"
t-att-data-action-id="first_level_menu['action'] and first_level_menu['action'].split(',')[1] or None">
<span class="title">
<t t-esc="first_level_menu['name']"/>
</span>
</a>
</t>
</t>
</ul>
</div>
</div>
</xpath>
</template>
</odoo>
上面代码实现了一个二层的菜单侧栏。
不知道 view 里能不能用 t-call，可以的话就可以实现历遍生成所有的子菜单了。代码生成的 class 等不可变。
上面的代码有个问题，就是在 debug 模式下，点击菜单，会退出 debug 模式。
接下来可以用css更改样式
