如何制作一个固定列的表?

时间:2018-01-31 12:31:11

标签: javascript jquery odoo

我需要Odoo 10中带有固定列的表,所以我要包含来自this链接的脚本文件。

还创建了JSFiddle https://jsfiddle.net/uL0a10sm/7/

 <template id="rfq_assets_backend" name="rfq assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">             
         <script type="text/javascript" src="/purchase_requisition/static/src/js/RFQ_form_widgets.js"></script>                              
         <link rel="stylesheet" href="/purchase_requisition/static/src/css/rfq_form.css" />  
         <link rel="stylesheet" href="/purchase_requisition/static/src/css/jquery.dataTables.css" />
         <link rel="stylesheet" href="/purchase_requisition/static/src/css/fixedColumns.dataTables.css" />
         <!-- <script type="text/javascript" src="/purchase_requisition/static/src/js/jquery-1.12.4.js"></script> -->
         <script type="text/javascript"
                    src="/purchase_requisition/static/src/js/jquery.dataTables.js"></script>             
         <script type="text/javascript"
                    src="/purchase_requisition/static/src/js/dataTables.fixedColumns.js"></script>
        </xpath>
  </template>

form_view.js

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

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>
    <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>
    </table>  
</t>

我收到以下错误:

如果继承jquery lib jquery-1.12.4.js,我收到错误:

  

$.().popover不是函数

如果lib未被继承或替换,我既没有fixedcolumns也没有任何错误。

如何解决此错误?

1 个答案:

答案 0 :(得分:0)

嵌入式脚本的顺序很重要,正如在给定的site中所描述的那样。

您必须首先加载jQuery lib,然后加载jQuery ext dataTables,然后加载fixedColumns。 jQuery导入不是必需的,因为它已经在/web/views/webclient_templates.xml中导入了。试试这个:

<template id="fc_assets_backend" name="account assets" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/purchase_requisition/static/src/js/jquery.dataTables.js"></script>
        <script type="text/javascript"
                src="/purchase_requisition/static/src/js/dataTables.fixedColumns.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css"/>
        <link rel="stylesheet"
              href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.css"/>
    </xpath>
</template>

另外,请确保您已经拥有

中的所有dataTables.fixedColumns.jsjquery.dataTables.js个文件
/purchase_requisition/static/src/js/

你没有提到你正在使用的Odoo版本,我根据11版本给出了答案。