在layui_theme_odoo12主题中，集成了tree视图上添加搜索栏，用法和odoo11的主题较为相似，具体效果入下图：
1、首先需要在tree的xml中添加以下属性：
xxxxxxxxxx15
1
<record id="view_funenc_wechat_account_tree" model="ir.ui.view">2
<field name="name">企业微信企业列表</field>3
<field name="model">funenc.wechat.account</field>4
<field name="arch" type="xml">5
<tree search_ex_template="res_users_search_template">6
<field name="code"/>7
<field name="name"/>8
<field name="corp"/>9
<field name="app_ids"/>10
<field name="open_syn"/>11
<button type="object" name="sync_wechat" string="同步该企业微信"12
class="layui-btn layui-btn-sm synchronize-btn"/>13
</tree>14
</field>15
</record>已复制
search_ex_template="res_users_search_template" 这个属性为必须属性，表示使用哪个搜索模板来显示搜索栏，这里使用了res_users_search_template这个搜索模板来显示，模板样例代码如下：（以下为qweb代码，需要在__manifest__.py中引入qweb路径）
xxxxxxxxxx27
1
<t t-name="res_users_search_template">2
<div class="row align-items-center">3
<div class="col-lg-2 col-md-3 col-sm-6 col-12">4
<span for="name"/>5
</div>6
7
<div class="col-lg-2 col-md-3 col-sm-6 col-12">8
<span for="create_date" options="{'range': false, 'filed_type': 'date', 'operator': '>'}"/>9
</div>10
11
<div class="col-lg-2 col-md-3 col-sm-6 col-12">12
<!-- 多种查询聚集字段 -->13
<span for="aggregate_search" options="{'field_type': 'char', 'placeholder': '这是提示信息', 'operator': ['|', ['name', 'ilike', '{{aggregate_value}}'], ['wx_userid', 'ilike', '{{aggregate_value}}']]}"/>14
</div>15
16
<div class="col-md-auto">17
<!-- class有search_extend_apply的为搜索的确定按钮 -->18
<button type="button" class="layui-btn layui-btn-sm search_extend_apply">19
Search20
</button>21
<!-- class有search_extend_reset的为搜索的重置按钮 -->22
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary search_extend_reset">23
Clear24
</button>25
</div>26
</div>27
</t>已复制
注：在一个节点中只要有for="xxx"属性，即表示会将此节点替换为一个搜索框，搜索框的字段与for="xxx"的内容字段匹配，并且会自动匹配字段类型，如果是当前模型不存在的字段，则会将此节点替换为空，此处可使用options="xx"传入相应的属性以更改对应设置，options可传的属性值有：
- filed_type：可传入的值有'char', 'text', 'integer', 'float', 'date', 'datetime', 'many2one', 'boolean', 'selection', 'one2many', 'many2many'中任意一个，但是不要将非关系型的'char', 'text', 'integer', 'float', 'date', 'datetime', 'boolean'变更为'many2one', 'selection', 'one2many', 'many2many'
- range:：仅在字段类型或者filed_type为'date', 'datetime'时生效，此值默认为true，不是字符串！是布尔值，如果改为false，会将时间的搜索从范围变更为单个，例：
不传或者'range': true时 ![]()
'range': false时![]()
'range': false时
placeholder: 输入框内的提示信息
- operator：表示搜索式的符号，可传入的值有'between', '=', '!=', 'ilike', 'like', 'in', 'not in', '>=', '<=', '>', '<'中的任意一个，具体含义和后端相同
aggregate_search这个字段为特殊字段，是一个聚合多个字段的查询字段，在模型中不能存在该同名字段时可使用，使用后可将输入的值
匹配到表达式中，表达式使用operator="xxx"传入, 'operator': [['name', '=', '{{aggregate_value}}']]}"中, {{aggregate_value}}即为输入的值，需要用引号包裹。默认是char类型，可以使用filed_type属性变更为'integer', 'float', 'date', 'datetime'类型，为时间类型时range用法相同，需要注意的是，如filed_type为'date', 'datetime'并且没有传入range或者range为true，此时的输入值对应有两个，故operator表达式中的获取值需要变为{{aggregate_value[0]}}或者{{aggregate_value[1]}}以获取相应的第一个时间值或第二个时间值
2、进阶，当需要添加自定义的按钮并绑定自定义的事件时，需要在tree的xml中添加属性：
xxxxxxxxxx17
1
<record id="user_view_tree" model="ir.ui.view">2
<field name="name">用戶列表</field>3
<field name="model">res.users</field>4
<field name="arch" type="xml">5
<tree import="false" edit="0" create="0" delete="0" class="noOpen"6
search_ex_template="res_users_search_template" search_pannel_js_class="tree_search_pannel">7
<field name="name" string="Name"/>8
<field name="login" string="Account"/>9
<field name="post"/>10
<field name="grade"/>11
<field name="display_groups"/>12
<field name="email" string="E-mail"/>13
<field name="state"/>14
<widget name="res_user_tree_button" string="Operation"/>15
</tree>16
</field>17
</record>已复制
search_pannel_js_class="tree_search_pannel" 表示使用这个值对应的odoo注册的js来调用js函数，此时这个js是这样的
xxxxxxxxxx91
1
odoo.define("tree_search_pannel", function (require) {2
"use strict";3
4
// 自定义控制面版，添加js进行更加灵活的控制5
6
var widgetRegistry = require('web.widget_registry');7
var search_pannel_default = require('layui_search_panel');8
var core = require('web.core');9
var Dialog = require('web.Dialog');10
var _t = core._t;11
12
var tree_search_pannel = search_pannel_default.extend({13
events: _.extend({}, search_pannel_default.prototype.events, {14
'click .department_search_apply': 'department_search_apply',15
'click .department_reset_search': 'department_reset_search',16
}),17
18
start: function () {19
var self = this;20
return self._super()21
},22
23
// 读取模板，同时读取属性并构造搜索对象24
renderElement: function () {25
var $el;26
var bHaveExt = false;27
this.propositions = [];28
$el = $(core.qweb.render(this.pannel_template, { widget: this }).trim());29
var fields_place_holders = $el.find("[for]");30
for (var i = 0; i < fields_place_holders.length; i++) {31
var holder = fields_place_holders[i];32
var filed_name = $(holder).attr('for');33
var options = $(holder).attr('options') || "{'range': true}"; //因xml模板传过来为string类型，故此不能用Obj34
options = pyeval.py_eval(options);35
// 这里添加了一个传入方法并重载layui_search_proposition实例下方法的功能36
options.funcs = {};37
var field = this.fields[filed_name];38
// 比如39
// if(filed_name === 'aggregate_search'){40
// options.funcs = {41
// setPlaceholder: function (field, option) {42
// this.placeholder = _t(option.placeholder || '请输入' + field.string)43
// },44
// }45
// };46
47
// 如果有字段或者为聚合搜索输入框则渲染48
if (field || filed_name === 'aggregate_search') {49
// 因原有field会被frozen冻结，所以需要复制一份调用50
var copy_field = Object.assign({}, field);51
// odoo12这里field没有name属性52
copy_field.name = filed_name;53
var prop = new layui_search_proposition(this, copy_field, options);54
prop.replace(holder);55
this.propositions.push(prop);56
bHaveExt = true57
}58
}59
this._replaceElement($el);60
},61
62
/**63
* 通用搜索欄搜索按鈕64
*/65
commit_search: function () {66
var domains = [];67
_.each(this.propositions, function (proposition) {68
var domain = proposition.get_domain();69
if (!domain) {70
return71
}72
domains.push(domain)73
});74
this.trigger_up('search', {75
domains: domains76
});77
},78
79
/**80
* 通用搜索重置81
*/82
reset_search: function () {83
var self = this;84
self._super();85
}86
});87
88
widgetRegistry.add("tree_search_pannel", tree_search_pannel);89
90
return tree_search_pannel91
});已复制