Odoo Tree视图详解，读完这篇就够了！

var ListView = require('web.ListView');
var viewRegistry = require('web.view_registry');
var ListController = require('web.ListController');
//这块代码是继承ListController在原来的基础上进⾏扩展
var BiConListController = ListController.extend({
    renderButtons: function () {
        this._super.apply(this, arguments);
        if (this.$buttons) {
            //这⾥找到刚才定义的按钮和输入框
            this.$buttons.find('.create_imitate_button').on('click', this.proxy('create_imitate_function'));
        }
    },
    //创建模拟
    create_imitate_function: function () {
        let self = this
        console.log('创建按钮被点击')
    },
});
var BiConListView = ListView.extend({
    config: _.extend({}, ListView.prototype.config, {
        Controller: BiConListController,
    })
});
//这⾥⽤来注册编写的视图BiConListView，第⼀个字符串是注册名到时候需要根据注册名调⽤视图
viewRegistry.add('imitate_list_view_button', BiConListView);
return BiConListView;

var orderListRenderer = ListRenderer.extend({
    _renderRows: function () {
        //对data数据进行处理
        if (this.state.data.length > 0) {
            // var crm_no = this.state.data[0].data.crm_no
            var id = this.state.data[0].data.id
            var quot_no = this.state.data[0].data.quot_no
            this.state.data[0].data.first_flag = true
            for (let item of this.state.data) {
                if (item.data.quot_no !== quot_no) {
                    item.data.first_flag = true
                    quot_no = item.data.quot_no
                }
            }
 
        }
        return this.state.data.map(this._renderRow.bind(this));
    }
)

var ListRenderer = require('web.ListRenderer');
var orderListRenderer = ListRenderer.extend({
_renderBodyCell: function (record, node, colIndex, options) {
    var tdClassName = 'o_data_cell';
    let len = 1
    //获取合并单元格的lenth
    if (node.attrs.name !== "prod_desc" && node.attrs.name !== "prod_num") {
        len = Number(record.data.prod_length)
    }
    if (node.tag === 'button_group') {
        tdClassName += ' o_list_button';
    } else if (node.tag === 'field') {
        tdClassName += ' o_field_cell';
        var typeClass = FIELD_CLASSES[this.state.fields[node.attrs.name].type];
        if (typeClass) {
            tdClassName += (' ' + typeClass);
        }
        if (node.attrs.widget) {
            tdClassName += (' o_' + node.attrs.widget + '_cell');
        }
    }
    if (node.attrs.editOnly) {
        tdClassName += ' oe_edit_only';
    }
    if (node.attrs.readOnly) {
        tdClassName += ' oe_read_only';
    }
    var $td = $('<td>', {class: tdClassName, tabindex: -1});
    // We register modifiers on the <td> element so that it gets the correct
    // modifiers classes (for styling)
    var modifiers = this._registerModifiers(node, record, $td, _.pick(options, 'mode'));
    // If the invisible modifiers is true, the <td> element is left empty.
    // Indeed, if the modifiers was to change the whole cell would be
    // rerendered anyway.
    if (modifiers.invisible && !(options && options.renderInvisible)) {
            //进行单元格合并+样式居中
        return $td.attr('rowSpan', len).css({'vertical-align': 'middle'});
    }
    if (node.tag === 'button_group') {
        for (const buttonNode of node.children) {
            if (!this.columnInvisibleFields[buttonNode.attrs.name]) {
                //进行单元格合并+样式居中
                $td.append(this._renderButton(record, buttonNode)).attr('rowSpan', len).css({'vertical-align': 'middle'});;
            }
        }
        return $td;
    } else if (node.tag === 'widget') {
        //进行单元格合并+样式居中
        return $td.append(this._renderWidget(record, node)).attr('rowSpan', len).css({'vertical-align': 'middle'});
    }
    if (node.attrs.widget || (options && options.renderWidgets)) {
        //判断是否是合并列的第一跳数据，并且是否开启了编辑权限
        if (record.data.first_flag == undefined) {
            if (node.attrs.name !== "prod_desc" && node.attrs.name !== "prod_num") {
                //对合并列进行隐藏
                var $el = this._renderFieldWidget(node, record, _.pick(options, 'mode'));
                return $td.append($el).attr('rowSpan', len).css({'vertical-align': 'middle','display': 'none'});
            } else {
                var $el = this._renderFieldWidget(node, record, _.pick(options, 'mode'));
                return $td.append($el).attr('rowSpan', len).css({'vertical-align': 'middle'});
            }
        } else {
            var $el = this._renderFieldWidget(node, record, _.pick(options, 'mode'));
            return $td.append($el).attr('rowSpan', len).css({'vertical-align': 'middle'});
        }
    }
    this._handleAttributes($td, node);
    this._setDecorationClasses($td, this.fieldDecorations[node.attrs.name], record);
    var name = node.attrs.name;
    var field = this.state.fields[name];
    var value = record.data[name];
    var formatter = field_utils.format[field.type];
    var formatOptions = {
        escape: true,
        data: record.data,
        isPassword: 'password' in node.attrs,
        digits: node.attrs.digits && JSON.parse(node.attrs.digits),
    };
    var formattedValue = formatter(value, field, formatOptions);
    var title = '';
    if (field.type !== 'boolean') {
        title = formatter(value, field, _.extend(formatOptions, {escape: false}));
    }
    //同上
    if (record.data.first_flag == undefined) {
        if (node.attrs.name !== "prod_desc" && node.attrs.name !== "prod_num") {
            return $td.html(formattedValue).attr('title', title).attr('rowSpan', len).css({ 'vertical-align': 'middle','display': 'none'});
        } else {
            return $td.html(formattedValue).attr('title', title).attr('rowSpan', len).css({'vertical-align': 'middle'});
        }
    } else {
        return $td.html(formattedValue).attr('title', title).attr('rowSpan', len).css({'vertical-align': 'middle'});
    }
    }
})

_renderRow: function (record) {
    var self = this;
    var $cells = this.columns.map(function (node, index) {
        return self._renderBodyCell(record, node, index, {mode: 'readonly'});
    });
 
    var $tr = $('<tr/>', {class: 'o_data_row'}).attr('data-id', record.id).append($cells);
    if (this.hasSelectors) {
        //增加record.data参数,便于渲染勾选列
        $tr.prepend(this._renderSelector('td', !record.res_id, record.data));
    }
    this._setDecorationClasses($tr, this.rowDecorations, record);
    return $tr;
    },
_renderSelector: function (tag, disableInput, data) {
    var $content = dom.renderCheckbox();
    if (disableInput) {
        $content.find("input[type='checkbox']").prop('disabled', disableInput);
    }
    if (data) {
        if (data.first_flag != undefined) {//对于同一将合并单元格的勾选按钮，只渲染第一次，其他勾选按钮不渲染
             return $('<' + tag + '>').addClass('o_list_record_selector').attr('rowSpan', Number(data.prod_length)).css({'vertical-align': 'middle'}).append($content);
        } else {
             return
    } else {
        return $('<' + tag + '>').addClass('o_list_record_selector').css({'vertical-align': 'middle'}).append($content);
    }
}

var FieldMonetary = require('web.basic_fields').FieldMonetary;
var fieldRegistry = require('web.field_registry');
//widget
var imitateOperateFields = FieldMonetary.extend({
    className: 'o_field_orderOperate',
    events: _.extend({}, FieldMonetary.prototype.events, {
        'click': '_onClick',
    }),
    _onClick: function (event) {
        event.preventDefault()
        let self = this
        console.log('按钮点击')
    },
    //字段渲染
    _render: function () {
        this.$el.data('value', this.value).css('color', '#4e6ef2').attr('title', this.value);
        return this._super.apply(this, arguments);
    }
})
//widget绑定
fieldRegistry.add('imitate_fields', imitateOperateFields);

// Sticky Header & Footer in List View
.material_table {
  .table-responsive {
    .o_list_table {
      td:first-child, th:first-child {
          position:sticky;
          left:0; /* 首行永远固定在左侧 */
          z-index:1;
          background-color:$o-list-footer-bg-color;
      }
      thead tr th {
          position:sticky !important;
          top:0; /* 列首永远固定在头部  */
      }
      th:first-child{
          z-index:2;
          background-color:$o-list-footer-bg-color;
      }
 
      thead tr:nth-child(1) th {
          background-color: $o-list-footer-bg-color;
      }
      thead tr th:nth-child(2)  {
          z-index:2;
          left:40px;
          background-color: $o-list-footer-bg-color;
      }
 
      tbody tr td:nth-child(2)  {
          position:sticky;
          z-index:1;
          left:40px;
          background-color: $o-list-footer-bg-color;
      }
      tfoot,
      tfoot tr:nth-child(1) td {
        position: sticky;
        bottom: 0;
      }
      tfoot tr:nth-child(1) td {
        background-color: $o-list-footer-bg-color;
      }
    }
  }
}