Odoo 10固定列表格实现报错及解决方案咨询

我之前在Odoo项目里处理过几乎一模一样的DataTables固定列需求，你的问题本质是重复引入jQuery导致Odoo自带Bootstrap组件冲突，加上表格结构不符合DataTables要求，才会出现要么报错要么功能失效的情况。下面给你一步步解决的方案：

1. 移除手动引入的jQuery文件 #

Odoo 10已经自带了兼容的jQuery版本（1.11.x系列），手动引入jquery-1.12.4.js会覆盖全局的$对象，导致Bootstrap的popover等扩展方法丢失——这就是你看到$.().popover is not a function报错的原因。

直接删掉这段注释掉的代码（彻底移除，不要留在模板里）：

<!-- <script type="text/javascript" src="/purchase_requisition/static/src/js/jquery-1.12.4.js"></script> -->

2. 修正表格HTML结构 #

DataTables要求表格必须包含<thead>和<tbody>标签，你的模板里直接在<thead>后写数据行，缺少<tbody>包裹，这会导致DataTables无法正确识别表格结构，初始化失败却没有明显报错。

修改你的View.xml中的表格代码：

<t t-name="rfq_form">
  <table id="vendor_form" class="stripe row-border order-column" >
    <thead>
      <th>Product</th>
      <t t-foreach="all_vendors" t-as="vendor">
        <th class="rfq_head"><t t-esc="vendor.partner_name"/></th>
      </t>
      <th>Final Choose</th>
      <th>Ring the vendor by</th>
    </thead>
    <!-- 新增tbody标签包裹数据行 -->
    <tbody>
      <t t-foreach="lines" t-as="line">
        <tr t-att-class="pol" t-att-data-lineid="line.id" t-att-data-selected="selected">
          <td class="cell_product_name"><t t-esc="line.product_name"/></td>
          <t t-foreach="all_vendors" t-as="vendor">
            <t t-set="i" t-value="0"></t>
            <t t-foreach="line.partners" t-as="partner">
              <t t-if="vendor.partner_id == partner.partner_id">
                <td>
                  <div class="rfq_head edit_price">
                    <input type="text" name="price" t-att-value="partner.price_unit"/>
                    <input type="text" name="sdiscount"/>
                    <input type="number" name="bonus"/>
                    <input type="checkbox" name="select_partner"/>
                  </div>
                </td>
                <t t-set="i" t-value="1"></t>
              </t>
            </t>
            <t t-if="i==0">
              <td></td>
            </t>
          </t>
          <td></td>
          <td></td>
        </tr>
      </t>
    </tbody>
  </table>
</t>

3. 兼容Odoo的jQuery环境初始化DataTables #

Odoo内部对jQuery做了封装，直接使用全局$可能会有冲突，建议在你的form_view.js中使用Odoo widget自带的$对象，或者用jQuery全称初始化：

// 如果是在Odoo Widget的render方法中
var table = self.$('#vendor_form').DataTable( {
    scrollY: "300px",
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
        leftColumns: 1,
        rightColumns: 1
    }
});

或者用IIFE包裹避免全局冲突：

jQuery(function($) {
    var table = $('#vendor_form').DataTable( {
        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns: {
            leftColumns: 1,
            rightColumns: 1
        }
    });
});

4. 验证静态资源加载状态 #

打开浏览器开发者工具的Network标签，刷新页面后检查以下资源是否成功加载（无404错误）：

• /purchase_requisition/static/src/js/jquery.dataTables.js
• /purchase_requisition/static/src/js/dataTables.fixedColumns.js
• /purchase_requisition/static/src/css/jquery.dataTables.css
• /purchase_requisition/static/src/css/fixedColumns.dataTables.css

如果有资源加载失败，检查文件路径是否和Odoo模块的目录结构一致。

按照这几个步骤操作后，应该既能解决popover的报错问题，又能正常显示DataTables的固定列效果。

内容的提问来源于stack exchange，提问作者Silviaa